High Browser Memory Usage while uploading Large Files

[kapilbarad]

Describe the Bug

Uploading large files crashes the browser due to high memory usage.

Link to the code that reproduces this issue

https://github.com/kapilbarad/payload/tree/payload2-upload-high-memory-usage/examples/media

Reproduction Steps

1. Start the server by following these steps - https://github.com/kapilbarad/payload/tree/payload2-upload-high-memory-usage/examples/media#development
2. Create a new Media from media Collection
3. Try to upload a big file more than your browser can read, for me it was 2GB depending on the system you're on
4. You'll notice the Crash or Hang of the Browser

This is happening because the Payload 2.0 Upload Component is trying to display the image preview of the selected file by reading the file, without checking its type. Ref: https://github.com/payloadcms/payload/blob/2.x/packages/payload/src/admin/components/views/collections/Edit/Upload/index.tsx#L77

Which area(s) are affected? (Select all that apply)

• Core UI
• File Upload

Environment Info

Payload: 2.30.4
NodeJS: 18.17.1

[github-actions]

This issue has been marked as stale due to lack of activity.

To keep this issue open, please indicate that it is still relevant in a comment below.

[kapilbarad]

This fix attached to this issue hasn't been merged yet.