A React component for uploading folders to Pinata

FolderUpload.js

import { useState } from "react"
import axios from "axios"

const FolderUpload = () => {

  const [selectedFile, setSelectedFile] = useState();

  const changeHandler = (event) => {
    setSelectedFile(event.target.files);
  };

  const handleSubmission = async() => {

    const formData = new FormData();

    Array.from(selectedFile).forEach((file) => {
      formData.append("file", file)
    })

    const metadata = JSON.stringify({
      name: 'Folder name',
    });
    formData.append('pinataMetadata', metadata);

    const options = JSON.stringify({
      cidVersion: 1,
    })
    formData.append('pinataOptions', options);

    try{
      const res = await axios.post("https://api.pinata.cloud/pinning/pinFileToIPFS", formData, {
        maxBodyLength: "Infinity",
        headers: {
          'Content-Type': `multipart/form-data; boundary=${formData._boundary}`,
          Authorization: `Bearer PASTE_YOUR_JWT_HERE`,
        }
      });
      console.log(res.data);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <>
    <label class="form-label">choose Folder</label>
    <input directory="" webkitdirectory="" type="file"  onChange={changeHandler}/>
    <button onClick={handleSubmission}>Submit</button>
    </>
  )
}

export default FolderUpload