The received filepath suffix disappears after compression

[XAihan]

After I use file compression, I pass it to the back end. The back-end received fielpath without a suffix.

I have identified the problem: the lack of a suffix caused by the canvas to blob step. After that component is converted, the filename in the generated blob is the default blob. The filepath suffix is generated based on filename. So there's no suffix.

There are two solutions, one is to set the blob filename when uploading. Another option is to configure filename when generating BLOBs.

[XAihan]

https://juejin.cn/post/7145057361504403470
The solutions I provide now are all carried out in the second operation, can I directly add this step in the compression?

[XAihan]

i saw this.

And this. It looks like edge now supports File constructor

[Donaldcwl]

@XAihan Thanks for the nicely written blog to help people who use this library in the Chinese community.

The main reason for using new Blob instead of new File is that Safari has an issue with the File constructor not being able to POST in FormData. (see https://bugs.webkit.org/show_bug.cgi?id=165081)

Therefore, I would suggest your first solution which provide the image name (e.g., a.png) when appending the blob to FormData.

const forms = new FormData();
file = await handleCompressFile(file);
forms.append('data', file, 'a.png');