Untitled
unknown
plain_text
a year ago
3.2 kB
4
Indexable
import React from 'react'; import { useNavigate } from 'react-router-dom'; import imageCompression from 'browser-image-compression'; import Button from '@mui/material/Button'; const Dashboard = () => { const navi = useNavigate(); const handleImageChange = async (e) => { const files = e.target.files; const newImages = Array.from(files); try { 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 ( <> <header className="dashboard-header"> <nav> <div className="dashboard-nav-left"> <Button variant="contained" onClick={() => navi('/Dashboard')}>Dashboard</Button><br /> <br /> <input type="file" onChange={handleImageChange} multiple className="dashboard-upload-input" /> <br /> <br /> <Button variant="contained" onClick={() => navi('/FetchImage')}>Images</Button><br /> </div> <div className="dashboard-nav-right"> <p className="dashboard-welcome-message">Welcome !!!!! {localStorage.getItem('name')}</p> <br /> <Button variant="contained" onClick={() => navi('/')}>Logout</Button> </div> </nav> </header> <body className='dashbody'> <img className='dash-image' src='https://tse4.mm.bing.net/th/id/OIP.gnzDFoI_laBxZ1dHFjgbOgHaHa?w=180&h=180&c=7&r=0&o=5&pid=1.7' alt="Weather Logo" /> <h1 className="app-name">Weather APP</h1> <Button variant="contained" onClick={() => navi('/Weatherdata')}>Weather Search</Button> </body> </> ); }; export default Dashboard;
Editor is loading...
Leave a Comment