[FIXED] How to upload local video file to Google Cloud

Issue

I am stuck with a file upload process in a react app. In the app, I am trying to upload local video files to Google Cloud Storage.

I take the input file from:

<input type={`file`} accept=".mp4" onChange={VideoSelectChangeFunc} />

In VideoSelectChangeFunc, I get the local URL of the input file by,

let file = URL.createObjectURL(event.target.files[0])

Then I use it in axios to send to cloud

export const UploadVideo = async (file, signedurl, asset_uuid) => {
    let resultState = { state: '', data: {} };

    await axios({
        method: 'put',
        url: signedurl,
        data: file,
        headers: {
            'Content-Type': 'application/octet-stream',
        },
    }).then(function (response) {
        resultState.state = 'success';
        resultState.data = response.data
    }).catch(function (error) {
        resultState.state = 'error';
        resultState.data.message = error.message;
        window.toastr.error(error.message);

        console.log(error)
    })

    return resultState;
}

What I see on cloud is:

blob:http://localhost:3000/9b650cbf-8b49-440b-9e90-da6bdb5d392a

This is just the local URL of the file as string but not the video itself, when I copy and paste it on browser I can see the video. I searched the situation and saw 'Content-Type': 'blob' would solve the problem. However, we are checking headers in our CORS Policy, so it has to be 'Content-Type': 'application/octet-stream'. Is there a way to work this out?

Solution

Before sending it, converting the blob url into file worked. I have only added these two lines then, called axios.

let blob = await fetch(blobURL).then(r => r.blob());
var file = new File([blob], "thisVideo.mp4",{type:"video/mp4", lastModified:new Date().getTime()})

This can be useful, in the situations where the file is not uploaded right away but the url saved temporarily to be called later on which was the case here. If you are interested visit this question too:

How to get a file or blob from an object URL?

Answered By - ilketorun

Answer Checked By - David Goodson (PHPFixing Volunteer)