Media Uploader using adopted-ember-addons/ember-file-upload

media-uploader.hbs

{{#file-dropzone name="media" as |dropzone queue|}}
  {{#if dropzone.active}}
    <div class='upload-modal {{if dropzone.valid "valid" "invalid"}}'>
      {{#if dropzone.valid}}
        Upload some stuff
      {{else}}
        <p>Sorry that file type can't be uploaded here</p>
      {{/if}}
    </div>
  {{/if}}
  <div class='dropzone'>
    {{#if dropzone.supported}}
      <button {{action "toggleUpload"}}class="btn btn-primary btn-outline upload-close">Close</button>
      <img alt="upload image"class="upload-img" src="images/media-browse.svg">
      <p class="upload-msg">Drag Items to Upload</p>
    {{/if}}
    {{#file-upload name="media"
      for="upload-media"
      accept=accept
      multiple=true
      onfileadd=(action "uploadMedia")}}
      <a class="btn btn-primary btn-blue a-btn-primary" tabindex=0>Browse Files</a>
    {{/file-upload}}
  </div>
  {{#if queue.files.length}}
    <ul class="upload-queue">
      {{#each queue.files as |file|}}
        {{#if (get this file.id)}}
          <img class='loading-image' src={{get this file.id}} alt="">
        {{else}}
          <img class='loading-image' src='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif' alt="">
        {{/if}}
        {{!-- <img src={{blob-as-string file}} alt=""> --}}
        <li>
          {{file.name}}
          {{ember-progress-bar progress=(div 100 file.progress)}}
        </li>
      {{/each}}
    </ul>
  {{/if}}
{{/file-dropzone}}

media-uploader.js

import Component from '@ember/component';
import { get, set, computed } from '@ember/object';
import config from 'lucy/config/environment';
import { inject as service } from '@ember/service';
import { task } from 'ember-concurrency';
import { A } from '@ember/array';

const MAX_CONCURRENT_UPLOADS = 5;

export default Component.extend({
  classNames: ['rc-media-uploader'],
  session: service(),
  store: service(),
  notify: service(),
  errorMessage: null,
  acceptableFiles: A(['*']),
  accept: computed(function() {
    return get(this, 'acceptableFiles').join(',');
  }),
  uploadMedia: task(function* (file) {
    const filename = get(file, 'name');
    const [mediaType] = file.type.split('/');

    try {
      const idToken = get(this, 'session.data.authenticated.idToken');
      file.readAsDataURL().then(url => this.addFileURL(file, url));
      const { body } = yield file.upload(`${config.APP.API_ENDPOINT}/media/`, {
        headers: {
          Authorization: `JWT ${idToken}`,
        },
        fileKey: 'media_file',
        data: {
          name: filename,
          mediaType,
        },
      });
      this.store.pushPayload({ medias: [body] });
      get(this, 'onMediaAdd')(body.id);
      get(this, 'notify').success(`${body.name} has uploaded`);
    } catch (e) {
      console.log(e); //eslint-disable-line
      get(this, 'notify').error('There was an error uploading');
    }
  }).maxConcurrency(MAX_CONCURRENT_UPLOADS).enqueue(),
  addFileURL(file, url) {
    set(this, file.id, url);
  },
  onMediaAdd: () => {
    // Do nothing
  },
  actions: {
    uploadMedia(file) {
      get(this, 'uploadMedia').perform(file);
    },
  },
});