homeslicesolutions-zz/backbone-model-file-upload

A non-iframe, pure XHR2 Backbone.model.save file upload

backbone-model-file-upload's Issues

Ignores which attributes are passed in

As written, the formData if block uses this.attributes, instead of our passed in attr object.

Which means I can't use patch or limited attribute sets.

Tag the v1.0.0

Hi, you have a commit that says "version 1.0.0". Can you tag this release to avoid this?

"backbone-model-file-upload": "*",

FormData is not available in IE9

Hello @homeslicesolutions , it seems that the plugin is not working in IE9 at all because of FormData
Please take a look at the following line: https://github.com/homeslicesolutions/backbone-model-file-upload/blob/master/backbone-model-file-upload.js#L74

not send as multipart/form-data. Instead send as json object or nothing

I`ve tried your plugin with latest versions of backbone (v 1.1.2) and underscore. And it was very sad that after all that I do with step-by-step guide not send any data to server as FormData. If I set options to formData: true it send nothing.

this is my model
App.module('Resources.Isir.Models', function (Mod, App, Backbone, Marionette, $, _) {
Mod.IsirNpa = Backbone.Model.extend({
urlRoot: '/api/IsirNpa',
idAttribute: 'Id',
defaults: {
Id: null,
Name: null,
File: null,
FileId: null,
fileAttribute: 'attachment',
},
});
});

and that is my code for save
var fileObject = $('.c-upload-input')[0].files[0];
model.set('attachment', fileObject);
model.save(null, {
formData: true,
success: function(response) {
}
});

if i remove formData: true it sends this as json

In debug I see that code sets formData and call backbone.save but I don`t know why request is not send

'Maximum callstack exceeded' when saving with nested attributes

I'm having an issue similar to a previous issue posted, #2.

I'm using backbone nested attributes, https://github.com/dtmtec/backbone-nested-attributes, to save my backbone models correctly with my rails backend. The problem is that when I try and save a photo on a model with any relationships, it gives me the error 'maximum callstack exceeded'.

I did get the photo saving to work if I disabled a part of the flatten function, but it broke the nested part of my code. Any ideas?

