How do I upload large file using axios

Question

I am currently working on a movie streaming app, and I need to upload larger files (e.g 1GB and above).

when I upload smaller files like 1MB to 90MB it works fine but when I tried to upload 100MB+ I get this browser error Access to XMLHttpRequest at 'https://myurl.com/uploadVideo' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. I don't what else to do. Here my code below.

const handleFullVideoUpload =async(e) =>{
    let fullVideoFile = e.target.files[0];
    setFullVideo(fullVideoFile);

    const fullVideoData = new FormData();
    fullVideoData.append("video", fullVideoFile);
    setLoading(true);

      //Upload video
      try{
          let {data} =  await axios.post(`myUrl/uploadVideo`, fullVideoData,
          {   
            onUploadProgress: (e)=>{
             
                let percent = Math.floor((100 * e.loaded) /e.total)
                console.log('Percent', percent)
            }
          }
          );
        }catch(err){
          console.log(err)
        }
   }

you don't have a problem with frontend and **neither the problem is with big files**, the error message explicitly says, it's an CORS issue. Check out this answer : https://stackoverflow.com/a/10636765/10305444 — Maifee Ul Asad, Jun 30 '21 at 05:57
Hey, maybe this can help: https://stackoverflow.com/a/44489565/12133840 — alexjoedt, Aug 09 '23 at 05:13

score 2 · Answer 1 · answered Jun 30 '21 at 05:44

I think this issue is not depending on frontend. There will be a max limit for file size for the backend which you can increase. In case of .net application, there is maxRequestLength to be configured in config. And if you have bigger files you need to increase the timeout also as it will take pretty much time to upload.

How do I upload large file using axios

1 Answers1