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