How to get binary data for video file in javascript, Angular

Question

I am using ionic 3 platform for uploading a video file to vimeo api. I need to get binary data for video file and I am uploading using input type file element.

The code I have written is as follow

  videoUploadBody(videoObj) {
    const r = new FileReader();
    r.onload = function(){
        console.log("Binary data", r.result);
        return r.result;
    };
    r.readAsArrayBuffer(videoObj);
  }

This is the function that I need to call and it should return me video file in binary form. The function from where I am calling above function is as follow

 uploadVideo(videoFile, createdVideo) : Observable<any> {
    const bodyObj = this.compilerProvider.videoUploadBody(videoFile);
    return this.http.patch<Observable<any>>(createdVideo.upload.upload_link, bodyObj, this.uploadReqOpts);
  }

Here the bodyObj variable contains undefined, whereas I have console.log is videoUploadBody function gives me data in binary form.

I think there is some async or promise issue. What do I need to change to get back binary data in uploadVideo function?

itdoesntwork · Accepted Answer · 2018-09-23 16:57:22Z

1

You're correct in that it is a promise issue. In your first function, r.onload will only return after the first function returns, and even then it will only return from the nested function.

I'm not going to write the correct code for you, but what you have to do is wrap the first function's body in a promise that resolves within the r.onload function, then the second function should call .then on that promise to operate on it (hint: you'll need to make another promise here).

MDN has good information about Promise.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

answered Sep 23, 2018 at 16:57

itdoesntwork

4,8323 gold badges28 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get binary data for video file in javascript, Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related