More than one instance on the same page will not work

[manjufy]

I have to have two upload buttons in the same page.
An example would be

• One to upload a cover image
• Another one to upload a logo

However, If we have two instances of the Image uploader even with different ID's as recommended, uploader does not work

[svale]

Thank you for the patiences, @manjufy !

I'm not able to re-created this. Adding two instances/upload buttons in the codesandbox demo seems to work as expected.

Do you have repo or code example in a codepen I could look at?

[manjufy]

@svale Sorry for late reply. I have made it work but I forgot to keep the working codes. I'm still using the same uploader in my current project and going to give a try again and let you know how that goes. 🤞

[adityaekawade]

I also came across this issue. If you add more than one instance and pass the id props as mentioned in the docs, you see the default HTML file upload button and the custom upload button will not work. This is because the input label gets the id fileInput by default but if you pass id as a prop, this new id is assigned to the input label.

To fix this you will need to change the for attribute on the label corresponding to the id that is passed as props. For example:

<label :for="idx" slot="upload-label">
... 
</label>