addon/components/ui-uploader.js

import Ember from 'ember';
import { isEmpty } from '@ember/utils';
import $ from 'jquery';
import { A } from '@ember/array';
import { computed } from '@ember/object';
import { htmlSafe } from '@ember/template';
import Component from '@ember/component';
 
import emberUploader from '../utils/ember-uploader';
import { fileObject } from '../utils/file-object';
import layout from '../templates/components/ui-uploader';
 
 
 
/**
ui-uploader component
 
@module components
@namespace components
@class UiUploader
@constructor
*/
export default Component.extend({
    layout: layout,
    /**
     * file request ajax setting traditional, by default true
     * @property {boolean} traditional
     * 
     */
    traditional: true,
    actions: {
        /** 
        activate upload action
        @event start
        @param {Object} obj fileInput instance see {{#crossLink " fileInput"}}{{/crossLink}}
        **/
        start: function(obj) {
            let url = this.get('url'),
                self = this;
 
            obj.uploader = emberUploader.create({
                url: url,
                traditional: self.get('traditional')
            });
 
            obj.uploadPromise = obj.uploader.upload(obj.fileToUpload, this.params);
 
            self.sendAction('uploadStart', obj);
            obj.set('isUploading', computed.alias('uploader.isUploading'));
 
            obj.uploader.on('progress', function(e) {
                obj.set('percent', parseInt(e.percent));
                self.sendAction('uploadProgress', e);
            });
 
            obj.uploader.on('didUpload', function(data) {
                obj.set('isUploaded', true);
                obj.set('data', data);
 
                self.sendAction('uploadSuccess', obj);
            });
        },
        /** 
        deactivate upload action
        @event abort
        @param {Object} obj fileInput instance see {{#crossLink " fileInput"}}{{/crossLink}}
        **/
        abort: function(obj) {
            this.sendAction('uploadAbort', obj);
            if (obj.uploader) {
                try {
                    obj.uploader.abort();
                } catch (e) {
                    Ember.Logger.error(e)
                }finally {
                    this.get('queue').removeObject(obj);
                }
            } else {
                this.get('queue').removeObject(obj);
            }
        },
        /** 
        delete file from queue
        @event 
        @param {Object} obj fileInput instance see {{#crossLink " fileInput"}}{{/crossLink}}
        **/
        deleteFile: function(obj) {
            this.get('queue').removeObject(obj);
            this.sendAction('deleteFile', obj);
        }
    },
    /**
     * The upload url
     *
     * @property url
     * @type String
     * @default  ""
     */
    url: '',
 
    /**
     * The root component element
     *
     * @property tagName
     * @type String
     * @default  "div"
     */
    tagName: 'div',
 
    /**
     * A array contain class names apply to root element
     *
     * @property classNames
     * @type Array
     * @default  ['ui', 'segment']
     */
    classNames: ['ui', 'segment'],
 
    /**
     * To allow  file autoUpload
     *
     * @property autoUpload
     * @type boolean
     * @default  true
     */
    autoUpload: true,
 
    /**
     * upload file queue
     *
     * @property queue
     * @type Array
     * @default  []
     */
    queue: null,
 
    /**
     * upload multiple file
     *
     * @property  multiple
     * @type boolean
     * @default  false
     */
    multiple: false,
 
    /**
     * extra params
     *
     * @property params
     * @type params
     * @default  null
     */
    params: null,
 
    /**
     * file accept
     *
     * @property accept
     * @type String
     * @default  null
     */
    accept: 'audio/*,video/*,image/*',
 
    /**
     * @method didInsertElement
     * @observes "didInsertElement" event
     * @returns  {void}
     */
    didInsertElement() {
        let self = this;
        this.$('input').change(function(e) {
            let input = e.target;
            if (!isEmpty(input.files)) {
                for (let i = input.files.length - 1; i >= 0; i--) {
                    let obj = fileObject.create({
                        fileToUpload: input.files[i]
                    });
                    self.queue.pushObject(obj);
                    if (self.autoUpload) {
                        self.send('start', obj);
                    }
                }
 
                //$(this).after($(this).clone().val(""));
                //empty input files
                $(this).val("");
            }
        });
    },
    /**
     * @function willDestroy empty queue
     * 
     * @returns  null
     */
    willDestroy(){
        this._super();
        this.queue.clear();//clear input file
    },
 
    /**
     * @function willDestroy empty queue
     * 
     * @returns  null
     */
    init(){
        this._super(...arguments);
        if(this.queue === null){
            this.set('queue', A());
        }
    },
    /**
     * @function inputStyle
     * 
     * @returns  {string}
     */
    inputStyle: computed({
        get(){
            let style_array = [
                'opacity: 0',
                'width:100% !important',
                'overflow:hidden',
                'position:relative',
                'left:-100%',
                'display:block',
            ];
            return htmlSafe(style_array.join(';'));
        }
    }),
    /**
     * @function labelStyle
     * 
     * @returns  {string}
     */
    labelStyle: computed({
        get(){
            let style_array = [
                'height: 6.25em',
                'line-height: 5.25em',
                'text-align: center',
            ];
            return htmlSafe(style_array.join(';'));
        }
    }),
});