title: How to upload formdata file to Pinata?
body: <p>I am trying to upload a base64 file to Pinata, but my Formdata seems malformed for unknown reason.</p>
  <p>I create the formdata in <code>index.js</code> and send to the NextJS api as so:</p>
  <pre><code>// file is a base64 string
  _createNFTFormDataFile = async (name, description, file) =&gt; {
      try {
        const formData = new FormData()
        formData.append('name', name)
        formData.append('description', description)
        formData.append('file', file)
        
        // formdata logs correctly
        for (let pair of formData.entries()) {
          console.log(pair[0]+ ', ' + pair[1]); 
        }
  
        const { data } = await axios.post('/api/upload', formData, {
          headers: { 'Content-Type': 'multipart/form-data' }
        })
  
      } catch (ex) {
        console.error(ex)
      }
    }
  </code></pre>
  <p>The call goes through page/api/middleware/middleware.js</p>
  <pre><code>import nextConnect from 'next-connect'
  import multiparty from 'multiparty'
  
  const middleware = nextConnect()
  
  middleware.use((req, res, next) =&gt; {
    const form = new multiparty.Form()
  
    form.parse(req, function (err, fields, files) {
      if (err) {
        console.log(err)
        next()
      }
      req.body = fields
      req.files = files
      next()
    })
  })
  
  export default middleware
  </code></pre>
  <p>And then is passed to the handler in ./page/api/upload.js.</p>
  <pre><code>handler.post(async function handlePost ({ body, files }, response) {
    try {
      const fileUrl = await uploadFileToIPFS(files.file[0]) // 
      const metadata = {
        name: body.name[0],
        description: body.description[0],
        image: fileUrl
      }
  
      const metadaUrl = await uploadJsonToIPFS(metadata, body.name[0])
      return response.status(200).json({
        url: metadaUrl
      })
    } catch (error) {
      console.log('Error uploading file: ', error)
    }
  })
  </code></pre>
  <p>However, i can't retrieve the <code>files</code> here and get this error <code>Error uploading file:  TypeError: Cannot read properties of undefined (reading '0')</code>.</p>
  <p><code>console.log(body, files) here gives: </code>{&quot;undefined&quot;:[&quot;[object Promise]&quot;]} {}`.</p>
  <p>Why can't I retrieve the formdata here?</p>