function FileUpload(app) { this.app = app; this.files = []; this.currentFile = 0; } FileUpload.prototype.listen = function() { var dropzone = document.getElementById("file-dropzone"); var self = this; if (dropzone) { dropzone.ondragover = dropzone.ondragenter = function(e) { e.stopPropagation(); e.preventDefault(); } dropzone.ondrop = function(e) { e.stopPropagation(); e.preventDefault(); self.files = e.dataTransfer.files; self.show(); $("#file-error-max-size").hide(); } $(document).on("click", "#file-browser", function(e) { e.preventDefault(); $("#file-form-element").get(0).click(); }); $(document).on("click", "#file-upload-button", function(e) { e.preventDefault(); self.currentFile = 0; self.checkFiles(); }); $("#file-form-element").change(function() { self.files = document.getElementById("file-form-element").files; self.show(); $("#file-error-max-size").hide(); }); } }; FileUpload.prototype.show = function() { $("#file-list").remove(); if (this.files.length > 0) { $("#file-upload-button").prop("disabled", false); $("#file-dropzone-inner").hide(); var ul = jQuery("<ul>", {"id": "file-list"}); for (var i = 0; i < this.files.length; i++) { var percentage = jQuery("<span>", {"id": "file-percentage-" + i}).append("(0%)"); var progress = jQuery("<progress>", {"id": "file-progress-" + i, "value": 0}); var li = jQuery("<li>", {"id": "file-label-" + i}) .append(progress) .append(" ") .append(this.files[i].name) .append(" ") .append(percentage); ul.append(li); } $("#file-dropzone").append(ul); } else { $("#file-dropzone-inner").show(); } }; FileUpload.prototype.checkFiles = function() { var max = parseInt($("#file-dropzone").data("max-size")); for (var i = 0; i < this.files.length; i++) { if (this.files[i].size > max) { $("#file-error-max-size").show(); $("#file-label-" + i).addClass("file-error"); $("#file-upload-button").prop("disabled", true); return; } } this.uploadFiles(); }; FileUpload.prototype.uploadFiles = function() { if (this.files.length > 0) { this.uploadFile(this.files[this.currentFile]); } }; FileUpload.prototype.uploadFile = function(file) { var dropzone = document.getElementById("file-dropzone"); var url = dropzone.dataset.url; var xhr = new XMLHttpRequest(); var fd = new FormData(); xhr.upload.addEventListener("progress", this.updateProgress.bind(this)); xhr.upload.addEventListener("load", this.transferComplete.bind(this)); xhr.open("POST", url, true); fd.append('files[]', file); xhr.send(fd); }; FileUpload.prototype.updateProgress = function(e) { if (e.lengthComputable) { $("#file-progress-" + this.currentFile).val(e.loaded / e.total); $("#file-percentage-" + this.currentFile).text('(' + Math.floor((e.loaded / e.total) * 100) + '%)'); } }; FileUpload.prototype.transferComplete = function() { this.currentFile++; if (this.currentFile < this.files.length) { this.uploadFile(this.files[this.currentFile]); } else { $("#file-upload-button").prop("disabled", true); $("#file-upload-button").parent().hide(); $("#file-done").show(); } };