johndatserakis / file-upload-with-preview

🖼 Simple file-upload utility that shows a preview of the uploaded image. Written in TypeScript. No dependencies. Works well with or without a framework.

Home Page:https://johndatserakis.github.io/file-upload-with-preview

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Clear on form reset

lentinj opened this issue · comments

If the containing form gets reset with form.reset() or a <button type="reset">, then the underlying <input type="file"> is emptied but the preview still shows the old file. Seems a form reset doesn't trigger a change event, at least on Chrome.

It's easy enough to work around with something like:-

fu = new FileUploadWithPreview('image-upload');
fu.input.form.addEventListener('reset', fu.clearImagePreviewPanel.bind(fu));

I can submit a pull request to do this in bindClickEvents(), but not entirely convinced if it's necessarily sensible to do this by default.

(tested with 3.0.4)

ps: Thanks for your work!

Hey, that's a good catch. We have been thinking of this as needing to be a manual call to our clear method from the containing form. We're working on some other updates right now, and we'll take a look at adding that in as well, so that when you either reset the whole form or hit our reset button on the input, it will properly empty the file from the input and preview.

For now you'll need to call our clear method manually from your form, but keep an eye out in the coming weeks, as we'll take a look at updating it as you suggested.

Yup, the workaround works fine for me so will just leave it as-is in my code. Will keep an eye out for the next version!