const [fileContent, setFileContent] = useState(null);

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

    if (file) {
      const reader = new FileReader();

      reader.onload = (e) => {
        const content = e.target.result;
        setFileContent(content);
      };

      reader.readAsArrayBuffer(file);
    }
  };

  const pinFileToIPFS = async () => {
    try {
      if (!fileContent) {
        console.error('No file selected');
        return;
      }

      const formData = new FormData();
      const blob = new Blob([fileContent]);
      formData.append('file', blob);

      // Now you can use formData for your API request, e.g., send it to the server or IPFS

      // Example using fetch:
      // const response = await fetch('your-api-endpoint', {
      //   method: 'POST',
      //   body: formData,
      // });

      // Handle the response as needed
    } catch (error) {
      console.error('Error pinning file to IPFS:', error);
    }
  };