Oi Cesar, tudo bem?
Poderia me dizer como posso fazer? Tem alguma pesquisa especifica pra eu fazer?
Oi Cesar, tudo bem?
Poderia me dizer como posso fazer? Tem alguma pesquisa especifica pra eu fazer?
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;
Po cara, ajudou muito, valeu demais. Vou dar uma olhada aqui e ver a implementação como fica.