Ghost/ghost/admin/app/components/modal-upload-image.js
Kevin Ansfield 352c4af1d7 Refactored usage of .get('property') with es5 getters
no issue
- ran [es5-getter-ember-codemod](https://github.com/rondale-sc/es5-getter-ember-codemod)
- [es5 getters RFC](https://github.com/emberjs/rfcs/blob/master/text/0281-es5-getters.md)
- updates the majority of `object.get('property')` with `object.property` with exceptions:
  - `.get('nested.property')` - it's not possible to determine if this is relying on "safe" path chaining for when `nested` doesn't exist
  - `.get('config.x')` and `.get('settings.x')` - both our `config` and `settings` services are proxy objects which do not support es5 getters
- this PR is not exhaustive, there are still a number of places where `.get('service.foo')` and similar could be replaced but it gets us a long way there in a quick and automated fashion
2019-03-06 13:54:14 +00:00

108 lines
2.8 KiB
JavaScript

import ModalComponent from 'ghost-admin/components/modal-base';
import cajaSanitizers from 'ghost-admin/utils/caja-sanitizers';
import {computed} from '@ember/object';
import {isEmpty} from '@ember/utils';
import {inject as service} from '@ember/service';
import {task} from 'ember-concurrency';
export default ModalComponent.extend({
config: service(),
notifications: service(),
model: null,
url: '',
newUrl: '',
_isUploading: false,
image: computed('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.image;
this.set('url', image);
this.set('newUrl', image);
},
actions: {
fileUploaded(url) {
this.set('url', url);
this.set('newUrl', url);
},
removeImage() {
this.set('url', '');
this.set('newUrl', '');
},
confirm() {
this.uploadImage.perform();
},
isUploading() {
this.toggleProperty('_isUploading');
}
},
// 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
uploadImage: task(function* () {
let model = this.get('model.model');
let newUrl = this.newUrl;
let result = this._validateUrl(newUrl);
let notifications = this.notifications;
if (result === true) {
this.set('image', newUrl);
try {
yield model.save();
} catch (e) {
notifications.showAPIError(e, {key: 'image.upload'});
} finally {
this.send('closeModal');
}
}
}).drop()
});