#StackBounty: #javascript #reactjs #drag-and-drop #react-dropzone How to add a file and its description to the state using dropzone in …

Bounty: 50

How can I add to the state of a component one or more files and their description, using a select, using react-dropzone.

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 "type") save all of this in a state and then send that information to an API.
Something similar to what appears in the image:
enter image description here

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 "type "from file that can be" summary "," report "," test "…) and save it in a state and then send it to an API.

The code I have so far, using react-dropzone, is this:

import React, { useMemo } from "react";
import { useDropzone } from "react-dropzone";

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
  } = useDropzone({
    accept: ".xlsx,.docx,.pdf"
  });

  const style = useMemo(
    () => ({
      ...baseStyle,
      ...(isDragActive ? activeStyle : {}),
      ...(isDragAccept ? acceptStyle : {}),
      ...(isDragReject ? rejectStyle : {})
    }),
    [isDragActive, isDragReject, isDragAccept]
  );

  const acceptedFileItems = acceptedFiles.map((file) => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));

  const fileRejectionItems = fileRejections.map(({ file, errors }) => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
      <ul>
        {errors.map((e) => (
          <li key={e.code}>{e.message}</li>
        ))}
      </ul>
    </li>
  ));

  return (
    <section className="container">
      {/* <div {...getRootProps({ style })}> */}
      <div {...getRootProps({ style })}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
        <em>(Only *.pdf , *.xlsx , *.docx files will be accepted)</em>
      </div>
      <aside>
        <h4>Accepted files</h4>
        <ul>{acceptedFileItems}</ul>
        <h4>Rejected files</h4>
        <ul>{fileRejectionItems}</ul>
      </aside>
    </section>
  );
}

export default InputFiles;
https://cdnjs.cloudflare.com/ajax/libs/react-dropzone/11.2.0/index.js
https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js
https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js

The goal would be to get something like this:

enter image description here

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


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.