multipart form save as attributes in backbonejs

Question

Can any body give example to save the multipart form by using backbone js model?

How to combine the form data with file data and save to model

I am setting the model attributes and how to include the file data in the attributes. I adapted the code from one of the site to Forc Backbone to save an attribute as a file. I could not relate it to my form

<form enctype="multipart/form-data">
  <input type="file" name="ImageData">
  <input type="text" name="UserName">
</form>

Model

User = Backbone.Model.extend({
  readAvatar : function (file, callback) {
    var reader = new FileReader(); // File API object for reading a file locally
    reader.onload = (function (theFile, self) {
      return function (e) {
        // Set the file data correctly on the Backbone model
        self.set({avatar_file_name : theFile.name, avatar_data : fileEvent.target.result});
        // Handle anything else you want to do after parsing the file and setting up the model.
        callback();
     };
    })(file, this);
    reader.readAsDataURL(file); // Reads file into memory Base64 encoded
  }
    attribute : function(attr) {
      return Object.defineProperty(this.prototype, attr, {
        get: function() {
          return this.get(attr);
        },
        set: function(value) {
          var attrs;

          attrs = {};
          attrs[attr] = value;
          return this.set(attrs);
        }
      });
    };
});


   var form_data = form.serializeArray();

View

    this.model.data =  form_data;
var profiledata;        
if (window.FormData) {  
        profiledata = new FormData(); 
        console.log(profiledata);   
}

if (profiledata) {  
    jQuery.each($('#ImageData')[0].files, function(i, file) {
        //reader.readAsDataURL(file);  
        profiledata.append("ImageData[]", file);

    });     
}   
    this.model.ImageData = profiledata;

    //and save the data
    this.model.save

Answer 1

Rather than handling the FileReader logic in the model, I've been managing that in the view.

Check this out:

<form enctype="multipart/form-data">
  <input type="file" name="ImageData">
  <input type="text" name="UserName">
  <button>Submit</button>
</form>

View:

var FormView = Backbone.View.extend({
  events: {
    "submit form" : "submit",
    "change input[type=file]" : "encodeFile"
  },

  render: function () {
    var content = this.template(); 
    this.$el.html(content);
    return this;
  },

  encodeFile: function (event) {
    var file = event.currentTarget.files[0];
    var reader = new FileReader();
    reader.onload = function (fileEvent) {
      this.model.set({ 
        avatar_data: fileEvent.target.result // file name is part of the data
      });
    }.bind(this)
    reader.onerror = function () {
      console.log("error", arguments)
    }
    reader.readAsDataURL(file);
  },

  submit: function (event) {
    event.preventDefault();
    this.model.set({ UserName: $('input[name=UserName]').val() });
    this.model.save();
  }
});