title: How to add a file and its description to the state using dropzone in ReactJs?
body: <p>How can I add to the state of a component one or more files and their description, using a select, using react-dropzone.</p>
  <p>I am using Reactjs, dropzone and bootstrap and what I want to achieve is: add one or more files (by dragging them to an area) and then see a list of the added files and a select input for each one (with options for the user to define the &quot;type&quot;) save all of this in a state and then send that information to an API.
  Something similar to what appears in the image:
  <a href="https://i.stack.imgur.com/mQwjS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mQwjS.png" alt="enter image description here" /></a></p>
  <p>The code that I have so far, returns me a list of the files that are accepted, depending on their extension (pdf, xlsx ...) and the rejected files, but I don't know how to add a select (with options of &quot;type &quot;from file that can be&quot; summary &quot;,&quot; report &quot;,&quot; test &quot;...) and save it in a state and then send it to an API.</p>
  <p>The code I have so far, using <a href="https://react-dropzone.js.org/" rel="nofollow noreferrer">react-dropzone</a>, is this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const baseStyle = {
    flex: 1,
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    padding: "20px",
    borderWidth: 2,
    borderRadius: 20,
    borderColor: "#26C2E7",
    borderStyle: "dashed",
    backgroundColor: "#fafafa",
    color: "#c4c4c4",
    outline: "none",
    transition: "border .24s ease-in-out"
  };
  
  const activeStyle = {
    borderColor: "#f2f"
  };
  
  const acceptStyle = {
    borderColor: "#f8f"
  };
  
  const rejectStyle = {
    borderColor: "#f2f"
  };
  function InputFiles(props) {
    const {
      acceptedFiles,
      fileRejections,
      isDragActive,
      isDragAccept,
      isDragReject,
      getRootProps,
      getInputProps
    } = reactDropzone.useDropzone({
      accept: ".xlsx,.docx,.pdf"
    });
  
    const style = React.useMemo(
      () =&gt; ({
        ...baseStyle,
        ...(isDragActive ? activeStyle : {}),
        ...(isDragAccept ? acceptStyle : {}),
        ...(isDragReject ? rejectStyle : {})
      }),
      [isDragActive, isDragReject, isDragAccept]
    );
  
    const acceptedFileItems = acceptedFiles.map((file) =&gt; (
      &lt;li key={file.path}&gt;
        {file.path} - {file.size} bytes
      &lt;/li&gt;
    ));
  
    const fileRejectionItems = fileRejections.map(({ file, errors }) =&gt; (
      &lt;li key={file.path}&gt;
        {file.path} - {file.size} bytes
        &lt;ul&gt;
          {errors.map((e) =&gt; (
            &lt;li key={e.code}&gt;{e.message}&lt;/li&gt;
          ))}
        &lt;/ul&gt;
      &lt;/li&gt;
    ));
  
    return (
      &lt;section className="container"&gt;
        {/* &lt;div {...getRootProps({ style })}&gt; */}
        &lt;div {...getRootProps({ style })}&gt;
          &lt;input {...getInputProps()} /&gt;
          &lt;p&gt;Drag 'n' drop some files here, or click to select files&lt;/p&gt;
          &lt;em&gt;(Only *.pdf , *.xlsx , *.docx files will be accepted)&lt;/em&gt;
        &lt;/div&gt;
        &lt;aside&gt;
          &lt;h4&gt;Accepted files&lt;/h4&gt;
          &lt;ul&gt;{acceptedFileItems}&lt;/ul&gt;
          &lt;h4&gt;Rejected files&lt;/h4&gt;
          &lt;ul&gt;{fileRejectionItems}&lt;/ul&gt;
        &lt;/aside&gt;
      &lt;/section&gt;
    );
  }
  
  ReactDOM.render(&lt;InputFiles /&gt;, document.body);
  
  window.onload = function() {
   console.log('onload');
     
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dropzone/11.2.0/index.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The goal would be to get something like this:</p>
  <p><a href="https://i.stack.imgur.com/fdtgW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fdtgW.png" alt="enter image description here" /></a></p>
  <p>When adding the files and their description, they must be saved in the component's state, with the objective that when clicking on save, a POST request is made to the API and when clicking on cancel, the state information must be deleted</p>