Untitled

// Install jszip via npm: npm install jszip

import React, { useState } from 'react';
import JSZip from 'jszip';

const FileUploader = ({ onFileSelected }) => {
  const handleFileChange = async (event) => {
    const file = event.target.files[0];
    onFileSelected(file);
  };

  return (
    <div>
      <input type="file" accept=".fig" onChange={handleFileChange} />
    </div>
  );
};

const MainComponent = () => {
  const [fileIsValid, setFileIsValid] = useState(false);

  const handleFileSelected = async (file) => {
    const reader = new FileReader();
    reader.onload = async (event) => {
      try {
        const arrayBuffer = event.target.result;
        const zip = await JSZip.loadAsync(arrayBuffer);
        const fileNames = Object.keys(zip.files);
        if (fileNames.includes('canvas.fig')) {
          setFileIsValid(true);
        } else {
          setFileIsValid(false);
        }
      } catch (error) {
        console.error('Error reading or processing the .fig file:', error);
        setFileIsValid(false);
      }
    };
    reader.readAsArrayBuffer(file);
  };

  const handleConvertClick = () => {
    if (fileIsValid) {
      // Call your custom file converter function here with the selected .fig file
    } else {
      // Show an error message to the user indicating that the file is invalid
      alert('Invalid .fig file. Please upload a valid .fig file.');
    }
  };

  return (
    <div>
      <FileUploader onFileSelected={handleFileSelected} />
      <button onClick={handleConvertClick} disabled={!fileIsValid}>
        Convert
      </button>
    </div>
  );
};

export default MainComponent;