addon/mixins/file-input-base.js
import { isEmpty } from '@ember/utils';
import Mixin from '@ember/object/mixin';
import Evented from '@ember/object/evented';
import { alias } from '@ember/object/computed';
import { isArray, A } from '@ember/array';
import emberUploader from '../utils/ember-uploader';
import { fileObject } from '../utils/file-object';
/**
file-input-base mixinx
@module mixins
@namespace mixins
@class FileInputBase
@extends Ember.Evented
@constructor
*/
export default Mixin.create(Evented, {
/**
* file request ajax setting traditional, by default true
* @property {boolean} traditional
*
*/
traditional: true,
/**
* file object instance see {{#crossLink " file-object"}}{{/crossLink}}
* @property {Object} fileObject
*
*/
fileObject: null,
/**
* style
* @property {String} style
*
*/
style: '',
/**
* ember uploader instance see {{#crossLink "utils.EmberUploader"}}{{/crossLink}}
*
* @property {Object} uploader
*
*/
uploader: null,
/**
* upload url
*
* @property {String} url
*
*/
url: null,
/**
* upload request method
*
* @property {String} method
* @default 'POST'
*
*/
method: 'POST',
/**
* extra parameters for upload
*
* @property {Object} extra
* @default null
*
*/
extra: null,
/**
* the upload file parameter name
*
* @property {String} paramName
* @default 'file'
*
*/
paramName: 'file',
/**
* the upload file is finished
*
* @property {Boolean} isUploaded
* @default false
*
*/
isUploaded: false,
/**
* the upload request status
*
* @property {Boolean} isUploading
* @default false
*
*/
isUploading: alias('uploader.isUploading'),
/**
* allow autoUpload
*
* @property {Boolean} autoUpload
* @default true
*
*/
autoUpload: true,
/**
* multiple file or not, by default false
*
* @property {Boolean} multiple
* @default false
*
*/
multiple: false,
theme: 'green',
didInsertElement: function() {
let self = this;
this.$('input').change(function(e) {
let input = e.target;
self.trigger('filesDidChange', input.files);
});
},
filesDidChange: function(files) {
if(isArray(files)){
this.send('start', files);
}else if (!isEmpty(files)) {
this.set('fileObject', fileObject.create({
fileToUpload: files[0]
}));
if (this.get('autoUpload')) {
this.send('start');
}
}
},
actions: {
/**
* start upload action
*
* @event start
*
*
*/
start: function(files) {
let { uploader, fileObject, extra} = this.getProperties('uploader', 'fileObject', 'extra');
let self = this;
if(files){
let fa = A({content: files});
uploader.upload(files, extra);
this.sendAction('uploadStart', fa);
uploader.on('didUpload', function(data) {
self.set('isUploaded', true);
//empty input file
self.$('input').val("");
self.sendAction('uploadSuccess', fa, data);
});
}else if (fileObject) {
uploader.upload(fileObject.fileToUpload, extra);
this.sendAction('uploadStart', fileObject);
//didupload event
uploader.on('didUpload', function(data) {
self.set('isUploaded', true);
fileObject.set('data', data);
//empty input file
self.$('input').val("");
self.sendAction('uploadSuccess', fileObject, data);
});
}
//progress event
uploader.on('progress', function(e) {
self.sendAction('uploadProgress', e);
});
},
/**
* abort upload action
*
* @event abort
*
*
*/
abort: function() {
this.get('uploader').abort();
this.sendAction('uploadAbort');
//empty input file
this.$('input').val("");
}
},
init: function() {
this._super(...arguments);
let { url, method, paramName} = this.getProperties('url', 'method', 'paramName');
this.set('uploader', emberUploader.create({
url: url,
paramName: paramName,
type: method,
traditional: this.get('traditional')
}));
},
willDestroy(){
this._super(...arguments);
this.set('uploader', null);
}
});