Summary
The Payload CMS bulk image upload feature is causing browser freezes when uploading thousands of images. This issue is attributed to the base64 preview generation for each image, which consumes a significant amount of browser memory and blocks the main thread.
Root Cause
The root cause of this issue is:
- Base64 conversion: Payload Admin converts each selected image to base64 to show a preview, which uses a lot of browser memory.
- High RAM usage: With hundreds or thousands of images, this causes high RAM usage, main thread blocking, and browser freeze.
- Temporary preview: Although the base64 preview is temporary and not stored in the database or S3/R2, it still causes significant performance issues.
Why This Happens in Real Systems
This issue occurs in real systems due to:
- Large batch uploads: Uploading a large number of images at once puts a heavy load on the browser’s memory and processing capabilities.
- Inefficient preview generation: The base64 preview generation process is not optimized for large batch uploads, leading to performance issues.
- Limited browser resources: Browsers have limited resources, and excessive memory usage can cause freezes and crashes.
Real-World Impact
The real-world impact of this issue includes:
- Unusable upload feature: The upload feature becomes unusable for large batches, making it difficult to manage and upload a large number of images.
- Poor user experience: The browser freeze and high CPU usage cause a poor user experience, leading to frustration and decreased productivity.
- Limited scalability: The issue limits the scalability of the upload feature, making it challenging to handle large volumes of images.
Example or Code (if necessary and relevant)
// Example of how to handle large batch uploads using chunked uploads
const chunkSize = 100;
const images = []; // array of images to upload
for (let i = 0; i < images.length; i += chunkSize) {
const chunk = images.slice(i, i + chunkSize);
// Upload the chunk
uploadChunk(chunk);
}
function uploadChunk(chunk) {
// Upload the chunk using the Payload CMS API
// ...
}How Senior Engineers Fix It
Senior engineers fix this issue by:
- Disabling base64 preview generation: If possible, disabling the base64 preview generation can help alleviate the performance issues.
- Implementing chunked uploads: Breaking down large batch uploads into smaller chunks can help reduce the load on the browser’s memory and processing capabilities.
- Optimizing preview generation: Optimizing the preview generation process to use less memory and processing power can help improve performance.
Why Juniors Miss It
Juniors may miss this issue due to:
- Lack of experience: Limited experience with large-scale uploads and performance optimization can make it challenging to identify and address this issue.
- Insufficient testing: Inadequate testing with large batch uploads can lead to overlooking this performance issue.
- Unfamiliarity with browser limitations: Not being aware of the limitations and constraints of browser resources can make it difficult to anticipate and address this issue.