0

This is my code:

fetch(profilePictureURL, { mode: "no-cors" })
        .then(function (res) {
          return res.arrayBuffer();
        })
        .then(function (buf) {
          var file = new File([buf], "new.png", { type: "image/png" });
          console.log(file);
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.addEventListener("load", () => {
            console.log(reader.result);
            uploadBytes(storageProfileBusinessRef, file);
          });
        });

console.log(reader.result) gives output data:.

While, console.log(file) gives output:

File {name: 'new.png', lastModified: 1657861829861, lastModifiedDate: Fri Jul 15 2022 10:40:29 GMT+0530 (India Standard Time), webkitRelativePath: '', size: 0, …}
lastModified: 1657861829861
lastModifiedDate: Fri Jul 15 2022 10:40:29 GMT+0530 (India Standard Time) {}
name: "new.png"
size: 0
type: "image/png"
webkitRelativePath: ""
[[Prototype]]: File

From the above output it seems that the size of file is 0. For that I did, console.log(buf), strangely it had a output ArrayBuffer(0).

But I have verified, that the image URL is perfectly alright. What could be the error here?

Shourya Shikhar
  • 1,342
  • 1
  • 11
  • 29
  • Why `mode: "no-cors"`? Do you know what it does? – Phil Jul 15 '22 at 05:17
  • yes, the backend is firebase. needed to access the image from there. If I didn't provide the mode, it resulted in cors error. @Phil – Shourya Shikhar Jul 15 '22 at 05:18
  • Access to fetch at 'https://firebasestorage.googleapis.com/v0/b/ecco-development.appspot.com/o/VnmKYTib2Pg.....' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. – Shourya Shikhar Jul 15 '22 at 05:21
  • Sorry. looks like I made a terrible mistake. as I dont yet know what an opaque request is. But that was what was suggest in the console error, that is, to add the mode. – Shourya Shikhar Jul 15 '22 at 05:24
  • 1
    The important part of that message is to evaluate if an _opaque response_ would work for you (TL;DR they probably **never** will). I've added a link at the top of your post that should help you enable CORS access in Firebase Storage. – Phil Jul 15 '22 at 05:27
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/246450/discussion-between-shourya-shikhar-and-phil). – Shourya Shikhar Jul 15 '22 at 05:30

0 Answers0