Executando verificação de segurança...
1

Mano, primeiramente queria me desculpar pela resposta vaga, passo muito tempo no reddit kkkkk

Bom vamos lá, eu fiz a implementação com o a biblioteca @uppy, é um campo drag-and-drop, se não for o seu caso, a implementação pode ser útil.

O dashboard config eu copiei da documentação.

https://www.npmjs.com/package/uppy
https://uppy.io/docs/quick-start/

import { useContext, useRef } from "react";

import getToken from "shared/infra/services/auth/getToken";

import Uppy from "@uppy/core";
import "@uppy/core/dist/style.min.css";
import "@uppy/dashboard/dist/style.min.css";
import "@uppy/drag-drop/dist/style.min.css";
import "@uppy/progress-bar/dist/style.min.css";
import { Dashboard } from "@uppy/react";
import "@uppy/status-bar/dist/style.min.css";
import Tus from "@uppy/tus";

import dashboardConfig from "./config/dashboardConfig";

type ThemeType = "auto" | "dark" | "light";

const allowedFileTypes = [
  ".MP4",
  ".MOV",
  ".WMV",
  ".AVI",
  ".AVCHD",
  ".FLV",
  ".F4V",
  ".SWF",
  ".MKV",
  ".WEBM",
];

const Uploader = ({ onUploadComplete }) => {
  const theme = localStorage.getItem("theme_mode") as ThemeType;
  const token = getToken();
  
  const uppyRef = useRef<Uppy>(
    new Uppy({
      restrictions: {
        allowedFileTypes,
        maxNumberOfFiles: 20,
      },
    }),
  );

  const uppyTusUpload = uppyRef.current
    .use(Tus, {
      id: `Tus-${Math.random()}`,
      endpoint,
      async onBeforeRequest(req, file) {
          req.setHeader("Filename", encodeURIComponent(file.name));
          req.setHeader("Length", file.size.toString());
          req.setHeader("Authorization", `Bearer ${token}`);
        }
      
    })
    .once("upload-success", () => {
      setTimeout(async () => {
        await onUploadComplete();
      }, 5000);
    });

  return (
    <Dashboard
      itemRef={"dashboard-uppy"}
      uppy={uppyTusUpload}
      theme={theme}
      locale={dashboardConfig}
      closeModalOnClickOutside={true}
      fileManagerSelectionType={"files"}
      showProgressDetails={true}
    />
  );
};

export default Uploader;

Carregando publicação patrocinada...
1