Unknown Error 400

[hasnainmalik-siar]

Describe the issue

Here is my code for uploading a file to S3. However, on the first attempt, it returns a 400 Unknown Error, and the full error log displays body: '\nYour browser sent an invalid request.\n'. Please suggest a way to fix it,

import { S3Client, S3 } from '@aws-sdk/client-s3';
import { Upload } from "@aws-sdk/lib-storage";
import dotenv from "dotenv";
import logger from '../config/logger.js';
dotenv.config();

const s3 = new S3({
  endpoint: process.env.DO_SPACES_ENDPOINT,
  forcePathStyle: true,
  region: "sfo3",
  credentials: {
    accessKeyId: process.env.DO_SPACES_KEY,
    secretAccessKey: process.env.DO_SPACES_SECRET,
  },
  logger: console, // Enable logging
});


export async function uploadExportFileToS3(key, mimeType, file, id) {
  try {
    const params = {
      Bucket: "exportify",
      Key: key,
      Body: file,
      ContentType: mimeType,
      ContentLength: file.length,
    };

    // Perform parallel upload
    const parallelUpload = new Upload({
      client: s3,
      params,
      queueSize: 3,
    });

    parallelUpload.on('httpUploadProgress', (progress) => {
      console.log("This is progress :: ", progress);
    });

    const resp = await parallelUpload.done();
    console.log("resp :: ", resp)
    return { location: resp.Location, id };

  } catch (error) {
    if (error instanceof Error && error.name === "AbortError") {
      logger.error(`Multipart upload was aborted. ${error.message}`);
    } else {
      console.log("Error uploading file:", error.message);
      logger.error("Error uploading file:" + error.message)
      // throw error;
    }
  }
}

This is full error log

error: 400: UnknownError
16:12:29 │ web-backend  │       at throwDefaultError (D:\Hasnain Projects\sairify\node_modules\@smithy\smithy-client\dist-cjs\index.js:849:20)
16:12:29 │ web-backend  │       at D:\Hasnain Projects\sairify\node_modules\@smithy\smithy-client\dist-cjs\index.js:858:5
16:12:29 │ web-backend  │       at de_CommandError (D:\Hasnain Projects\sairify\node_modules\@aws-sdk\client-s3\dist-cjs\index.js:4935:14)
16:12:29 │ web-backend  │       at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
16:12:29 │ web-backend  │       at async D:\Hasnain Projects\sairify\node_modules\@smithy\middleware-serde\dist-cjs\index.js:35:20
16:12:29 │ web-backend  │       at async D:\Hasnain Projects\sairify\node_modules\@aws-sdk\middleware-sdk-s3\dist-cjs\index.js:483:18
16:12:29 │ web-backend  │       at async D:\Hasnain Projects\sairify\node_modules\@smithy\middleware-retry\dist-cjs\index.js:321:38
16:12:29 │ web-backend  │       at async D:\Hasnain Projects\sairify\node_modules\@aws-sdk\middleware-flexible-checksums\dist-cjs\index.js:286:18
16:12:29 │ web-backend  │       at async D:\Hasnain Projects\sairify\node_modules\@aws-sdk\middleware-sdk-s3\dist-cjs\index.js:109:22
16:12:29 │ web-backend  │       at async D:\Hasnain Projects\sairify\node_modules\@aws-sdk\middleware-sdk-s3\dist-cjs\index.js:136:14
16:12:29 │ web-backend  │       at async D:\Hasnain Projects\sairify\node_modules\@aws-sdk\middleware-logger\dist-cjs\index.js:33:22
16:12:29 │ web-backend  │       at async Promise.all (index 0)
16:12:29 │ web-backend  │       at async _Upload.__uploadUsingPut (D:\Hasnain Projects\sairify\node_modules\@aws-sdk\lib-storage\dist-cjs\index.js:260:22)   
16:12:29 │ web-backend  │       at async _Upload.__doConcurrentUpload (D:\Hasnain
Projects\sairify\node_modules\@aws-sdk\lib-storage\dist-cjs\index.js:330:16)
16:12:29 │ web-backend  │       at async Promise.all (index 0)
16:12:29 │ web-backend  │       at async _Upload.__doMultipartUpload (D:\Hasnain Projects\sairify\node_modules\@aws-sdk\lib-storage\dist-cjs\index.js:415:5) 
{
16:12:29 │ web-backend  │     '$fault': 'client',
16:12:29 │ web-backend  │     '$metadata': {
16:12:29 │ web-backend  │       httpStatusCode: 400,
16:12:29 │ web-backend  │       requestId: undefined,
16:12:29 │ web-backend  │       extendedRequestId: undefined,
16:12:29 │ web-backend  │       cfId: undefined,
16:12:29 │ web-backend  │       attempts: 1,
16:12:29 │ web-backend  │       totalRetryDelay: 0
16:12:29 │ web-backend  │     },
16:12:29 │ web-backend  │     body: '\nYour browser sent an invalid request.\n'
16:12:29 │ web-backend  │   },
16:12:29 │ web-backend  │   metadata: {
16:12:29 │ web-backend  │     httpStatusCode: 400,
16:12:29 │ web-backend  │     requestId: undefined,
16:12:29 │ web-backend  │     extendedRequestId: undefined,
16:12:29 │ web-backend  │     cfId: undefined,
16:12:29 │ web-backend  │     attempts: 1,
16:12:29 │ web-backend  │     totalRetryDelay: 0
16:12:29 │ web-backend  │   }
16:12:29 │ web-backend  │ }`

Links

https://github.com/aws/aws-sdk-js-v3/blob/main/lib/lib-storage/example-code/file-upload.ts

[zshzbh]

Hey @hasnainmalik-siar ,

Thanks for the feedback! However, I can't reproduce this issue.

The working code -

import { S3Client } from "@aws-sdk/client-s3";
import { Upload } from "@aws-sdk/lib-storage";
import * as fs from "fs";
import * as stream from "stream";

const client = new S3Client({
  // your region
  region: "us-east-1",
});
const fileStream = fs.createReadStream("./xxxx.png");
// const fileStream = fs.createReadStream("./xxxx.pptx");
const passThrough = new stream.PassThrough();
fileStream.pipe(passThrough);
const upload = new Upload({
  client: client,
  params: {
    Bucket: "your_bucket_name",
    Key: "key",
    Body: passThrough,
  },
});
upload.on("httpUploadProgress", (progress) => {
  console.log("Progress: ", progress);
});

await upload.done().then((x) => {
  console.log("Upload done", x);
});

Looking at your code and error messages -
This status code 400 indicates that the server was unable to understand the client’s request due to invalid syntax or missing parameters. The client should review the request and ensure that it meets the specifications of the HTTP protocol.

There's something that I want to check -

1. Environment Check:

• Which framework(s) are you using, is it a web application or just a node project or express server, etc..?
• If you're using React Native, you'll need to add a polyfill. What's your current framework?

2. AWS SDK Version:

• Could you confirm which version of the AWS JavaScript SDK you're using?

3. AWS Region Configuration:

• I notice you're using region: sfo3 - this needs to be changed to a standard AWS region format. Please use a valid AWS region code like us-west-1
  You can reference the official AWS regions list in the documentation

4. File Upload Parameters:

• In the uploadExportFileToS3(key, mimeType, file, id) function:
  • The key parameter should be your filename (e.g., "test.txt")
  • The file in Body: file should contain the actual file content. To read file content, you can use: const fileContent = await readFile("./test.txt")