Backbone Marionette View and Template for file uploads using Plupload. Requires Plupload (http://www.plupload.com/).

example-usage.js

// 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();

file-upload.html

<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>

file-upload.js

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

Any chance of getting a UMD version ?