mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-10 23:36:14 -05:00
260963e6b1
no issue - adds `gh-image-uploader` that handles image uploads in a fully ember fashion and with no dependency on `uploader.js` - adds `gh-image-uploader-with-preview` that can fully replace the old `gh-uploader` - replace uses of `gh-uploader` in PSM & TSM with `gh-image-uploader-with-preview` - updates the editor preview image handling to use the new `gh-image-uploader-with-preview` component - updates the image upload modal to use `gh-image-uploader` (utilises the `saveButton=false` flag which means the preview has to be handled externally to avoid auto-replacement when typing a URL) - removes all old `uploader.js` related code - adds custom `RequestEntityTooLargeError` and `UnsupportedMediaTypeError` errors to our `ajax` service
101 lines
2.6 KiB
JavaScript
101 lines
2.6 KiB
JavaScript
import Ember from 'ember';
|
|
import ModalComponent from 'ghost/components/modals/base';
|
|
import cajaSanitizers from 'ghost/utils/caja-sanitizers';
|
|
|
|
const {
|
|
computed,
|
|
inject: {service},
|
|
isEmpty
|
|
} = Ember;
|
|
|
|
export default ModalComponent.extend({
|
|
model: null,
|
|
submitting: false,
|
|
|
|
url: '',
|
|
newUrl: '',
|
|
|
|
config: service(),
|
|
notifications: service(),
|
|
|
|
image: computed('model.model', 'model.imageProperty', {
|
|
get() {
|
|
let imageProperty = this.get('model.imageProperty');
|
|
|
|
return this.get(`model.model.${imageProperty}`);
|
|
},
|
|
|
|
set(key, value) {
|
|
let model = this.get('model.model');
|
|
let imageProperty = this.get('model.imageProperty');
|
|
|
|
return model.set(imageProperty, value);
|
|
}
|
|
}),
|
|
|
|
didReceiveAttrs() {
|
|
let image = this.get('image');
|
|
this.set('url', image);
|
|
this.set('newUrl', image);
|
|
},
|
|
|
|
// TODO: should validation be handled in the gh-image-uploader component?
|
|
// pro - consistency everywhere, simplification here
|
|
// con - difficult if the "save" is happening externally as it does here
|
|
//
|
|
// maybe it should be handled at the model level?
|
|
// - automatically present everywhere
|
|
// - file uploads should always result in valid urls so it should only
|
|
// affect the url input form
|
|
keyDown() {
|
|
this._setErrorState(false);
|
|
},
|
|
|
|
_setErrorState(state) {
|
|
if (state) {
|
|
this.$('.url').addClass('error');
|
|
} else {
|
|
this.$('.url').removeClass('error');
|
|
}
|
|
},
|
|
|
|
_validateUrl(url) {
|
|
if (!isEmpty(url) && !cajaSanitizers.url(url)) {
|
|
this._setErrorState(true);
|
|
return {message: 'Image URI is not valid'};
|
|
}
|
|
|
|
return true;
|
|
},
|
|
// end validation
|
|
|
|
actions: {
|
|
fileUploaded(url) {
|
|
this.set('url', url);
|
|
this.set('newUrl', url);
|
|
},
|
|
|
|
removeImage() {
|
|
this.set('url', '');
|
|
this.set('newUrl', '');
|
|
},
|
|
|
|
confirm() {
|
|
let model = this.get('model.model');
|
|
let newUrl = this.get('newUrl');
|
|
let result = this._validateUrl(newUrl);
|
|
let notifications = this.get('notifications');
|
|
|
|
if (result === true) {
|
|
this.set('submitting', true);
|
|
this.set('image', newUrl);
|
|
|
|
model.save().catch((err) => {
|
|
notifications.showAPIError(err, {key: 'image.upload'});
|
|
}).finally(() => {
|
|
this.send('closeModal');
|
|
});
|
|
}
|
|
}
|
|
}
|
|
});
|