multipart form save as attributes in backbonejs - forms

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