Saving and listing uploaded files?

Ember Data
1

At the moment, I have this code to upload files to my website, although I have no function to save the files.

    <div class="row fileExtension">
      <div class="col-md-6">
        <input type="file" name="file" accept="file_extension" style="float: left">
      </div>
      <div class="col-md-6">
        <input type="submit" style="float: right;">
      </div>
    </div>

I’d like to both save and list the uploaded files using EmberJs, any tips? I have no idea where to start.

2

Ember is a clientside framework, so it only runs in the user’s browser. Not on your server. So it cannot receive the file upload.

You could definitely put the above code into an ember component that displays a nice UI for the upload, and that knows how to post the file to your server and show helpful feedback. But you would still need some server to post to. Or you can use a service like https://www.filepicker.com/.

3

I did a talk on bulk uploading files in a very “HTML5 way”. And I made a repo and demo too. It maybe be of some help.

Talk: March Embernati - Wesley Workman on async file uploads in Ember.js - YouTube

Repo: GitHub - workmanw/embernati-upload-demo

Demo: Embernati Upload Demo

That demo just assumes files are drag and drop from the desktop.

4

That’s not entirely correct. Regular file uploads, yes those go directly to a server. But you may want that data in the Ember app before uploading (or storing it in e.g. localstorage), and you can use the drag and drop features of HTML5 for that together with Ember.

I have a work in progress (may or may not complete it) which takes an MSI Afterburner log file, processes it client side and inserts it into a Firebase database in a optimised and compressed format to be shared with others … which I can then easily create graphs from.