Unable to upload multiple images (browser starts lagging)

[leo-unglaub]

Hi, i am using your software and it works great. When i upload a single image it works very well. But i noticed that when i want to upload multiple files the upload does not work. The POST request to upload the multiple images just hangs at 0 bytes uploaded. But i noticed that the CPU load and RAM usage spikes a lot after hitting the upload button. The browser tab suddenly needs around 2GB of RAM. I have the same issue in Firefox and Chrome.

Do you have any idea why this happens? Thanks and greetings Leo

[ebess]

Hi @leo-unglaub When you upload multiple big-sized images the component generates base64 urls for displaying the thumbnails. That might be the problem. I guess one option would be to generate a new canvas, resize the huge image and use it to display the thumbnail.

[leo-unglaub]

Hi @ebess, it seams that you are right about that. When i remove the thumbnail generation and just use a placeholder the upload seams to work.

Thanks so much for looking into this. Greetings Leo

[leo-unglaub]

I looked into this issue a little bit more. Generating the base64 of the image and storing it in the DOM uses up a lot of memory. In this example i added just 2 images with 4MB size and this is the memory map from that tab

This happens in Firefox and also in Chrome.

[ebess]

@leo-unglaub Yap, as mentioned before, it's the base64 memory issue. A better way to keep the functionality and reduce the memory issue is to resize the selected upload-images using a canvas. I think that would work.

[salmanhijazi]

Hi @ebess, it seams that you are right about that. When i remove the thumbnail generation and just use a placeholder the upload seams to work.

Thanks so much for looking into this. Greetings Leo

How did you remove thumbnail generation to replace with placeholder? Can't seem to find that as a setting. I'm trying to upload really large video files, 1GB+, and it just crashes the tab on Chrome or fails to register anything at all on Firefox.