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

132 lines
3.4 KiB
JavaScript

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")
})
);