Cannot upload file in Customer account

Extensions
1

When I use Dropzone and fetch api to upload. I always get net::ERR_ACCESS_DENIED

const handleImageChange = (files) => {
    const file = files[0];
    let formData = new FormData();
    formData.append("file", file);
    formData.append("shop_id", "1111");

    let xhr = new XMLHttpRequest();
    xhr.open("POST", my_API_Here, true);

    xhr.onload = function () {
      if (xhr.status === 200) {
        console.log("Response:", xhr.responseText);
      } else {
        console.log("Lỗi khi upload:", xhr.status);
      }
    };

    xhr.onerror = function () {
      console.log("eror")
    };

    xhr.send(formData);
  };

<DropZone multiple accept="image/*" onInput={handleImageChange}></DropZone>

image

I can make sure that file and api exist. I wonder if Web worker can upload file? Because as I know Customer Account Extension is running on Web Worker

2

Hey, thanks for your report. This seems to only be an issue in Chrome. I will see if we can do something on our end to fix this, but for now can you try to wrap the file in a new File object and send this instead?

So something like:

const handleImageChange = (files) => {
    const file = files[0];
    let formData = new FormData();

   // ---- this is the new part
    const fixedFile = new File([file], file.name, { type: file.type });
    formData.append("file", fixedFile);
    formData.append("shop_id", "1111");

    let xhr = new XMLHttpRequest();
    xhr.open("POST", my_API_Here, true);

    xhr.onload = function () {
      if (xhr.status === 200) {
        console.log("Response:", xhr.responseText);
      } else {
        console.log("Lỗi khi upload:", xhr.status);
      }
    };

    xhr.onerror = function () {
      console.log("eror")
    };

    xhr.send(formData);
  };

Let me know if this worked, thanks! :slight_smile:

2 Likes
3

Your solution works perfectly! Thank you so much for your help.