Untitled

// Dashboard.js

import React 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 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) {
            // 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);
              };
            });
          }
        })
      );

      // 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>
        <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={handleImageChange} multiple />
            <br />
            <br />
            <Link to="/FetchImage">Images</Link>
          </div>
        </nav>
      </header>

      <br />
      <br />

      <button onClick={() => navi('/Weatherdata')}>Weather Search</button>
    </>
  );
};

export default Dashboard;

// ImageFetcher.js

import React, { useEffect, useState } from 'react';

const ImageFetcher = () => {
  const [fetchedImages, setFetchedImages] = useState([]);

  useEffect(() => {
    // Fetch stored images from local storage
    const storedImages = localStorage.getItem('uploadedImages');

    // Parse stored base64 strings and convert them back to images
    if (storedImages) {
      const base64Images = JSON.parse(storedImages);
      setFetchedImages(base64Images);
    }
  }, []);

  return (
    <div className="image-grid-container">
      <h2>Fetched Images</h2>
      <div className="image-grid">
        {fetchedImages.map((base64String, index) => (
          <div key={index} className="image-item">
            <img src={base64String} alt={`Uploaded ${index}`} />
          </div>
        ))}
      </div>
    </div>
  );
};

export default ImageFetcher;