Untitled
unknown
plain_text
a year ago
2.1 kB
3
Indexable
// ImageUpload.js import React from 'react'; import imageCompression from 'browser-image-compression'; const ImageUpload = ({ handleImageChange }) => { const handleFileChange = async (e) => { const files = e.target.files; const newImages = Array.from(files); try { // Retrieve existing images from session storage const existingImagesString = sessionStorage.getItem('uploadedImages'); const existingImages = existingImagesString ? JSON.parse(existingImagesString) : []; const compressedImages = await Promise.all( newImages.map(async (image) => { if (image.size > 2 * 1024 * 1024) { // Compress image if size exceeds 2 MB const compressedImage = await imageCompression(image, { maxSizeMB: 2, useWebWorker: true, }); // Convert compressed image to base64 string return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(compressedImage); reader.onloadend = () => { resolve(reader.result); }; reader.onerror = reject; }); } else { // Convert image to base64 string directly return new Promise((resolve) => { const reader = new FileReader(); reader.readAsDataURL(image); reader.onloadend = () => { resolve(reader.result); }; }); } }) ); // Merge old and new images const allImages = [...existingImages, ...compressedImages]; // Store all images in session storage sessionStorage.setItem('uploadedImages', JSON.stringify(allImages)); // Reload the window (if needed) window.location.reload(); } catch (err) { console.log(err); // Handle error, maybe show a notification to the user } }; return ( <> <input type="file" onChange={handleFileChange} multiple className="dashboard-upload-input" /> </> ); }; export default ImageUpload;
Editor is loading...
Leave a Comment