How to handle multiple Uppy instances

Hello, I have a page where the user can upload images, videos and other data using 3 file upload instances. I am handling large amount of data like 50K images,etc. So when the user starts uploading the page crashes, I think If I used one instance to handle the three data types would be better, is there an example to do this ?

Hi, using multiple uploaders is not a good idea in that case. Uppy is configured with a queue to not overwhelm the browser and HTTP. For instance, on HTTP/1.1 you can only have 6-7 concurrent connections so if you use three uploaders with a default limit of 6 you would immediately get congestion.

If you upload directly to AWS S3 you can only use HTTP/1.1, our other uploaders hopefully upload over HTTP/2.0 (or 3.0) in your setup.

The problem you will likely face is the initial loading of 50K files, which is mostly problematic for local files (not Companion). Perhaps disabling thumbnails will result in significant less memory usage for your browser: Dashboard | Uppy

What I am doing exactly is : the first uploader is for images, second for videos and the last is for other data types, after the user chooses the data he hit a button to analyze the data, that’s when I get all the files of these 3 uploader and append them to an array and use a new Main Uppy instance to handle the uploading.

a question would be, how to handle file validation for the three data types while having only one instance for Uppy?

This seems like an XY problem. I don’t understand the underlying problem for you wanting three uploaders. From a UX as well as technical perspective a single uppy instance with a single UI makes more sense to me?

Having 3 uploaders is a business requirement. However, can I use one Uppy instance to handle the three uploaders ? or do I need an instance for each uploader? I am asking about the best practice to follow

It’s not possible to reuse the instance for multiple UIs. So indeed that would be an instance per UI. It’s up to you then to manage the limits to not congest the HTTP connections.

1 Like