Backbone. Form with file upload, how to handle?

Question

I want to organize the workflow only through the REST API. I have a form that allows to upload image (enctype="multipart/form-data"). How do I handle this form via backbone? Help me please, how I can to serialize it into JSON with a file field.

Thanks. Vitaliy

Answer 1

If you are using HTML5, you can use the readAsDataURL method from the file api to read and store it on your models.

Here's the code i use to read and store.

var Image = Backbone.Model.extend({

    readFile: function(file) {
        var reader = new FileReader();
        // closure to capture the file information.
        reader.onload = (function(theFile,that) {
            return function(e) {
                //set model
                that.set({filename: theFile.name, data: e.target.result});

            };
        })(file,this);

        // Read in the image file as a data URL.
        reader.readAsDataURL(file);
    }   
});

Answer 2

You could try the jquery.iframe.transport plugin.

Answer 3

IMHO, you cannot serialize a file into JSON. If you need to send some data along with the file you can send them as query params with POST method.

www.example.com/upload?param1=value1&param2=value2

Answer 4

There's no good way to submit a file via AJAX. So I wrote a function to fake it--it inserts a secret iframe into your DOM that is never visible but still works as a target to submit your form on, and it installs a function for your response to call that cleans house when the file is uploaded.

Have your upload form's submit button fire this function I wrote. It uses jQuery because it's easy and nice, but in principle that shouldn't be strictly necessary:

function backgroundUpload(form, container) {
    $(container).append('<iframe name="targetFrame" id="targetFrame" style="display: none; height: 0px; width:0px;" ></iframe>');
    $(form).attr('target', 'targetFrame');

    window.backgroundUploadComplete = function() {
        //clear your form:
        $(form).find(':file').val('');
        $(form).find(':text').val('');

        //do whatever you do to reload your screenful of data (I'm in Backbone.js, so:)
        window.Docs.fetch().complete( function() { populateDocs(); });

        //get rid of the target iframe
        $('#targetFrame').remove();
    };
    $(form).submit();
}

Then have your form handler that does your file parsing and saving return the string:

<script>window.parent.backgroundUploadComplete();</script>

Your form can look like:

<form id="uploadForm" method="POST" action="/your/form/processor/url" enctype="multipart/form-data">
<input type="file" name="file"/>
<!-- and other fields as needed -->
<input type="button" onClick="backgroundUpload(this.form, $('#documents'));" value="Upload" />
</form>

(#documents is the div that this form lives in. Could probably be any DOM element, it just needs a home.)