How: File Upload with ember.js

Question

I was wondering how to do a real file upload (save file to server) with ember.js

Are there any good examples?

A simpler way to do this would be to use [ember-uploader](https://github.com/benefitcloud/ember-uploader) — Dimitri, Jul 15 '14 at 12:49
Found this interesting piece of code discussed in Ember NYC May 2015 meetup. https://github.com/tim-evans/ember-nyc-may-2015 Youtube video: https://youtu.be/sZs-VXWIDh0 Hope this too helps. — phkavitha, Jun 25 '15 at 03:00

score 5 · Answer 1 · edited May 23 '17 at 12:25

See my answer from another thread

<input
  multiple="true"
  onchange={{action "upload"}}
  accept="image/png,image/jpeg,application/pdf"
  type="file"
/>

actions: {
  upload: function(event) {
    const reader = new FileReader();
    const file = event.target.files[0];
    let imageData;

    // Note: reading file is async
    reader.onload = () => {
      imageData = reader.result;
      this.set(data.image', imageData);

      // additional logics as you wish
    };

    if (file) {
      reader.readAsDataURL(file);
    }
  }
}

It just works.

score 2 · Answer 2 · edited May 23 '17 at 12:02

If you read the answers in the link below, you will understand how to do file upload and save to server with emberjs:

File upload with Ember data

In the answer provided by 'Toran Billups' in the link above, the lines below, which I copied from his answer, do the saving to server:

var person = PersonApp.Person.createRecord({username: 'heyo', attachment: fileToUpload});

self.get('controller.target').get('store').commit()

How: File Upload with ember.js

2 Answers2

Linked