I am trying to make the user upload a zip file then extract only the image files inside the zip folder and then render them on the screen. However the rendering/re-rendering only happens when the code recompiles(i usually change a letter inside an html descriptor to do this) The regex part is gpt generated. The useEffect hook logs an empty array after the upload button is clicked but after a recompile it prints the full array. I couldnt find an answer anywhere else as this is some unusual behaviour by React.
import React, { useState, useEffect } from 'react';
import JSZip from 'jszip';
const ImageUploader = () => {
const [selectedZipFile, setSelectedZipFile] = useState(null);
const [extractedImages, setExtractedImages] = useState([]);
const [change, setChange] = useState(0);
useEffect(() => {
if (extractedImages.length > 0) {
console.log(extractedImages);
// Trigger re-render when extractedImages state updates
setChange(c=>c+1);
}
}, [extractedImages]); // Run this effect whenever extractedImages state changes
const handleZipChange = (event) => {
const file = event.target.files[0];
setSelectedZipFile(file);
};
const handleUpload = async () => {
if (!selectedZipFile) return;
try {
const zip = await JSZip.loadAsync(selectedZipFile);
const imageFiles = [];
zip.forEach(async (relativePath, zipEntry) => {
if (zipEntry.dir || !zipEntry.name.match(/.(jpg|jpeg|png|gif)$/i)) return; // Skip directories and non-image files
const blob = await zipEntry.async("blob");
const dataUrl = await readBlobAsDataURL(blob);
imageFiles.push({ name: zipEntry.name, dataUrl });
});
setExtractedImages(imageFiles); // Update extractedImages state
} catch (error) {
console.error('Error extracting images from zip file:', error);
}
};
const readBlobAsDataURL = (blob) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(blob);
});
};
return (
<div>
<h2>Image Uploader</h2>
<input type="file" accept=".zip" onChange={handleZipChange} />
<button onClick={handleUpload} disabled={!selectedZipFile}>Upload Zip</button>
{change > 0 && extractedImages.length > 0 && (
<div>
<h3>Extracted Images:</h3>
{extractedImages.map((image, index) => (
<img key={index} src={image.dataUrl} alt={image.name} style={{ maxWidth: '100%' }} />
))}
</div>
)}
</div>
);
};
export default ImageUploader;
