Untitled
unknown
jsx
2 years ago
1.6 kB
6
Indexable
// 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;
Editor is loading...