Necesito enviar imágenes y videos al backend, luego recibirlos y luego mostrarlos.

Logré lo mismo con las imágenes, usando FileReader y el método readAsDataUrl() que devuelve el formato base64, y luego se puede usar en el src de la imagen.

Ahora necesito un método similar pero para el video, sé que habrá Vimeo en el backend, pero cuando lo subo al backend lo obtengo en el formato que lo envié y no sé cómo usarlo. hacer que se muestre como video de forma análoga al método utilizado para las imágenes, ya que base64 podría haberse utilizado como un img src.

Este es el código que sube el archivo:

 import React, { useCallback, useState } from "react"; import axios from "axios"; import { useDropzone } from "react-dropzone"; export const FileDropzone = ({ fileTypes, maxFiles }) => { const [progress, setProgress] = useState(0); const [error, setError] = useState(false); const onDrop = useCallback(acceptedFiles => { acceptedFiles.forEach(file => { const reader = new FileReader(); reader.onerror = () => setError(true); reader.onloadend = () => { const formData = new FormData(); formData.append("video", reader.result); const options = { headers: { "Content-Type": "multipart/formdata" }, onUploadProgress: progressEvent => { const { loaded, total } = progressEvent; let precent = Math.floor((loaded * 100) / total); setProgress(precent); } }; axios .post(MAINURL + "/endpoint/uploadFile", formData, options) .then(response => console.log(response)) .catch(error => console.log("oooo", error.status)); }; reader.readAsArrayBuffer(file); }); }, []); const { getRootProps, getInputProps } = useDropzone({ onDrop, maxFiles, accept: fileTypes }); return ( <> <div className={`border border-${ error ? "danger" : "light" } rounded d-flex justify-content-center align-items-center hpx-100`} {...getRootProps()} > <input {...getInputProps()} /> <p>Proszę kliknąć, lub upuścić wybrany plik.</p> </div> <div className="bg-primary hpx-20 mt-1" style={{ width: `${progress}%` }} ></div> </> ); };