Ghost/core/client/app/components/gh-uploader.js
2016-01-19 07:03:27 -06:00

89 lines
2.5 KiB
JavaScript

import Ember from 'ember';
import uploader from 'ghost/assets/lib/uploader';
const {
Component,
computed,
get,
inject: {service},
isEmpty,
run
} = Ember;
export default Component.extend({
classNames: ['image-uploader', 'js-post-image-upload'],
config: service(),
imageSource: computed('image', function () {
return this.get('image') || '';
}),
// removes event listeners from the uploader
removeListeners() {
let $this = this.$();
$this.off();
$this.find('.js-cancel').off();
},
// NOTE: because the uploader is sometimes in the same place in the DOM
// between transitions Glimmer will re-use the existing elements including
// those that arealready decorated by jQuery. The following works around
// situations where the image is changed without a full teardown/rebuild
didReceiveAttrs(attrs) {
let oldValue = attrs.oldAttrs && get(attrs.oldAttrs, 'image.value');
let newValue = attrs.newAttrs && get(attrs.newAttrs, 'image.value');
this._super(...arguments);
// always reset when we receive a blank image
// - handles navigating to populated image from blank image
if (isEmpty(newValue) && !isEmpty(oldValue)) {
this.$()[0].uploaderUi.reset();
}
// re-init if we receive a new image
// - handles back button navigating from blank image to populated image
// - handles navigating between populated images
if (!isEmpty(newValue) && this.$()) {
this.$('.js-upload-target').attr('src', '');
this.$()[0].uploaderUi.reset();
this.$()[0].uploaderUi.initWithImage();
}
},
didInsertElement() {
this._super(...arguments);
this.send('initUploader');
},
willDestroyElement() {
this._super(...arguments);
this.removeListeners();
},
actions: {
initUploader() {
let el = this.$();
let ref = uploader.call(el, {
editor: true,
fileStorage: this.get('config.fileStorage')
});
el.on('uploadsuccess', (event, result) => {
if (result && result !== '' && result !== 'http://') {
run(this, function () {
this.sendAction('uploaded', result);
});
}
});
el.on('imagecleared', run.bind(this, 'sendAction', 'canceled'));
this.sendAction('initUploader', ref);
}
}
});