Uppy could not read Location/ETag header although I can see headers listed in response headers

[Maylo99]

Hi, I’m trying to implement direct uploads to a DigitalOcean bucket. The direct uploads work just fine, and I can see the file uploaded in the bucket. However, after the upload, I get these errors:

I can see both the ETag and Location headers listed in the response headers, but I don’t know why I’m getting these errors in the console. I’ve been struggling with this for whole day, trying to figure it out.
This is what my CORSConfiguration looks like:

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>http://localhost:5000</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
    <AllowedHeader>x-amz-date</AllowedHeader>
    <AllowedHeader>x-amz-content-sha256</AllowedHeader>
    <AllowedHeader>content-type</AllowedHeader>
    <ExposeHeader>ETag</ExposeHeader>
    <ExposeHeader>Location</ExposeHeader>
  </CORSRule>
</CORSConfiguration>

This is my js controller that handles direct upload:

import {Uppy} from "@uppy/core";
import AwsS3 from "@uppy/aws-s3";

export default class extends Controller {
    static targets = ["input", "preview", "hidden"];

    connect() {
        this.uppy = new Uppy({
            autoProceed: true
        });

        this.uppy.use(AwsS3, {
            endpoint: "/" // Shrine presigned URL endpoint
        });
      
        this.uppy.on("upload-success", (file, response) => {
        // I cant reach this line I think is due to errors in console
            console.log(file.name, response.uploadURL);
            const uploadedFileData = JSON.stringify({
                id: file.meta["key"].match(/^cache\/(.+)/)[1],
                storage: "cache",
                metadata: {
                    size: file.size,
                    filename: file.name,
                    mime_type: file.type
                }
            });
            
            this.hiddenTarget.value = uploadedFileData;
            // Display the uploaded image in the preview
            this.previewTarget.src = URL.createObjectURL(file.data);
            this.previewTarget.closest(".profile-logo__preview").classList.remove("d-none");
        });
    }
    
    //this is executed when I select file
    selectFile(event) {
        const file = event.target.files[0];
        if (file) {
            this.uppy.addFile({
                name: file.name,
                type: file.type,
                data: file
            });
        }
    }
}

Versions:
“@uppy/aws-s3”: “^4.1.3”,
“@uppy/core”: “^4.3.0”,
Maybe I just forgot something to set up properly but I cant see any issue here…
Thanks for any help in advance.

[Merlijn]

Hi, could it be related to this?

upload-success not setting uploadURL correctly

[stv8]

Bumping that I am experiencing the same issue and the solution PR mentioned in the github issue did not fix it.

uploadUrl is still just the base url for me, and there is not any “key” field under the meta object.

Example

{
    "response":
    {
        "body":
        {
            "location": "https://examplebukcet.fly.storage.tigris.dev/",
            "content-length": "0",
            "etag": "\"ea1517804e665b6bd2af7360873872da\"",
            "ETag": "\"ea1517804e665b6bd2af7360873872da\""
        },
        "status": 200,
        "uploadURL": "https://examplebukcet.fly.storage.tigris.dev/"
    },
    "file":
    {
        "source": "Dashboard",
        "id": "uppy-rubymedina/custom/cdda1cf6f35cf6cd86f52da8c45fa69bce208716/jpeg-2v-1d-1e-image/jpeg-391645-1716254471825",
        "name": "rubymedina_custom-cdda1cf6f35cf6cd86f52da8c45fa69bce208716.jpeg",
        "extension": "jpeg",
        "meta":
        {
            "relativePath": null,
            "name": "rubymedina_custom-cdda1cf6f35cf6cd86f52da8c45fa69bce208716.jpeg",
            "type": "image/jpeg"
        },
        "type": "image/jpeg",
        "data":
        {},
        "progress":
        {
            "uploadStarted": 1735926729983,
            "uploadComplete": false,
            "bytesUploaded": 393471,
            "bytesTotal": 391645,
            "percentage": 100
        },
        "size": 391645,
        "isGhost": false,
        "isRemote": false,
        "preview": "blob:http://localhost:3000/f842ca52-c955-42a4-b5ca-6dc60d8df599"
    }
}

[stv8]

I posted a relevant issue in the Github with my findings

Add `fields` from the presign request to the `meta` key again for s3 direct uploads