search

kartoteket / vue-image-upload-resize

A simple vue-component for client-side image upload with resizing
MIT License
175 stars 54 forks source link

More than one instance on the same page will not work #39

Open manjufy opened 4 years ago

manjufy commented 4 years ago

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

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

svale commented 4 years ago

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 commented 4 years ago

@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 commented 3 years ago

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>