Dashboard.jsx


import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Link } from 'react-router-dom';
import imageCompression from 'browser-image-compression';
import './Dashboard.css'; // Import the new CSS file
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 compressedImages = await Promise.all(
        newImages.map(async (image) => {
          if (image.size > 2 * 1024 * 1024) {
            console.log("Yes, the greater image is compressed");
            // Compress image if size exceeds 2 MB
            const compressedImage = await imageCompression(image, {
              maxSizeMB: 2,
              useWebWorker: true,
            });
            
            console.log("Size after compressing: ", compressedImage.size);
            const x = compressedImage.size;
            if (x < 2 * 1024 * 1024) {
              console.log("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);
              };
            });
          }
        })
      );
      // window.location.reload();

      
      // Store base64 strings in local storage
      localStorage.setItem('uploadedImages', JSON.stringify(compressedImages));
    } 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">
            {/* <Link to="/Dashboard" className="dashboard-link">Dashboard</Link><br/> */}
            <Button variant="contained"  onClick={() => navi('/Dashboard')}>Dashboard</Button><br/>
            <br/>
            <input type="file" onChange={handleImageChange} multiple className="dashboard-upload-input" />

            <br/>
            <br/>
            {/* <Link to="/FetchImage" className="dashboard-image-link">Images</Link> */}
            <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/>
            {/* <Link className='logout' to="/" >LogOut</Link><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'/>
      <h1 class="app-name">Weather APP</h1>
     
      <Button variant="contained"  onClick={() => navi('/Weatherdata')}>Weather Search</Button>
   
      </body>
      </>
      
  );
};

export default Dashboard;
Editor is loading...