Oi JP, boa noite !
Eu recentemente implementei um feat sobre upload de vídeos para o provedor pandaVideos, nesse eu usei o protocolo Tus.
Tem algumas libs que são baseadas nesse protocolo que podem ser uma alternativa pro seu caso.
Oi JP, boa noite !
Eu recentemente implementei um feat sobre upload de vídeos para o provedor pandaVideos, nesse eu usei o protocolo Tus.
Tem algumas libs que são baseadas nesse protocolo que podem ser uma alternativa pro seu caso.
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.