search

ebess / advanced-nova-media-library

A Laravel Nova field for displaying, creating, updating and ordering a Spatie Media Library model.
595 stars 297 forks source link

Unable to upload multiple images (browser starts lagging) #68

Open leo-unglaub opened 5 years ago

leo-unglaub commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

Screenshot at 2019-07-24 23-47-23

This happens in Firefox and also in Chrome.

ebess commented 5 years ago

@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 commented 4 years ago

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.