Ember-data how to bind a file upload to model

Question

There are bunch of answer on how to jQuery upload. That's not what I want. I want to simply bind the "file" input so that it's send with my object when I submit the form.

App.Document = DS.Model.extend({
    document_name: DS.attr(),
    document_file: DS.attr()
});

<form role="form" {{action save on="submit"}}>
    <div class="thumbnail" {{action 'start'}}>
        <img {{bindAttr src=src}} class="preview"/>
        <img class="shadow hide"/>
        <canvas class="hide"></canvas>
    </div>

   {{input type="file" valueBinding="document_file" name="document_file" }}

   {{input type="text" valueBinding="document_name" name="document_name"}}

    <div>
        <button class="btn btn-primary" {{action 'save'}}>Save</button>
    </div>
</form>

I haven't found a single tutorial on simple upload. It can't be too hard to send a file right?

score 1 · Accepted Answer · edited May 23 '17 at 12:15

1

It is actually pretty simple to do it althougt it is not functionality out of the box. See my question here with working example: Ember.js value binding with HTML5 file upload

edited May 23 '17 at 12:15

Community

1
1

answered Dec 07 '13 at 17:42

DelphiLynx

911
1
16
41

It's kind of working. I see the data being bind as a huge string to my model. But when I submit my form, my backend see nothing in the $_FILES super variable. How am I suppose to move it if I can't see the temp name? Do I need to manually create the file? – Michael Villeneuve Dec 09 '13 at 03:42
@DelphilLynx Another thing that is very annoying is that it doesn't seem to be cross browser compatible. It works on Chrome, however if you open firebug in firefox, you will see that the "image" is null. Any idea on that? – Michael Villeneuve Dec 09 '13 at 04:18
@MichaelVilleneuve You are programming in PHP? Yea it is tricky to get the files. You need to do it this way: `file_get_contents('php://input')`. To test it, send the data immediately back with: die(file_get_contents('php://input')). You should see in your data back. – DelphiLynx Dec 09 '13 at 08:13
@MichaelVilleneuve it is indeed not cross browser compatible. But I see the error immediately in Firefox: `TypeError: e.srcElement is undefined`. We need to dive deeper on this. Edit: Haha, one search on Google: http://stackoverflow.com/questions/13602039/e-srcelement-is-undefined-in-firefox Good luck! – DelphiLynx Dec 09 '13 at 08:23
@MichaelVilleneuve I updated the code of the fileupload, it is cross browser compatible now: http://stackoverflow.com/questions/19909267/ember-js-value-binding-with-html5-file-upload/19910677#19910677 – DelphiLynx Dec 09 '13 at 08:31

score 0 · Answer 2 · answered Dec 06 '13 at 22:15

0

Ember Data doesn't support it out of the box, you'll need to override the adapter and implement your own version of the createRecord/updateRecord which modifies the ajax call. It's probably easier to just use jquery.

answered Dec 06 '13 at 22:15

Kingpin2k

47,277
10
78
96

It's hard to believe that they didn't think someone would like to implement a simple file upload?!!! Are you 100% sure that this is a fact and there is no way to bind a file input to a model?! – Michael Villeneuve Dec 06 '13 at 22:24
Why is it hard to believe? There are libraries that are built just for uploading files, it isn't an simple task. Uploading a file is quite different than inputting things like strings/numbers/booleans/dates (the included transforms). When you try and send the file it would need to be serialized, and are you going to send it as json or are you going to make a multipart call? This is why it isn't built in as the default. – Kingpin2k Dec 06 '13 at 23:55

Ember-data how to bind a file upload to model

2 Answers2