ember + rails. There is a need to upload files to the server. Found such an article http://blog.mattbeedle.name/posts/file-uploads-in-ember-data/ It turned out like this:

templates / posts / new.hbs:

<h2>post new</h2> <form > author: {{input value=model.author}} title: {{input value=model.title}} extended: {{input value=model.extended}} intro: {{input value=model.intro}} image: {{upload-file name="image" file="image"}} <button {{action "submit" model}} type="submit" class="btn btn-default">Create</button> </form>

templates / components / upload-file.coffee:

 EmberRails.UploadFileComponent = Ember.TextField.extend tagName: 'input' attributeBindings: ['name'] type: 'file' file: null change: (e) => reader = new FileReader() reader.onload = (e) => fileToUpload = e.target.result Ember.run => Ember.set(@, 'file', fileToUpload) console.log(Ember.get(@,'file')) reader.readAsDataURL(e.target.files[0])

routes / posts / new.js.coffee:

 EmberRails.PostsNewRoute = Ember.Route.extend({ model: -> @store.createRecord('post') })

controllers / posts.js.coffee:

 EmberRails.PostsNewController = Ember.Controller.extend actions: submit: -> post = @model post.save().then => @transitionToRoute 'post', post EmberRails.PostsController = Ember.Controller.extend actions: destroy:(post) -> post.destroyRecord().then => @transitionToRoute 'posts'

after the selection of the file But when creating a record, the image field is passed empty.

 Processing by PostsController#create as JSON Parameters: {"post"=>{"title"=>"11", "author"=>"11", "intro"=>"11", "extended"=>"11", "image"=>nil}}

apparently, in the upload-file incorrect line

 Ember.set(@, 'file', fileToUpload)

the question is what in this case @ and how to write this data into the model?

 info: Ember Inspector 1.9.5 Ember 2.3.1 Ember Data 2.3.3 jQuery 1.12.0

    1 answer 1

    Good day.

    You would write your data model and the route is appropriate, but in general, of course, you can guess.

    You have a component upload-file.coffee. The onChange event is triggered. As a result, the component file property is set to the readAsDataURL value of the file.

    In the template you write

     image: {{upload-file name="image" file="image"}}

    those. attach to the image, although in other places attach to the model. Apparently you need to write

     image: {{upload-file name="image" file=model.image}}