CODEWITHSUNDEEP
ember.js
Mayhem
Mayhem

Reputation: 19

Pass variable from callback function in component to template

I've uploaded a file with ember-cli-dropzone (https://www.npmjs.com/package/ember-cli-dropzonejs). This works fine. Now i need to update my template with the filename.

Inside a component I have the filename in a callback function. But now i need to pass this to the routes setupController function. So i can use the controller.set, as shown below.

The component JS:

export default Ember.Component.extend({
  actions: {
   submit: function(){
     this.sendAction('action', this.submission);
   }
 },
 uploadSuccess: function(file, response) {
   if (response == '200') {
    return file.name;
   }
 }
});

setupController inside the route:

setupController: function(controller, model){
    var submission = this.store.createRecord('submission', { filter: { assignment_id: model.id } });

    submission.filename = filenamePlease; 
    controller.set('submission', submission);

}

compenent inside template:

{{submission-form submission=submission user=user action='createSubmission'}}

component HBS:

<form {{action 'submit' on='submit'}}>
  {{drop-zone url='http://localhost:4200/api/uploads' success=uploadSuccess}}
  {{input type="hidden" value=submission.filename}}
  <button class="bnt" type="submit">{{buttonLabel}}</button>
</form>

How do i get the corresponding template to update after the file has uploaded and uploadSuccess has returned the filename?

Upvotes: 0

Views: 1246

Answers (1)

Daniel
Daniel

Reputation: 18682

In component JavaScript file:

uploadSuccess(file, response) {
    if (response == '200') {
        this.sendAction('uploadAction', file.name);
    }
}

Component declaration in template:

{{submission-form
    submission=submission
    user=user
    action='createSubmission'
    uploadAction='uploadSuccess'
}}

Action in controller (not in route):

actions: {
    uploadSuccess(name) {
        // you have got your filename as `name` here
        this.set('submission.filename', name);
    }
}

You said you have wrong context in uploadSuccess. You can try:

uploadSuccess: Ember.run(this, function(file, response) {
    if (response == '200') {
        this.sendAction('uploadAction', file.name);
    }
})

Upvotes: 0

Related Questions