Communication between components in Ember

Question

I have a template with two components, a file upload component, and a progress bar to show the upload progress.

{{file-upload}}
{{ember-progress-bar progress=progress}}

And am using ember-uploader. I'm trying to set the progress of the progress bar like so:

uploader.on('progress', e => {
    // send progress to other component
});

I've read that you should use actions to communicate between components, but I only have access to that progress value within the filesDidChange function in the upload component, so I don't think I can send it in an action. What is the best way to send this progress value into the progress bar component?

Answer 1

This is where I use contextual components to enable inter-component communication for components that do not have parent-child relation (one does not render the other within its template).

Please take a look at the following twiddle I have prepared for you to illustrate what I mean. I have created mock ember-progress-bar and file-upload components. Instead of the filesDidChange function of course I used click function for the mock file-upload component and I decided to send screenX and screenY values to the mouse click event to ember-progress-bar component as the progress.

ember-progress-bar is used as a contextual component within application.hbs ; where ember-progress-bar yields the progressUpdated action with {{yield (hash progressUpdated=(action 'progressUpdated'))}} inside its template. Within application.hbs (where ember-progress-bar is used in block form); this yielded action is retrieved and passed as the onclick action to the file-upload component.

I do not know if this will help you at all; but this is the technique I heavily use for inter-component communication. I rely on actions yet again thanks to the contextual components (yielding from component and using the component in block form where it is going to be used).