Reputation: 1728

AJAX Image upload with backbone.js node.js and express

So I have been trawling the net for a day now trying to find a complete example of how to upload an image along with a normal POST (create) request from a backbone model. So after some initial digging around I discovered the FileReader api in HTML5 - After some testing I had this working great outside backbone by creating a XMLHttpRequest()

The problem im now trying to solve is how can I make bacbone send the FILES data along with the POST request like you would experience in a normal multipart form work flow. Im pretty new to backbone so please forgive any obvious errors. Heres what I have so far.

model

define(                                                                                                                                                
    [                                                                                                                                                  
        'backbone'                                                                                                                                     
    ],                                                                                                                                                 

    function (Backbone) {                                                                                                                              
        var Mock = Backbone.Model.extend({                                                                                                             
            url: '/api/v1/mocks',                                                                                                                      
            idAttribute: '_id',                                                                                                                        

            readFile: function(file){                                                                                                                  
                var reader = new FileReader();                                                                                                         
                self = this;                                                                                                                           

                reader.onload = (function(mockFile){                                                                                                   
                    return function(e){                                                                                                                
                        self.set({filename: mockFile.name, data: e.target.result});                                                                    
                    };                                                                                                                                 
                })(file);                                                                                                                              

                reader.readAsDataURL(file);                                                                                                            
            }                                                                                                                                          
        });                                                                                                                                            

        return Mock;                                                                                                                                   
    }                                                                                                                                                  
);

view

define(
    [
        'jquery',
        'backbone',
        'underscore',
        'text!../templates/create_mock-template.html',
        'models/mock',
        'collections/mocks'
    ],

    function ($, Backbone, _, createMockTemplate, Mock, mocksCollection) {
        var CreateMockView = Backbone.View.extend({
            template: _.template(createMockTemplate),

            events: {
                'submit form': 'onFormSubmit',
                'click #upload-link': 'process',
                'change #upload': 'displayUploads'
            },

            initialize: function () {
                this.render();
                return this;
            },

            render: function () {
                this.$el.html(this.template);
            },

                        process: function(e){
                                var input = $('#upload');
                                if(input){
                                        input.click();
                                }
                                e.preventDefault();
                        },

                        displayUploads: function(e){
                                // Once a user selects some files the 'change' event is triggered (and this listener function is executed)
                                // We can access selected files via 'this.files' property object.

                                var formdata = new FormData();
                                var img, reader, file;
                                var self = this;

                                for (var i = 0, len = e.target.files.length; i < len; i++) {
                                        file = e.target.files[i];

                                        if (!!file.type.match(/image.*/)) {
                                                if (window.FileReader) {
                                                        reader = new FileReader();
                                                        reader.onloadend = function (e) { 
                                                                self.createImage(e.target.result, e);
                                                        };
                                                        self.file = file;
                                                        reader.readAsDataURL(file);
                                                }
                                        }   
                                }
                        },

                        createImage: function(source, fileobj) {
                                var image = '<img src="'+source+'" class="thumbnail" width="200" height="200" />'
                                this.$el.append(image);
                        },

            onFormSubmit: function (e) {
                e.preventDefault();

                // loop through form elements
                var fields = $(e.target).find('input[type=text], textarea');
                var data = {};

                // add names and vlaues to data object
                $(fields).each(function(i, f) {
                    data[$(f).attr('name')] = $(f).attr('value');
                }); 

                // create new model from data
                var mock = new Mock(data);

                // this should set the filename and data attributes on the model???
                mock.readFile(this.file);

                // save to the server
                mock.save(null, {
                    wait: true,
                    error: function(model, response) {
                        console.log(model)
                    },
                    success: function(model, response) {
                        mocksCollection.add(model);
                        console.log(model, response);
                    }
                });
            },
        });

        return CreateMockView;
    }
);

I totally appreciate this may all be a bit hand wavey, its more a proof of concept than anything else and a good chance to learn backbone too. So the crux of my question is this

When the request is sent by backbone to the api why arent I seeing the data and filename attrs in the request to the node/express server
Is what im trying to do even possible, I basically thought i'd be able to read the data attr and create and image on the server?
Is there a way to perhaps overide the sync method on the Mock model and create a properly formed request where POST and FILES are correctly set.

Im sure this is possible but I just cant seem to find the bit of info I need to plough on and get this working.!

Hope someone can help!

CHEERS

edit

Just wanted to provide a bit more info as by my understanding and some brief chats on the document cloud irc channel this should work. So when I call

mock.readFile(this.file)

the fileName and data attributes dont seem to get set. In fact a console log here dosent even seem to fire so im guessing this could be the problem. I would be happy with this approach to basically build up the Image on the node end based on the value of data and fileName. So why arent these properties being set and passed along in the post request to the api?

Upvotes: 4

AJAX Image upload with backbone.js node.js and express

model

view

edit

Answers (2)

Related Questions