Search code examples
javascriptnode.jstypescriptaws-sdkreact-tsx

Failed to fetch AWS


I have a problem uploading files to the S3 bucket using the @aws-sdk/client-s3 library using PutObjectCommand and @aws-sdk/lib-storage Uploading files above 70kbps more or less returns the error:

`TypeError: Failed to fetch
  at FetchHttpHandler.handle (fetch-http-handler.js:56:13)
  at PutObjectCommand.js:56:58
  at flexibleChecksumsResponseMiddleware.js:17:26
  at deserializerMiddleware.js:2:32
  at check-content-length-header.js:18:16
  at awsAuthMiddleware.js:10:26
  at async retryMiddleware.js:24:46
  at async flexibleChecksumsMiddleware.js:54:20
  at async loggerMiddleware.js:3:26
  at async Promise.all (index 0)
upload.ts:31`

however files below that will normally

Functions that are used to upload files

` import { PutObjectCommand, S3Client } from "@aws-sdk/client-s3"; import { Upload } from "@aws-sdk/lib-storage"; import { FetchHttpHandler } from "@smithy/fetch-http-handler";

const secretAccessKey = import.meta.env.VITE_AWS_SECRET_ACCESS_KEY;
const accessKeyId = import.meta.env.VITE_AWS_ACCESS_KEY_ID;
const region = import.meta.env.VITE_AWS_DEFAULT_REGION;
const bucket = import.meta.env.VITE_BUCKET_NAME;

const client = new S3Client({
 credentials: { secretAccessKey, accessKeyId },
 region,
 requestHandler: new FetchHttpHandler({
  requestTimeout: 5000
 })
});

export const onUploadFiles = async (file: any) => {
 const upload = new Upload({
  client,
  params: {
   Bucket: bucket,
   Key: file.name,
   Body: file.file,
   ACL: "public-read"
  },
  partSize: 5 * 1024 * 1024
 });
 try {
  upload.on("httpUploadProgress", (progress) => {
   console.log(progress);
  });

  await upload.done();
 } catch (error) {
  console.log(error);
 }
};

export const onUpload = async (file: any, callback: (data: any) => void) => {
 const input = {
  Bucket: bucket,
  Key: file.name,
  Body: file.file,
  ACL: "public-read"
 };
 try {
  const response = await client.send(new PutObjectCommand(input));
  callback(response);
 } catch (error) {
  console.log(error);
 }
};`

Solution

  • I had the same problem today. Attempting to upload any file (regardless of its size) using client-s3 and PutObjectCommand resulted into "TypeError: Failed to fetch" message. What helped me was downgrading the aws-sdk/client-s3 package to version 3.317.0:

    npm remove --purge @aws-sdk/client-s3

    npm i @aws-sdk/[email protected]

    After that, upload to S3 worked again. I hope this helps anyone facing a similar issue.