title: React dropzone and formidable causing parsing issue PersistentFile
body: <p>Im using dropzone for the front end in next js project and i'm passing the image files from react dropzone to a next api using formData. This all seems to be posting to the api but then in the api i'm using formidable and i'm getting and issue when I try to access the image path.</p>
  <p>Am I missing something with the format of the files from dropzone ?</p>
  <p>Font end form component.</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import styled from &quot;styled-components&quot;;
  import DropZoneImage from &quot;../../dropzone&quot;;
  import { SubmitHandler, useForm } from &quot;react-hook-form&quot;;
  import {
    Form,
  } from &quot;../../styled&quot;;
  
  const Upload = () =&gt; {
    const [images, setImages] = useState([]);
    const {
      register,
      handleSubmit,
      formState: { errors, isValid },
    } = useForm({
      mode: &quot;onChange&quot;,
    });
  
    const onSubmit = async (formFields) =&gt; {
      const formData = new FormData();
      images.forEach((file) =&gt; {
        console.log(&quot;file = &quot;, file);
        formData.append(&quot;photos&quot;, file);
      });
  
      try {
        const response = await fetch(&quot;/api/add&quot;, {
          method: &quot;POST&quot;,
          body: formData,
        });
        const data = await response.json();
        console.log(&quot;front end data = &quot;, data);
      } catch (error) {
        console.log(&quot;error = &quot;, error);
      }
    };
  
    const onDrop = (files: any) =&gt; {
      setImages(files);
    };
    return (
          &lt;Form onSubmit={handleSubmit(onSubmit)}&gt;
            &lt;input
              className=&quot;form-input&quot;
              placeholder=&quot;Title&quot;
              {...register(&quot;email&quot;)}
            /&gt;
            &lt;input className=&quot;form-input&quot; type=&quot;date&quot; {...register(&quot;date&quot;)} /&gt;
            &lt;textarea
              className=&quot;form-input&quot;
              placeholder=&quot;Discription&quot;
              rows={5}
              {...register(&quot;discription&quot;)}
            /&gt;
  
            &lt;DropZoneImage onDrop={onDrop} /&gt;
            &lt;input type=&quot;submit&quot; className=&quot;form-submit-input&quot; /&gt;
          &lt;/Form&gt;
    );
  };
  </code></pre>
  <p><strong>DropZone component</strong></p>
  <pre><code>import React, { FC } from &quot;react&quot;;
  import { useDropzone } from &quot;react-dropzone&quot;;
  import styled from &quot;styled-components&quot;;
  
  interface IDropZoneImage {
    onDrop: (files: any) =&gt; void;
    className?: string;
  }
  
  const DropZoneImage: FC&lt;IDropZoneImage&gt; = ({ onDrop, className }) =&gt; {
    const {
      getRootProps,
      getInputProps,
      isDragActive,
      isDragAccept,
      isDragReject,
    } = useDropzone({ accept: &quot;image/*&quot;, onDrop });
    return (
      &lt;Container
        className={className}
        {...getRootProps({ isDragActive, isDragAccept, isDragReject })}
      &gt;
        &lt;input {...getInputProps()} /&gt;
        &lt;p&gt;Drop your photos here!&lt;/p&gt;
      &lt;/Container&gt;
    );
  };
  </code></pre>
  <p><strong>api/add</strong></p>
  <pre><code>import { IncomingForm } from &quot;formidable&quot;;
  
  export const config = {
    api: {
      bodyParser: false,
    },
  };
  
  export default async function add(req, res) {
  
    try {
      const data: any = await new Promise((resolve, reject) =&gt; {
        const form = new IncomingForm({ multiples: true, keepExtensions: true });
  
        form.parse(req, (err, fields, files) =&gt; {
          if (err) return reject(err);
          resolve({ fields, files });
        });
      });
  
      console.log(&quot;data = &quot;, data?.files?.photos);
  
      return res.status(200).json({ data: &quot;bla bla for now&quot; });
    } catch (error) {
     
      return res.status(500).send(error);
    }
  }
  </code></pre>
  <p>Now the weird part is when I try to access the files I get what looks like a parsing
  issue.</p>
  <pre><code>data =  [
    PersistentFile {
      _events: [Object: null prototype] { error: [Function (anonymous)] },
      _eventsCount: 1,
      _maxListeners: undefined,
      lastModifiedDate: 2022-02-23T02:46:07.368Z,
      filepath: '/var/folders/31/rsbjgppj4gz3fw9nf8tkj_w00000gn/T/6c07fbed78a58e090a4217600.jpg',
      newFilename: '6c07fbed78a58e090a4217600.jpg',
      originalFilename: 'DSCF2953.jpg',
      mimetype: 'image/jpeg',
      hashAlgorithm: false,
      size: 1442377,
      _writeStream: WriteStream {
        fd: null,
        path: '/var/folders/31/rsbjgppj4gz3fw9nf8tkj_w00000gn/T/6c07fbed78a58e090a4217600.jpg',
        flags: 'w',
        mode: 438,
        start: undefined,
        pos: undefined,
        bytesWritten: 1442377,
        closed: true,
        _writableState: [WritableState],
        _events: [Object: null prototype],
        _eventsCount: 1,
        _maxListeners: undefined,
        [Symbol(kFs)]: [Object],
        [Symbol(kIsPerformingIO)]: false,
        [Symbol(kCapture)]: false
      },
      hash: null,
      [Symbol(kCapture)]: false
    },
    PersistentFile {
      _events: [Object: null prototype] { error: [Function (anonymous)] },
      _eventsCount: 1,
      _maxListeners: undefined,
      lastModifiedDate: 2022-02-23T02:46:07.370Z,
      filepath: '/var/folders/31/rsbjgppj4gz3fw9nf8tkj_w00000gn/T/6c07fbed78a58e090a4217601.jpg',
      newFilename: '6c07fbed78a58e090a4217601.jpg',
      originalFilename: 'DSCF2960.jpg',
      mimetype: 'image/jpeg',
      hashAlgorithm: false,
      size: 1338296,
      _writeStream: WriteStream {
        fd: null,
        path: '/var/folders/31/rsbjgppj4gz3fw9nf8tkj_w00000gn/T/6c07fbed78a58e090a4217601.jpg',
        flags: 'w',
        mode: 438,
        start: undefined,
        pos: undefined,
        bytesWritten: 1338296,
        closed: false,
        _writableState: [WritableState],
        _events: [Object: null prototype],
        _eventsCount: 1,
        _maxListeners: undefined,
        [Symbol(kFs)]: [Object],
        [Symbol(kIsPerformingIO)]: false,
        [Symbol(kCapture)]: false
      },
      hash: null,
      [Symbol(kCapture)]: false
    }
  ]
  </code></pre>