net::ERR_FAILED On PutObjectCommand

[DonaldLouch]

Checkboxes for prior research

• I've gone through Developer Guide and API reference
• I've checked AWS Forums and StackOverflow.
• I've searched for previous similar issues and didn't find any solution.

Describe the bug

Hello,

I'm trying to create a upload function with the @aws-sdk/client-s3 package and I can't seem to get files uploaded. When I try to upload files it just says PUT URL?x-id=PutObject net::ERR\_FAILED and

TypeError: Failed to fetch

  at FetchHttpHandler.handle (fetch-http-handler.js:81:13)
  
  at async flexibleChecksumsResponseMiddleware.js:20:20
  
  at async throw-200-exceptions.js:10:20
  
  at async deserializerMiddleware.js:2:26

I'm not sure what's wrong?!

My Tech Stack Is:

• NextJS (15 Canary)
• React/React-Dom (19 RC)
• @aws-sdk/client-s3 (3.673.0)
• Backblaze S3 (for my s3 client)
• @mantine/dropzone (7.13.2)
• @mantine/core (7.13.2)
• typescript (5.6.3)
• Among Others

Regression Issue

• Select this option if this issue appears to be a regression.

SDK version number

@aws-sdk/[email protected]

Which JavaScript Runtime is this issue in?

Node.js

Details of the browser/Node.js/ReactNative version

v22.6.0

Reproduction Steps

// app/actions/s3File.ts

import { PutObjectCommand, S3Client } from "@aws-sdk/client-s3"
import { revalidatePath } from "next/cache"

type S3Payload = {
  uploadDestination: string
  bucket: string
  hostName: string
  uploadEndpoint: string
}

export async function uploadFileToS3( formData: FormData, payload: S3Payload ): Promise<any[]> {
  const s3 = new S3Client({
    endpoint: `https://${process.env.NEXT_PUBLIC_S3_HOST_NAME}:443`,
    region: process.env.NEXT_PUBLIC_S3_REGION,
    credentials: {
      accessKeyId: process.env.NEXT_PUBLIC_S3_ACCESS_KEY_ID!,
      secretAccessKey: process.env.NEXT_PUBLIC_S3_SECRET_ACCESS_KEY!,
    },
  })
  
  const { uploadDestination, bucket, hostName, uploadEndpoint } = payload

  try {
    const files = formData.getAll("file") as File[]
    
    const response = await Promise.all(
      files.map(async (file) => {
        const {name: fileName, type: fileType, lastModified: date} = file
        const fileExtension = fileType.split("/")\[1\]
        const fileID = `${uploadDestination}\_CUSTOMRANDOMID` as string
        const filePath = `${uploadDestination}/${fileID}.${fileExtension}`
        
        const arrayBuffer = await file.arrayBuffer()
        const buffer = Buffer.from(arrayBuffer)
        
        const uploadFileObject = {
          "acl": "public-read",
          "Bucket": bucket,
          "Key": filePath,
          "Body": buffer,
          "ContentType": fileType,
        }
        
        const uploadFile = new PutObjectCommand(uploadFileObject)
        const upload = await s3.send(uploadFile)
        
        const isFileUploaded = upload.$metadata.httpStatusCode === 200 ? true : false
        
        console.log("Upload RES", upload)
      })
    )
    
    revalidatePath("/")
    return response
  } catch (error) {
    console.error("Error uploading file(s) to S3:", error)
    throw new Error("Failed to upload file(s) to S3.")
  }
}

// uploadPage/component.tsx

...

import { Dropzone, DropzoneProps, IMAGE_MIME_TYPE } from '@mantine/dropzone';
import { uploadFileToS3 } from "@/app/actions/s3File";

...

async function handleOnSubmit(e: any) {
 const uploadDestination = mediaType

 try {
    const formData = new FormData()
    
    files.forEach((file) => formData.append("file", file))
    
    await uploadFileToS3(formData, {
      uploadDestination, // Picture | Video | Audio | ECT
      bucket: process.env.NEXT_PUBLIC_S3_BUCKET_NAME!,
      hostName: process.env.NEXT_PUBLIC_S3_HOST_NAME!,
      uploadEndpoint: `https://${process.env.NEXT\_PUBLIC\_S3\_BUCKET\_NAME!}.${process.env.NEXT\_PUBLIC\_S3\_HOST\_NAME!}`
    })
  } catch (error) {
    console.error("File(s) couldn't be uploaded to S3", error)
  }
}

Observed Behavior

PUT URL?x-id=PutObject net::ERR\_FAILED

and

TypeError: Failed to fetch

  at FetchHttpHandler.handle (fetch-http-handler.js:81:13)
  
  at async flexibleChecksumsResponseMiddleware.js:20:20
  
  at async throw-200-exceptions.js:10:20
  
  at async deserializerMiddleware.js:2:26
  ... (Can't Copy The Remaining Text)

Expected Behavior

Files should be able to be uploaded to my Backblaze (B2 CLOUD STORAGE) S3 server and come back with a version ID and then from there I upload the information to a Supabase database.

Possible Solution

No response

Additional Information/Context

I have tried regenerating keys and inputting them manually through CyberDuck and was able to upload files through CyberDuck with the keys; I just can't get it to work with my NextJS app. The upload process was work in my dev server up until a week or so ago; but has not worked on my prod server (through Vercel) for quite a few months now.

[DonaldLouch]

I was able to get a further error message:

Ensure CORS response header values are valid:
A cross-origin resource sharing (CORS) request was blocked because of invalid or missing response headers of the request or the associated preflight request.

To fix this issue, ensure the response to the CORS request and/or the associated preflight request are not missing headers and use valid header values.

Note that if an opaque response is sufficient, the request's mode can be set to no-cors to fetch the resource with CORS disabled; that way CORS headers are not required but the response content is inaccessible (opaque).

AFFECTED RESOURCES

Request	Status	Preflight Request (if problematic)	Header	Problem
FILE?x-id=PutObject	blocked	FILE?x-id=PutObject	Access-Control-Allow-Origin	Missing Header

Learn more: Cross-Origin Resource Sharing (CORS)

[aBurmeseDev]

Hi @DonaldLouch - thanks for reaching out.

Before I further investigate, can you confirm if this was working correctly in a previous version of your application, as indicated by the checked potential regression checkbox?

At first glance, it seems that the issue might be related to CORS rather than the SDK itself. However, I need to investigate further to verify this. Since you're using Backblaze S3, the problem could be that your Backblaze S3 bucket is not configured to allow cross-origin requests from your NextJS application.

Best,
John

[DonaldLouch]

After further googling I think I have fixed it?!

I needed to add "use server" at the top of my app/actions/s3File.ts file!

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs and link to relevant comments in this thread.