Better support for HEIC files

[PoeHaH]

First of all: thank you for maintaining this! Not sure what happened to the original Dropzone but it's widely used so I'm happy to see interest in further keeping this alive :-).

Images taken with iPhone cameras are often stored in a raw format with ".heic" extension. Their mime type is "image/heic" so Dropzone tries to render a thumbnail preview, but it doesn't work:

In the source code, we can see why the thumbnail can't be displayed:

In short, the dataUrl is not a string, but an object.

I propose to fix this by making a simple change to the thumbnail() function to check if the dataUrl is a string.

Would you be open to add this into the next release?

[NicolasCARPi]

Hello,

Would you be open to add this into the next release?

Yes, please open a PR and I'll look into it. Please add an example HEIC file in there too!

Not sure what happened to the original Dropzone

Something I see a lot in the open source world: project maintainer simply lost interest in the project and let it die the worst ay: not answering nor providing access to a new maintainer. C'est la vie !

[PoeHaH]

This makes me sound stupid but do you have a doc on how to open a PR? 😊

Yeah, that's part of open source!

[NicolasCARPi]

You can start with this document: https://github.com/NicolasCARPi/dropzone/blob/master/CONTRIBUTING.md

After if you never opened a PR on GitHub, you can read about it in their doc: https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request

[jedi58]

Web browsers don't generally support HEIC files due to it being a proprietary Apple format; see https://caniuse.com/?search=HEIC

If this was going to support HEIC/HEIF uploads, presumably it'd need to convert it to JPEG or PNG on/after upload? Thinking one option could be to use something such as https://www.npmjs.com/package/heic-convert using the file added event to convert it for the preview thumbnail

[NicolasCARPi]

I think we can live fine without thumbnails for HEIC. Don't want to add a dependency.

What we could do instead, is provide an option to call a custom function for thumbnailing. This way, the end user could either use some JS libs to do it in the browser, or call a resizing api endpoint in their app.

[PoeHaH]

I think we can live fine without thumbnails for HEIC. Don't want to add a dependency.

What we could do instead, is provide an option to call a custom function for thumbnailing. This way, the end user could either use some JS libs to do it in the browser, or call a resizing api endpoint in their app.

That's a good idea! We could then display a simple placeholder image, which still looks better than a broken image.

[NicolasCARPi]

Yes, the current code needs fixing to handle unsupported images. We should allow-list the supported image formats, right now it's looking at image/* mime, which was probably correct 10 years ago, but not anymore!