PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, October 13, 2022

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

 October 13, 2022     axios, file-upload, google-cloud-platform, google-cloud-storage, reactjs     No comments   

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)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing