Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Backbone Marionette View and Template for file uploads using Plupload. Requires Plupload (http://www.plupload.com/).
// Add this to the onRender() of the view you want to add your file upload to
// The options passed in will override the default Plupload options
// (http://www.plupload.com/documentation.php)
this.fileUploadView = new FileUploadView({
el: '#upload-container',
url: 'upload.php',
successMessage: 'Your file uploaded successfully.'
});
this.fileUploadView.render();
<div class="message"></div>
<div id="filelist"></div>
<div class="progress progress-striped active">
<div class="bar" style="width: 0%;"></div>
</div>
<button id="file-select" class="btn btn-primary">Select File</button>
<button id="file-upload" class="btn btn-primary">Upload</button>
define(function (require) {
var Marionette = require('backbone.marionette')
, _ = require('underscore')
, Plupload = require('plupload')
, handlebars = require('handlebars');
// Include the file-upload.html
var uploadTpl = require('hbs!file-upload');
return Marionette.ItemView.extend({
className: "file-uploader",
template: uploadTpl,
uploader: null,
options: {},
successMessage: 'File uploaded successfully',
ui: {
message: '.message',
fileList: '#filelist',
browseButton: '#file-select',
uploadButton: '#file-upload',
progressContainer: '.progress',
progressBar: '.progress .bar'
},
events: {
'click #file-upload': 'startUpload'
},
initialize: function(options) {
if(options) {
this.options = options;
this.successMessage = options.successMessage || this.successMessage;
}
},
onRender: function() {
this.ui.progressContainer.hide();
var defaults = {
runtimes : 'gears,html5,flash,silverlight,browserplus',
browse_button : this.ui.browseButton.get(0),
container : this.el,
multi_selection: false,
max_file_size : '10mb',
filters : [
{title : "CSV files", extensions : "csv"}
],
resize : {width : 320, height : 240, quality : 90}
};
this.uploader = new Plupload.Uploader(_.defaults(this.options, defaults));
this.uploader.init();
this.uploader.bind('FilesAdded', _.bind(this.filesAdded, this));
this.uploader.bind('UploadProgress', _.bind(this.uploadProgress, this));
this.uploader.bind('FileUploaded', _.bind(this.fileUploaded, this));
this.uploader.bind('Error', _.bind(this.handleUploadErrors, this));
},
startUpload: function(e) {
e.preventDefault();
this.uploader.start();
this.ui.progressContainer.show();
},
filesAdded: function(up, files) {
var html = "";
$.each(files, function(i, file) {
html += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' + '</div>';
});
this.ui.message.html('<div class="alert alert-info">' + html + '</div>');
up.refresh(); // Reposition Flash/Silverlight
},
uploadProgress: function(up, file) {
this.ui.progressBar.width(file.percent + '%');
},
fileUploaded: function(up, file) {
this.ui.progressBar.addClass('bar-success');
this.ui.progressBar.parent().removeClass('active');
this.ui.message.html('<div class="alert alert-success">' + this.successMessage + '</div>');
},
handleUploadErrors: function(up, err) {
this.ui.message.html('<div class="alert alert-error">An error occured: ' + err.message + " for " + (err.file ? ", File: " + err.file.name : "") + '</div>');
}
});
});
@antoniobrandao

This comment has been minimized.

Copy link

@antoniobrandao antoniobrandao commented Jan 6, 2016

Any chance of getting a UMD version ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment