create a component in React, which allows uploading files, of certain characteristics, in a table

Question

I need to upload files from local, that meet a certain type such as pdf, xls and rar. But I need to show them in a table, the name of the file with its respective type "example.pdf" etc

And in the table have a column, where you can delete the uploaded file.

I was able to carry out the process, of uploading a file but image type. But this one shows up, and I just need to get the name with the type as I mentioned above, as well as having an option to remove this.

I share code and link:

https://codesandbox.io/s/subir-archivos-tabla-i87dk

import React, { useState } from "react";
//import styled from "styled-components";
import "./styles.scss";

export default function App() {
  const [seleccionArchivo, setSeleccionArchivo] = useState(null);

  const onFileChange = (e) => {
    //console.log(e.target.files);
    const file = e.target.files[0];

    if (e.target.files[0] !== undefined) {
      const reader = new FileReader();
      reader.readAsDataURL(e.target.files[0]);

      reader.onload = (e) => {
        e.preventDefault();
        console.log(e);
        setSeleccionArchivo(e.target.result); // le damos el binario de la imagen para mostrarla en pantalla
      };
    }
  };

  return (
    <>
      <div className="contenido">
        <br />
        <div className="image-upload-wrap">
          <input
            className="file-upload-input"
            type="file"
            accept="image/*, application/pdf,application/vnd.ms-excel"
            multiple
            onChange={(e) => {
              onFileChange(e);
            }}
          />
          <div className="text-information">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="50"
              height="35"
              fill="currentColor"
              class="bi bi-paperclip"
              viewBox="0 0 16 16"
            >
              <path d="M4.5 3a2.5 2.5 0 0 1 5 0v9a1.5 1.5 0 0 1-3 0V5a.5.5 0 0 1 1 0v7a.5.5 0 0 0 1 0V3a1.5 1.5 0 1 0-3 0v9a2.5 2.5 0 0 0 5 0V5a.5.5 0 0 1 1 0v7a3.5 3.5 0 1 1-7 0V3z" />
            </svg>
            <h3>Arrastre aquí su archivo o haga click para añadir.</h3>
          </div>
        </div>
      </div>
      <br />
      <table class="table">
        <thead>
          <tr>
            <th scope="col" class="titulo-tableta">
              Nombre del Archivo
            </th>
            <th scope="col" class="titulo-tableta">
              Archivo Cargado
            </th>
            <th scope="col" class="titulo-tableta">
              Eliminar Archivo
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">Etiqueta del equipo *</th>
            <td>...</td>
            <td>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                fill="currentColor"
                class="bi bi-trash"
                viewBox="0 0 16 16"
              >
                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                <path
                  fill-rule="evenodd"
                  d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"
                />
              </svg>
            </td>
          </tr>
          <tr>
            <th scope="row">
              Certificado de conformidad de normas técnicas (opcional)
            </th>
            <td>
              <div className="center">
                <img src={seleccionArchivo} alt="" height="50px" width="50px" />
              </div>
            </td>
            <td>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                fill="currentColor"
                class="bi bi-trash"
                viewBox="0 0 16 16"
              >
                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                <path
                  fill-rule="evenodd"
                  d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"
                />
              </svg>
            </td>
          </tr>
        </tbody>
      </table>
    </>
  );
}

Answer 1

Find the solution and link to its source, keep in mind that the libraries such as use-file-upload, styled-components and bootstrap are used.

https://codesandbox.io/s/subir-eliminar-archivo-forked-p9ijko?file=/src/FormSimple.js:0-3890

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import { useFileUpload } from "use-file-upload";
import styled from "styled-components";

export default function UploadDocument() {
  const [file, selectFile] = useFileUpload();
  const [file2, selectFile2] = useFileUpload();

  // const removeFile = (name) => {
  //   const newFiles = file2.filter((file) => file.name !== name);
  //   selectFile2(newFiles);
  // };

  return (
    <>
      <PrimaryButton
        onClick={() => {
          // Single File Upload accepts only images
          selectFile(
            {
              accept: "image/*, application/pdf,application/vnd.ms-excel"
            },
            ({ source, name, size, file }) => {
              // file - is the raw File Object
              const fiveMB = 2 * 1024;
              if (size < fiveMB) {
                // do your work when it's less than 5 mb
              }
              console.log({ source, name, size, file });
              // Todo: Upload to cloud.
            }
          );
        }}
      >
        team tag*
      </PrimaryButton>

      <br />
      <br />

      <SecondaryButton
        onClick={() => {
          // Single File Upload accepts only images
          selectFile2(
            {
              accept: "image/*, application/pdf,application/vnd.ms-excel"
            },
            ({ source, name, size, file }) => {
              // file - is the raw File Object
              console.log({ source, name, size, file });
              // Todo: Upload to cloud.
            }
          );
        }}
      >
        technical certificate (optional)
      </SecondaryButton>

      {/* <img src={file.source} alt="preview" /> */}
      <div className="tabla">
        <p className="titulo-tabla">Files for Homologation</p>
        <table className="table table-bordered">
          <tr>
            <th>File Name</th>
            <th>Uploaded File</th>
            <th>Action</th>
          </tr>
          <tr>
            <td data-th="etiqueta">Document #1</td>
            <td data-th="archivo" id="archivo1">
              {file ? <span>{file.name}</span> : <span>No Data</span>}
            </td>
            <td data-tj="accion">
              <button
                type="button"
                class="btn btn-warning"
                onClick={() =>
                  (document.getElementById("archivo1").innerHTML =
                    "<span>Sin Datos</span>")
                }
              >
                REMOVE
              </button>
            </td>
          </tr>
          <tr>
            <td data-th="etiqueta">Document #2 (opcional)</td>
            <td data-th="archivo" id="archivo2">
              {file2 ? <span>{file2.name}</span> : <span>No Data</span>}
            </td>
            <td data-tj="accion">
              <button
                type="button"
                class="btn btn-warning"
                onClick={() =>
                  (document.getElementById("archivo2").innerHTML =
                    "<span>Sin Datos</span>")
                }
              >
                REMOVE
              </button>
            </td>
          </tr>
        </table>
      </div>
    </>
  );
}

const Boton = styled.button`
  border-radius: 20px;
  border: 2px solid #1766dc;
  background: #1766dc;
  color: #ffff;
  cursor: pointer;
  display: block;
  font: normal bold 15px "Works Sans", sans-serif;
  padding: 15px 10px;
  transition: 0.3s ease all;
  width: 30%;

  &:hover {
    background: #004884;
    border-color: #004884;
  }
`;

const PrimaryButton = styled(Boton)`
  background-color: #1766dc;
  color: #ffff;
  width: 25%;
  height: auto;
  padding: 10px 10px 10px 10px;
`;

const SecondaryButton = styled(Boton)`
  background-color: #ffff;
  color: #1766dc;
  width: 58%;
  height: auto;
  padding: 10px 10px 10px 10px;
  margin: -30px 0px 20px 0px;

  &:hover {
    background: #004884;
    color: #ffff;
  }
`;