I need to send image and video to the backend, then receive and then display them.

I accomplished the same thing with images, by using FileReader and the readAsDataUrl() method which returns base64 format, and then it can be used in the image's src.

Now I need a similar method but for the video, I know that there will be Vimeo on the backend, but when I upload it to backend I get it in the format I have sent it and I don't know how to use it to have it displayed as video analogically to method used for images as base64 could have been used as an img src.

This is the code that uploads the file:

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>
        </>
    );
};