upload video to bunny stream with axios

Question

i need to upload video to bunny stream :bunny docs

i convert file to base64 as thy do here: upload file: BODY PARAMS

if you select js axios as LANGUAGE you'll see the data value set in base64

and this is my code:

function UploadVideo(e){
  const data = new FormData();
  let file = e.target.files[0];
  let video;
  const toBase64 = file => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
  
  async function Main() {
    video = await toBase64(file);
  }
  
  Main();


  
  const c_options = {
    method: 'POST',
    url: 'https://video.bunnycdn.com/library/49034/videos',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/*+json',
      AccessKey: ''
    },
    data: '{"title":"test"}'
  };
  
  axios.request(c_options).then(function (c_response) {
    //upload start
    const u_options = {
      method: 'PUT',
      url: `https://video.bunnycdn.com/library/49034/videos/${c_response.data.guid}`,
      headers: {
        Accept: 'application/json',
        AccessKey: ''
      },
      data: video,
    };
    axios.request(u_options).then(function (u_response) {
      //post url to php
      console.log(u_response.data);
    }).catch(function (error) {
      console.error(error);
    });
    //upload end

    console.log(c_response.data);
  }).catch(function (error) {
    console.error(error);
  });
}

but it return status code 400

The 400 error text: "Failed to read the request form. Form key length limit 2048 exceeded."

how can i do that?

is that YOUR AccessKey in the code? if so it might be worth editing it out — Matt Ellen, Jul 11 '22 at 13:45
@MattEllen the 400 error text: "Failed to read the request form. Form key length limit 2048 exceeded." — mohammed hamdi, Jul 11 '22 at 14:51
@MattEllen the error come from the long of video the video i think all the problem is with the way you send the video i try to send it as form data,buffer,raw binary and dataurl but i couldn't solve the problem — mohammed hamdi, Jul 12 '22 at 16:11
You've incorrectly set your `Content-Type` to `application/'+json`, you should probably remove the `'+` — Matt Ellen, Jul 12 '22 at 21:00

score 0 · Answer 1 · answered Jul 12 '22 at 21:14

The error is telling that a key is too long.

Your data property is meant to be an object, because axios default Content-Type (which you have omitted) is application/x-www-form-urlencoded.

If you want to send the file, then you need to set the Content-Type in you header to Content-Type: application/octet-stream, i.e. your header object should be

headers: {
  Accept: 'application/json',
  AccessKey: '',
  Content-Type: 'application/octet-stream'
},

This shown in the javascript example on the bunny.net page you link to.

upload video to bunny stream with axios

1 Answers1