Animated gif only have the first frame as thumbnail

[sgauthier-gateseven]

canvas.toDataURL() doesn't support "image/gif" as a result animated gif images are uploaded as a single frame.

easiest work around is to simply skip the thumbnail creation step for gif's by adding the following to the createThumbnail method:

if (file.type === "image/svg+xml" || file.type === "image/gif")

Thoughts?

[NicolasCARPi]

Single frame thumbnail is better than no thumbnail, no? I fail to understand why you would want to skip thumbnail creation. Also, the title of this issue "Unable to upload animated gifs" is untrue and misleading. It's more "Animated gif only have the first frame as thumbnail".

[sgauthier-gateseven]

Apologies for the confusion—my original title, “Unable to upload animated GIFs,” or even “Animated GIFs are uploaded as a single frame,” better describes the issue.

To clarify, the thumbnail itself can be a single frame—that’s not the problem. The issue is that after passing through the transformFile function, the uploaded file is reduced to a single frame instead of preserving the full animation. This happens because createThumbnailFromUrl resizes the image client-side before upload, stripping the animation.

A better workaround might be modifying transformFile to skip GIFs, preventing them from being transformed before upload.

What do you think?

[NicolasCARPi]

Can you post code on codepen that shows the configuration you use that impacts gif files? Do you use transformFiles option? I'm uploading gifs fine in my app, they are not stripped of their frames, only the thumbnail shown in the uploader is a single frame, but the file itself is untouched.

[sgauthier-gateseven]

Sorry for the delay.

If you take a look at this CodePen: https://codepen.io/sgauthier-gateseven/pen/azbMwEW, you’ll notice that when the resizeWidth option is set (regardless of the original image’s dimensions) the Bytes Sent is only a fraction of the original GIF size. The uploaded file ends up being a static, single frame instead of the full animation.

However, when the resizeWidth option is removed, the Bytes Sent closely matches the original file size, and the full animated GIF is uploaded correctly to the server.

[NicolasCARPi]

Where do you see the Bytes Sent?

[sgauthier-gateseven]

I've updated the pen to output bytesSent to the console.

[NicolasCARPi]

I see. Can you make a PR with a fix then? I think what you propose in your first message seems reasonable.