Here's how I changed the flatten function.

  _flatten: function( obj ) {
      var output = {};
      for (var i in obj) {
        if (!obj.hasOwnProperty(i)) continue;
        // I commented this out and made it false instead
        // it at least makes the photo uploading work.
        //if (typeof obj[i] == 'object') {
        if (false) {
          var flatObject = this._flatten(obj[i]);
          for (var x in flatObject) {
            if (!flatObject.hasOwnProperty(x)) continue;
            output[i + '.' + x] = flatObject[x];
          }
        } else {
          output[i] = obj[i];
        }
      }
      return output;

how to multi-file upload?

fileAttribute: 'file' or fileAttribute: ['file1', 'file2', 'file3']
??

Update the version

When using this plugin I noticed phantomjs started being installed on my production deploys. Looking further I found the phantomjs amongst the grunt-contrib-jasmine dependency. It looks like when installing with npm version 1.0.0 it grabs SHA 53b98cd where the dev dependencies are in the the dependencies. I think updating the version # will probably fix this.

i want use idAttribute at backbone model.js

im not used idAttribute

im use fileAttribute because of backbone model file upload .js

but why not use setting idAttribute ???

Saving model with null instead of {} or passing in attrs

We have a fair few instances where we update a model with a set and then do a

@model.save(null, .....)

I imagine ideally we should be using an empty object {} rather than null but to support this would you consider adding a && attrs != null to the formdata flag check https://github.com/homeslicesolutions/backbone-model-file-upload/blob/master/backbone-model-file-upload.js#L60

Node qs body parse convention

For people who are experience problems with body parsing arrays for example, this library uses a different convention for dealing with arrays. arrayProperty.index.property which is not accepted by body-parser library for nodejs + express.

The common format is to cover them with square braces such as arrayProperty[index][property]. In order to do that I had to change line 128:

• old version: output[i + '.' + x] = flatObject[x];
• new version: output['[' + i + '][' + x + ']'] = flatObject[x];

I didn't submit a pull request because I don't know whether this is particular for people who works with nodejs and express body parser.

All file object attributes being sent along with actual xhr

Hey, I've done a pretty minimal setup, with a single file attached to a model instance. It seems like there's a little bit of overhead going on in the upload xhr. Due to the flattening of attributes, I seem to end up with something like this being sent to the rails server.
The #<ActionDispatch::Http> stuff is just rails interpreting the raw bytes as a file (the bit that I want):

img.webkitRelativePath: "" 
img.lastModified: "1417019673000"
img.name: "Screenshot from 2014-11-26 16:34:33.png"
img.type: "image/png"
img.size: "33715"

img: #<ActionDispatch::Http::UploadedFile:0x007ffd68d50918 @tempfile=#<Tempfile:/tmp/RackMultipart20141212-8277-1uyxe66>, @original_filename="Screenshot from 2014-11-26 16:34:33.png", @content_type="image/png", @headers="Content-Disposition: form-data; name=\"img\"; filename=\"Screenshot from 2014-11-26 16:34:33.png\"\r\nContent-Type: image/png\r\n">

The other attributes I'm just throwing away. I'll have a dig in and see if I can patch it up for my use case to not send file attributes, but was wondering if you want those attributes being sent or if it's just a side effect of accounting for nested objects in other attributes of the backbone model.

Cheers for a lovely plugin btw, perfect for my current use case.

Uncaught TypeError: Illegal invocation only on Webkit

I am trying to execute this:

<div class="form-group">
    <label>Photo:</label>
    <input id="photo" name="photo" type="file">
</div>

$('#submitButton').click(function () {
    var fileObject = $(':input[type="file"]')[0].files[0];
    var Email = Backbone.Model.extend({url: 'http://localhost:8989', fileAttribute: 'attachment'});
    var email = new Email();

    email.set('from', '[email protected]');
    email.set('to', '[email protected]');
    email.set('subject', 'Greetings!');
    email.set('body', 'Just wanted to say hello. Yours truly');
    email.set('attachment', fileObject);
    email.save();
    email.on('progress', console.log);
});

But I am getting this error:

Uncaught TypeError: Illegal invocation backbone.js:369
triggerEvents @ backbone.js:369
triggerApi @ backbone.js:356
eventsApi @ backbone.js:155
Events.trigger @ backbone.js:346
_progressHandler @ backbone.model.file.upload.js:168

I am using:

• Windows 8.1 64 bit
• Chrome 51.0.2704.106 m (64-bit) / Opera 38.0.2220.31
• jQuery 1.12.4
• Underscore 1.8.3
• Backbone 1.3.3
• Backbone.Model File Upload 1.0.0
• Marionette 2.4.7

Any idea? Thanks.

how can i use update method ???

i want use put mehod in update request

but now i always use post method

i want multiple post upload

i want muliple post upload in codeigniter

but i can't multiple uplaod empty array data

Release to NPM

Hi Joe,
could you possibly upload this module to npm? I am currently working on a Browserify project and would really like to be able to use most of the JS libs directly from my node_modules folder, instead of manually downloading files from GitHub.

Backbone itself is also on NPM.

PUT method doesnt send file to server

Hello!

Just found small problem with file upload and existing model updates, which is sent with PUT request.

Looks like FormData with files need to passed with POST method only, PUT will send only filename and not the file body :( And according to SO discussions its a browsers (or standarts) limitation.
Forcing m.save(null, {method: 'POST'}) will send all data, just need to check model id on server to distinguish create/update.

Hope this will help somebody in future :)

Save with nested collections

Thanks for this awesome plugin. I ran into an issue trying to use this plugin to save a model with a nested collection as one of it's parameters. For example, I have a Document model, which has a "products" parameter. The products parameter is a collection of Product models.

Normally, I would exclude the products parameter from the save method because when I don't, I receive error message that the maximum call stack size was exceeded.

I exclude the parameters by doing something like this:

this.model.save(this.model.pick(_.difference(this.model.keys(), ['products'])),{formData:true, patch:true})

However, it doesn't appear that the save function for this plugin is using the attributes I am passing in. Instead, it's using all of the attributes on the model, which includes "products". This is resulting in the call stack size being exceeded because of the regression of the _.flatten method.

Is there any way to ensure the save function only saves the desired attributes?

Recursive _flatten

If a model references itself, the _flatten() function goes recursive on save.

Ideally, _flatten() should check for instance of self, and ignore it.

Defferent Request content when Send from Collection.create and normal form

Hi me again,
I found the problem may still is this module...
because I used a simple form to upload file without backbone model and used multer to process in backend, and it worked fine.

so I look deeper in the request I send from backbone model save( I use collection.create ) and the request send from normal form, here is what I got:

normal form:

backbone model:

It is apparent that the Request payload is a mess in backbone model, right?
why are there two Content-disposition ? and with the wrong name, the name should be the input's name, like <input name="should be this value" ...>

Can anyone know what's going on?

I'm not sure if I looking up in the right place, please tell me if I wrong and I appreciated your help.

Thank you.

[Help] Please, add a sample for beginners

Hi there.

I'm trying to use this plugin with a PHP RESTful API without success (even the test server does not work :( ).

Could you add a working example? It would be great.

Thanks.