Out of Memory error using File Dropzone Component

💬 App Building
, , , ,
1

There seems to be an issue with the File Dropzone component, specifically how it handles multiple sequential file uploads.

I believe that the file information is being kept in the browser memory even when files are removed from the component either by selecting different files or by clearing the component.

This sooner or later causes an Out of Memory error in the browser.

I think this might be related to this topic from 2024 (on self-hosted Retool).

Steps to reproduce:

  1. Add a File Dropzone component to your app
  2. Select a file or multiple files (preferably bigger)
  3. Select some other files
  4. Continue until the browser runs out of memory and the page crashes

I think that the component should be clearing it’s internal memory when the file is changed instead of storing them permanently. Our use case requires uploading multiple files one by one and we seem to be hitting the memory limit sooner or later.

3

In my testing on Google Chrome, I seem to be hitting the memory limit at around 1 GB.

4

This issue does not seem to present in either the File Button or File Input components.

5

Hi,

Have you tried calling : fileDropzone1.clearValue() after each upload?

The internal state of the dropzone seems to store a base64 encoded string of the file contents, so clearing that should free up memory in the browser.

Thanks

6

Thanks for reaching out, @gasperblk! I think the linked topic is specifically talking about memory consumption in the backend, so may not be relevant.

I did try to reproduce the issue on the latest Cloud release, though, and it looks like memory is being correctly freed up when clearing the component.

How is your fileDropzone component configured? Are you allowing multiple uploaded files? Or have you enabled file parsing?