lundi 11 mai 2015

set model attribute from ember uploader S3 url?

I have got ember-uploader to upload files successfully to S3. When the image is done uploading, I would like to set the model property image_url to the returned URL, then preferably submit the form to create the record as well. How would I do that?

app/models/post.js:

import DS from 'ember-data';                                                                                                                                             

export default DS.Model.extend({                                                                                                                                         
  name: DS.attr('string'),                                                                                                                                               
  body: DS.attr('string'),                                                                                                                                               
  image_url: DS.attr('string')                                                                                                                                           
});         

app/templates/posts/new.hbs:

<div class="new-post-form">                                                                                                                                              
  {{input type="text" placeholder="Name" value=name}}                                                                                                                    
  {{input type="text" placeholder="Message" value=body}}                                                                                                                 
  {{s3-upload value=image_url}}                                                                                                                                          
  <button {{action 'addPost'}} class="submit">Submit</button>                                                                                                            
</div>       

app/components/s3-upload.js:

import Ember from 'ember';                                                                                                                                               
import EmberUploader from 'ember-uploader';                                                                                                                              

export default EmberUploader.FileField.extend({                                                                                                                          
  url: 'http://localhost:3000/sign',                                                                                                                                     

  filesDidChange: (function() {                                                                                                                                          
    var uploadUrl = this.get('url');                                                                                                                                     
    var files = this.get('files');                                                                                                                                       

    var uploader = EmberUploader.S3Uploader.create({                                                                                                                     
      url: uploadUrl                                                                                                                                                     
    });                                                                                                                                                                  

    uploader.on('didUpload', function(response) {                                                                                                                        
      // S3 will return XML with url                                                                                                                                     
      var uploadedUrl = Ember.$(response).find('Location')[0].textContent;                                                                                               
      uploadedUrl = decodeURIComponent(uploadedUrl); // => http://ift.tt/1E1ODru                                                                   
      console.log("UPLOADED ! : " + uploadedUrl);                                                                                                                        
    });                                                                                                                                                                  
                                                                                                                                                                             if (!Ember.isEmpty(files)) {                                                                                                                                         
      uploader.upload(files[0]); // Uploader will send a sign request then upload to S3                                                                                      }                                                                                                                                                                    
  }).observes('files')                                                                                                                                                   
});  

As you can see I tried setting the value of my s3-uploader component to image_url, that didn't seem to do anything.




Aucun commentaire:

Enregistrer un commentaire