How use Jquery-file-upload with backbone.js & require.js

Question

I have an backbone.js application who work with require.js and i want implement this following jquery plugin: https://github.com/blueimp/jQuery-File-Upload

I have following this processus: https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

If anybody can send me an example of backbone app work with this plugin or can help me with other recommandations.

Before you can read my code:

Require.js config :

    require.config({
    paths: {
        'jquery'                  : 'common/vendors/jquery_2.1.0',
        'underscore'              : 'common/vendors/underscore_1.6.0',
        'backbone'                : 'common/vendors/backbone_1.1.2',
        'layoutmanager'           : 'common/vendors/backbone.layoutmanager_0.9.5',
        'jquery.iframe-transport' : 'common/vendors/jquery.iframe.transport_1.0',
        'jquery.ui.widget'        : 'common/vendors/jquery.ui.widget_1.10.4',
        'jquery.fileupload.ui'    : 'common/vendors/jquery_fileupload/jquery.fileupload.ui_9.6.0',
        'jquery.fileupload'       : 'common/vendors/jquery_fileupload/jquery.fileupload_5.40.3'
    },
    shim: {
        'jquery': {
            exports: '$'
        },
        'underscore': {
            exports: '_'
        },
        'backbone' : {
            deps: ["jquery", "underscore"],
            exports: "Backbone"
        },
        'layoutmanager' : {
            deps: ["backbone"]
        }
    }
});

My Backbone View :

var define, selector, console;

define([
    'jquery',
    'underscore',
    'backbone',
    'layoutmanager',
    '../../../../common/models/global/model_picture',
    'jquery.ui.widget',
    'jquery.iframe-transport',
    'jquery.fileupload'
],
    function (
        $,
        _,
        Backbone,
        LayoutManager,
        PictureModel
    ) {

        "use strict";

        return Backbone.Layout.extend({
            __class__ : "adPostPictureRow",

            initialize: function () {
                this.template = _.template($('#adpost_picture_row_template').html());
            },

            events: {
                "change .adpost_picture_input_file" : "handleImageUpload"
            },

            handleImageUpload: function () {
                selector = this.$('.adpost_picture_input_file')[0];
                this.uploadProgress = 0;
                this.model = new PictureModel({ files : selector.files[0] });

                var test = $('#adpost_picture_fileupload', this.el).fileupload({
                    dataType: 'json',
                    autoUpload: true,
                    singleFileUploads: true,
                    url: '../upload/adpost/img',

                    done: function (data) {
                        console.log('upload done');
                        _.each(data.result, function (index, file) {
                            console.log(file.name);
                        });
                    },

                    add: function () {
                        // How can access to this function for see the console.log result
                        console.log('test upload ');
                    }
                });

                console.log(test);
            }
        });
    });

Thanks

rcarvalho · Accepted Answer · 2014-08-06 14:28:16Z

2

I'm using this plugin in my backbone Apps.

It works for me using the Jquery plugin inside my render method. Here a sample of my code.

Html File.

<form id="Anything" action="the api url" method='post' encrtype="multipart/form-data">
<input type='file'/ accept='.txt'>
</form>

Backbone View

render: function(){
  this.$el.html(this.template);
  $("#Anything").fileupload({
      dataType:'json',
      add : this.AddFile,
      fail: this.AddFileFail

});


AddFile : function(data){
  return data.submit();
}

}

answered Aug 6, 2014 at 14:28

rcarvalho

7901 gold badge4 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DamienL Over a year ago

Thanks i have found a start for my solution, it's a problem with my events.

scapegoat17 Over a year ago

@DamienL - Did you ever find the solution to this? I am having a similar issue

DamienL Over a year ago

I don't have the solution now, i work in other company. But the answer of rcarvalho should help you, his answer have help me to found a solution.

Collectives™ on Stack Overflow

How use Jquery-file-upload with backbone.js & require.js

Require.js config :

My Backbone View :

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Require.js config :

My Backbone View :

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related