discourse/app/assets/javascripts/admin/components/resumable-upload.js.es6

import { iconHTML } from "discourse-common/lib/icon-library";
import { bufferedRender } from "discourse-common/lib/buffered-render";

/*global Resumable:true */

/**
  Example usage:

    {{resumable-upload
        target="/admin/backups/upload"
        success="successAction"
        error="errorAction"
        uploadText="UPLOAD"
    }}
**/
export default Ember.Component.extend(
  bufferedRender({
    tagName: "button",
    classNames: ["btn", "ru"],
    classNameBindings: ["isUploading"],
    attributeBindings: ["translatedTitle:title"],

    resumable: null,

    isUploading: false,
    progress: 0,

    rerenderTriggers: ["isUploading", "progress"],

    translatedTitle: function() {
      const title = this.get("title");
      return title ? I18n.t(title) : this.get("text");
    }.property("title", "text"),

    text: function() {
      if (this.get("isUploading")) {
        return this.get("progress") + " %";
      } else {
        return this.get("uploadText");
      }
    }.property("isUploading", "progress"),

    buildBuffer(buffer) {
      const icon = this.get("isUploading") ? "times" : "upload";
      buffer.push(iconHTML(icon));
      buffer.push("<span class='ru-label'>" + this.get("text") + "</span>");
      buffer.push(
        "<span class='ru-progress' style='width:" +
          this.get("progress") +
          "%'></span>"
      );
    },

    click: function() {
      if (this.get("isUploading")) {
        this.resumable.cancel();
        var self = this;
        Em.run.later(function() {
          self._reset();
        });
        return false;
      } else {
        return true;
      }
    },

    _reset: function() {
      this.setProperties({ isUploading: false, progress: 0 });
    },

    _initialize: function() {
      this.resumable = new Resumable({
        target: Discourse.getURL(this.get("target")),
        maxFiles: 1, // only 1 file at a time
        headers: {
          "X-CSRF-Token": $("meta[name='csrf-token']").attr("content")
        }
      });

      var self = this;

      this.resumable.on("fileAdded", function() {
        // automatically upload the selected file
        self.resumable.upload();
        // mark as uploading
        Em.run.later(function() {
          self.set("isUploading", true);
        });
      });

      this.resumable.on("fileProgress", function(file) {
        // update progress
        Em.run.later(function() {
          self.set("progress", parseInt(file.progress() * 100, 10));
        });
      });

      this.resumable.on("fileSuccess", function(file) {
        Em.run.later(function() {
          // mark as not uploading anymore
          self._reset();
          // fire an event to allow the parent route to reload its model
          self.sendAction("success", file.fileName);
        });
      });

      this.resumable.on("fileError", function(file, message) {
        Em.run.later(function() {
          // mark as not uploading anymore
          self._reset();
          // fire an event to allow the parent route to display the error message
          self.sendAction("error", file.fileName, message);
        });
      });
    }.on("init"),

    _assignBrowse: function() {
      var self = this;
      Em.run.schedule("afterRender", function() {
        self.resumable.assignBrowse(self.$());
      });
    }.on("didInsertElement"),

    _teardown: function() {
      if (this.resumable) {
        this.resumable.cancel();
        this.resumable = null;
      }
    }.on("willDestroyElement")
  })
);