Multiple dynamic uploaders

[mschinis]

Hello,

First of all, super big thank you for the awesome ember addon!
I ran into a problem creating dynamic instances of uploaders. I'll get to the problem and solution in just a minute, but let me go through an example of why you might need this first.

I have a challenge, and each challenge can have multiple submissions (up to 4) by the same user. I also give the option to each user to replace their submission. So in the challenge page I have the following uploaders.

• 1. Upload a new submission
• 2-5. Replace a current submission

= Total: 1-5 upload components, depending on the current number of submissions

As you can imagine, uploaders 2-5, are created dynamically, using something like the following:

{{#each user_submissions as |submission|}}
          <h5>{{submission.name}}</h5>
          <p>
            {{#pl-uploader for="replace-submission-{{submission.id}}" name="replace-submission-{{submission.id}}" extensions='jpg jpeg png gif' onfileadd=(action replace submission) as |queue dropzone|}}
            <div class="dropzone" id={{dropzone.id}}>
              <a id="replace-submission-{{submission.id}}">Replace Submission</a>
            </div>
            {{/pl-uploader}}
          </p>
        </div>
    {{/each}}

htmlbars, properly creates the browse_button id, and generates something like: replace-submission-10 and so on.

The problem is, by running the above, you get a DOMException error 8, meaning that the browse_button wasn't found. (see screenshot below)

Upon closer inspection, the following (interesting) bug popped up.

Interestingly enough, looks like moxie is provided with the full, un-htmlbars-parsed string (lol, is that even a word?). (name parameter seems to be parsed properly btw)

With that in mind, it was fairly easy to get around this, by creating the following helper, which takes in a series of strings/variables, concatenates them and returns the full string to be used:

import Ember from 'ember';
export function strConcat(params) {
  let str = '';
  for(let i=0;i<params.length;i++){
      str += params[i];
  }
  return str;
}
export default Ember.Helper.helper(strConcat);

The following, is the same (updated) loop that dynamically creates the upload components.

    {{#each user_submissions as |submission|}}
          <h5>{{submission.name}}</h5>
          <p>
            {{#pl-uploader for=(str-concat 'replace-submission-' submission.id) name="replace-submission-{{submission.id}}" extensions='jpg jpeg png gif' onfileadd=(action replace submission) as |queue dropzone|}}
            <div class="dropzone" id={{dropzone.id}}>
              <a id="replace-submission-{{submission.id}}">Replace submission</a>
            </div>
            {{/pl-uploader}}
          </p>
        </div>
    {{/each}}

I'm not entirely sure what causes the above issue, but will try and tackle this in a PR over the next week.

Enough talking from me!

[tim-evans]

Ahh, the joys of string concatenation. There's a built-in ember helper called concat which should help you here. Be sure to keep in mind that curlies inside of a component invocation don't work, and you'll need to use the subexpression syntax (concat 'replace-submission-' submission.id).

This stinks to run into, but hopefully you will run into this problem less when using angle bracket components (since {{ }} works out of the box there).

Happy Ember-ing!