How to read a file in project folder javascript?

Question

I am working on a react project. I have a video file in public folder. There is a case where i have to read the file and send it to server as a file.i tried the below code and it didn't work

const readVideo = () => {
      console.log(isDev.current.checked);
      fetch("/images/Sample_2.mp4").then(function (response) {
         console.log(response);
         const reader = new FileReader();
         reader.onload = (e) => {
            console.log(e.target.result);
         };
         reader.readAsDataURL(response.url);
      });
   };

when doing this im getting the following error

Unhandled Rejection (TypeError): Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

augustine · Accepted Answer · 2020-10-24 04:43:17Z

You need to transfer the response into a Blob object.

https://developer.mozilla.org/en-US/docs/Web/API/Body/blob

const readVideo = () => {
  console.log(isDev.current.checked);
  fetch('/images/Sample_2.mp4')
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.blob();
    })
    .then(myBlob => {
      console.log(myBlob);
      const reader = new FileReader();
      reader.onload = e => {
        console.log(e.target.result);
      };
      reader.readAsDataURL(myBlob);
    })
    .catch(error => {
      console.error(
        'There has been a problem with your fetch operation:',
        error
      );
    });
};

It shall work.

Collectives™ on Stack Overflow

How to read a file in project folder javascript?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related