Untitled
unknown
plain_text
a year ago
2.3 kB
2
Indexable
import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { Link } from 'react-router-dom'; import imageCompression from 'browser-image-compression'; const Dashboard = () => { const navi = useNavigate(); const [fileCount, setFileCount] = useState(0); const handleFileChange = async (e) => { const files = e.target.files; const options = { maxSizeMB: 2, useWebWorker: true, }; try { for (let i = 0; i < files.length; i++) { const file = files[i]; // Process images asynchronously using a Promise await processImage(file, options, i); } } catch (err) { console.error(err); } }; const processImage = async (file, options, index) => { return new Promise((resolve) => { const reader = new FileReader(); reader.onload = async () => { try { let compressedImage; if (file.size > options.maxSizeMB * 1024 * 1024) { compressedImage = await imageCompression(file, options); } else { compressedImage = file; } console.log('file size before compress:', file.size); console.log('file size after compress:', compressedImage.size); const imageData = JSON.parse(localStorage.getItem('Images')) || []; imageData.push({ dataURL: reader.result }); localStorage.setItem('Images', JSON.stringify(imageData)); setFileCount(index + 1); resolve(); } catch (error) { console.error(error); resolve(); } }; reader.readAsDataURL(file); }); }; return ( <> <header> <nav> <div className="nav-left"> <h1>Sample App</h1> </div> <div className="nav-right"> <p>Welcome !!!!! {localStorage.getItem("name")}</p> <Link to="/Dashboard">Dashboard</Link><br/> <input type="file" onChange={handleFileChange} multiple /> <br/><br/> <Link to="/FetchImage">Images</Link> </div> </nav> </header> <br/> <br/> <button onClick={() => navi('/Weatherdata')}>Weather Search</button> </> ); }; export default Dashboard;
Editor is loading...
Leave a Comment