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/ ```typescript 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( 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 ( ); }; export default Uploader; ```