The AWS S3 CreatePresignedPost function is failing to generate certain essential fields

Currently, I am facing an issue with the generation of a presigned post for allowing browser privileges to upload/delete a specific file from a bucket. It appears that the createPresignedPost function is not populating some of the required fields, whereas getSignedUrl works fine.


const signedUrl = await new Promise<PresignedPost>( (resolve, reject) => {
this.s3.createPresignedPost({
Bucket: this.env.config.s3.buckets.images,
Fields: { key },
Conditions: [
["content-length-range", 0, 10 * 1024 * 1024]
],
Expires: 3600,
}, (err, preSigned) => { if (err) { reject(err) } else { resolve(preSigned) }});
});

// The code snippet below functions properly but lacks support for object deletion and setting maximum file size constraints.

// const rawUrl = new URL(await this.s3.getSignedUrlPromise('putObject', {
// Bucket: this.env.config.s3.buckets.images,
// Key: key,
// Expires: 3600,
// }));
//
// const signedUrl = {
// url: rawUrl.origin + rawUrl.pathname,
// fields: Object.fromEntries(Array.from(rawUrl.searchParams.entries()))
// };

The generated output by createPresignedPost contains:

{ 
url: 'https://s3.eu-west-3.amazonaws.com/xxx-images',
fields: { 
key: 'incoming/ae83pfxu7kf4dfdv4hbv...' // truncated for brevity
bucket: 'xxx-images',
'X-Amz-Algorithm': 'AWS4-HMAC-SHA256',
// more parameters
}
}

Attempting to PUT a file using these parameters results in an AuthorizationQueryParametersError due to missing necessary information such as X-Amz-SignedHeaders and X-Amz-Expires.

The previous API call seems to include the missing parameters 'X-Amz-SignedHeaders' and 'X-Amz-Expires'. Can anyone point out what mistake I might be making?

Answer №1

To properly generate the URL, it is recommended to utilize the HTTP method POST rather than PUT when using the function createPresignedPost.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Importing partial peer dependencies in Npm

I have a custom npm package with a peer dependency on element-ui. This package is importing the Pagination component from element-ui: import {Pagination} from 'element-ui';' However, when I import this component in my project, the entire ...

Retrieve Unformatted Text with CKEditor5

I am familiar with how to retrieve data using the CKEditor5 API as outlined in the documentation and on another discussion post on StackOverflow. However, I am encountering difficulties when attempting to retrieve plain text from the editor. The code I ha ...

Storing string variables within an array and subsequently evaluating the similarity of each variable's value with those stored within the array

I am currently working on an Angular page which consists of input fields where I capture and store values in variables within the .ts file. The entered values are subject to change, so hard-coding them is not feasible. The variables that I use for storing ...

Observing the Transformation When Employing *ngIf or *ngSwitchCase in Angular 2

Can someone lend a hand? I've run into an issue where my custom JavaScript function is not working after using *ngIf or *ngSwitchCase to change the view. Any suggestions on how to resolve this would be greatly appreciated. ...

Issue with debounce function failure in handling onChange event for a controlled input field

Currently, I am experimenting with the Material UI React framework. I recently moved my application to Material UI using TypeScript. However, I seem to be encountering an issue with the debounce function when used in the onChange handler for input fields. ...

There was a problem encountered while attempting to install the 'font-awesome' package

After attempting to install Font Awesome using the command: npm install --save font-awesome I encountered errors with npm: npm ERR! path C:\Users\a\Desktop\Code\faTest\node_modules\font-awesome npm ERR! code ENOENT npm ...

Use the map function to find the highest number within each array

function each(collection, func) { if (Array.isArray(collection)) { for (var i = 0; i < collection.length; i++) { func(collection[i], i); } } else { for (var key in collection) { func(collection[key], key); } } } functi ...

Choose multiple children and grandchildren by checking the root checkbox multiple times

jquery/javascript $('.ic_parent').change(function(){ var id = $(this).attr('value') while (id.length >0){ if ($(this).attr('checked')) { $('#update_ics_table').find('input:checkbox[id = "child- ...

Determine the Angular object's type even if it may be undefined

Currently diving into Angular and looking to create a method that can determine if an object is of type Dog (identified by a woof property). This is the code snippet I have put together so far: export class SomeClass { public animal?: Dog | Cat; ... ...

Exploring Firestore: Tips for Locating an Email Across Multiple Documents

My task is to locate the ID of a document by comparing the email contained in each document. Below is the database I am working with: https://i.sstatic.net/PLElW.png As an example, let's say I have the email "[email protected]", but ...

Expanding the capabilities of the Express Request Object using TypeScript

Looking to enhance the Request object of express with a new property To start, create a middleware that verifies the session and token containing the companyId import { verifyToken } from '../utils/jwt/jwt'; declare module 'express-serve-s ...

Looking to dynamically modify the preselected rows in an Angular Slickgrid grid option when a button is clicked by calling a function (check)

When the button is clicked, certain specific rows are selected using a preselected grid option in Angular Slickgrid. However, if I do this, the preselected row in the grid options changes but it does not display properly. Please assist me. Typescript File ...

I am attempting to pass input values from a parent component to a child component in order to display them, utilizing the @input decorator

How can I pass input values from a form in the parent component to be displayed in the child component using @Input? Login Form (Parent): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> & ...

Having trouble converting the JSON object received from the server into the necessary type to analyze the data

I am new to angular and struggling with converting a JSON object from the server into a custom datatype to render in HTML using ngFor. Any help would be appreciated as I have tried multiple approaches without success. Apologies for the simple HTML page, I ...

Can someone explain the significance of this error message in Redux - Toolkit?

Encountered this error message while working with Redux-Toolkit, could someone explain its meaning? name:"ConditionError" message:"Aborted due to condition callback returning false." ...

Understanding ReactJs component syntax: Exploring the nuances and distinctions

Currently diving into the world of Reactjs and working on creating a basic component. I'm puzzled about why this particular syntax for a component: import React, { Component } from 'react'; export default class AboutPage extends Component { ...

What is the best way to customize image transparency using javascript?

Looking to create a webpage that shows an image for a specified duration before smoothly transitioning to another image that includes a clickable link. Wondering how to accomplish this using javascript? I am aware that it can be done with Flash, but it mu ...

Storing TypeScript functions as object properties within Angular 6

I am working on creating a simplified abstraction using Google charts. I have implemented a chartservice that will act as the abstraction layer, providing options and data-source while handling the rest (data retrieved from a REST API). Below is the exist ...

Creating a jquery DataTable from HTML generated by angular $sce can be done by following these steps

I have created an Angular controller that takes data and generates an HTML table from it. The generated table is being displayed on the page. Now, I want to apply jQuery data tables using that scope variable. The variable contains the HTML code of the tabl ...

Having trouble retrieving information from the server using ajax, javascript, jquery, and php

I am currently facing an issue with sending data retrieved from a jQuery call and attempting to save it to a server file using PHP. function getSVG(){ svghead = svghead + $('#test').html(); $.ajax({ type:"POST", da ...