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;