Tips for verifying the response and status code in Angular 8 while uploading a file to an S3 Presigned URL and receiving a statusCode of 200

Looking to Upload a File:

// Using the pre-signed URL to upload the file
const httpOptions = {
 headers: new HttpHeaders({
 'Content-Disposition': 'attachment;filename=' + file.name + '',
 observe: 'response'
 })
};

this.httpClient.put(preSingedUrl, file, httpOptions)
.subscribe((response: HttpResponse<any>) => {
console.log(response); // The response is returning null
});

The response always shows null, even though the network tab displays a status of 200 OK.

access-control-allow-methods: GET, POST, OPTIONS
access-control-allow-origin: *
content-length: 1207
content-type: application/json
date: Tue, 25 Jun 2019 07:38:06 GMT
status: 200
strict-transport-security: 'max-age=31536000'
x-amz-apigw-id: someid
x-amzn-requestid: someid
x-amzn-trace-id: Root=someid;Sampled=1

Any suggestions on how to properly read the status "200 OK" in Angular 8 would be greatly appreciated.

typescriptamazon-s3angular8

Answer №1

The problem lies within the httpOptions variable, which is causing the response to be null.

If you are attempting to retrieve the response in the subscribe function using observe: 'response', you are mistakenly passing it as a header.

This should actually be set as a property of httpOptions.

To verify this, refer to the code snippet below from the type file http.d.ts found in the @angular/common package. It clearly shows that observe is a property.

https://i.stack.imgur.com/znGAR.png

Furthermore, in the type file http.d.ts, observe is defined as a string literal type. (For more information on string literal types, visit: https://www.typescriptlang.org/docs/handbook/advanced-types.html#string-literal-types).

Hence, observe within httpOptions needs to be cast to this specific type.

Therefore, modify the code as follows:

// upload file to the pre-signed url
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Disposition': 'attachment;filename=' + file.name + '',
     observe: 'response'
  })
};

Change it to:

// Custom type for casting
type bodyType = 'body';

// upload file to the pre-signed url
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Disposition': 'attachment;filename=' + file.name + '',
  }),
  observe: <bodyType>'response'
};

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

What separates the act of declaring a generic function from explicitly declaring a type for that very same generic function?

Here are two instances demonstrating the use of a generic function: function myGenericFunction<TFunc extends Function>(target:TFunc): string { return target.toString(); } Based on this response, this represents a declaration for a generic funct ...

typescript

Can a map key value be converted into a param object?

I have a map containing key-value pairs as shown below: for (let controller of this.attributiFormArray.controls) { attributiAttivitaMap.set(controller.get('id').value, { value: controller.get('valoreDefault').value, mandatory ...

angulartypescriptdictionary

Adding a class to a child component layout from a parent component in Angular 12 and Typescript can be achieved by using the ViewChild decorator

Incorporating the child component into the parent component is an important step in the structure of my project. The dashboard component serves as the child element, while the preview component acts as the parent. Within the parent (preview) component.htm ...

jquerycssangulartypescript

Sharing data between two Angular 2 component TypeScript files

I'm facing a scenario where I have two components that are not directly related as parent and child, but I need to transfer a value from component A to component B. For example: In src/abc/cde/uij/componentA.ts, there is a variable CustomerId = "sss ...

javascriptangulartypescriptweb-frontend

In Angular 12, encountering the error "Unable to bind to 'formGroup' as it is not a recognized property of 'form'" is not uncommon

Encountering a problem that seems to have been addressed previously. Error: Can't bind to 'formGroup' since it isn't a known property of 'form'. I followed the steps by importing ReactiveFormsModule and FormsModule in the req ...

angulartypescriptspring-boot

When it comes to rendering components in React using multiple ternary `if-else` statements, the question arises: How can I properly "end" or "close" the ternary statement?

I have developed a straightforward component that displays a colored tag on my HTML: import React, {Component} from 'react'; import "./styles.scss"; interface ColorTagProps { tagType?: string; tagText?: string; } /** * Rende ...

reactjstypescript

Having difficulties testing the Angular HTTP interceptor with Karma and Jasmine

Testing an http interceptor has been quite the challenge for me. Despite having my token logged in the console and ensuring that the request URL matches, I still can't figure out why it's not working with the interceptor in place. Interestingly, ...

angularunit-testingtypescriptionic3karma-jasmine

Tips for locating the index of a substring within a string with varying line endings using Typescript

I am faced with the task of comparing two strings together. abc\r\ndef c\nde My goal is to determine the index of string 2 within string 1. Using the indexOf() method is not an option due to different line endings, so I require an altern ...

javascripttypescriptstringsubstringline-endings

Does a typescript module augmentation get exported by default when included in a component library?

Utilizing material-ui and Typescript, I developed a component library. By implementing Typescript module augmentation, I extended the theme options as outlined in their documentation on theme customization with Typescript. // createPalette.d.ts/* eslint-di ...

reactjstypescriptmaterial-uimodule-augmentation

Observable<void> fails to trigger the subscriber

I am currently facing a challenge with implementing a unit test for an Observable in order to signal the completion of a process. While there is no asynchronous code in the logout function yet, I plan to include it once the full logic is implemented. The m ...

javascriptangulartypescriptunit-testingobservable

The rapid execution of code causing an observable race condition

When exporting a CSV file in my code, I encounter a race condition while trying to modify some data before the export. The issue is that the id gets set correctly, but the number only updates after the method is called a second time. I believe the proble ...

angulartypescriptrxjs

Looking for a JavaScript library to display 3D models

I am looking for a JavaScript library that can create 3D geometric shapes and display them within a div. Ideally, I would like the ability to export the shapes as jpg files or similar. Take a look at this example of a 3D cube: 3d cube ...

javascriptreactjstypescript3drender

What are the best practices for utilizing an array of routes?

I'm new to working with react but I noticed something strange. My routes are currently set up like this: <Main> <Route exact path="/home" component={Home} /> <Route exact path="/home1" com ...

javascriptreactjstypescriptreact-router-dom

The initial values of Typescript class members are merged directly into the class constructor

This issue has been well documented (check out Initializing variables inline during declaration vs in the constructor in Angular with TS on SO for reference), but it can lead to challenging memory problems. Take a look at the example below class Bar { ...

typescriptclassmemoryscopes

Determining the appropriate scenarios for using declare module and declare namespace

Recently, I came across a repository where I was exploring the structure of TypeScript projects. One interesting thing I found was their typings file: /** * react-native-extensions.d.ts * * Copyright (c) Microsoft Corporation. All rights reserved. * Li ...

typescript

Tips on transferring a child Interface to a parent class

Here is my code snippet: LocationController.ts import {GenericController} from './_genericController'; interface Response { id : number, code: string, name: string, type: string, long: number, lat: number } const fields ...

node.jstypescriptexpress

What steps should I take to plan a collaborative code-sharing project?

As I develop various applications utilizing a core framework of my own creation, I am looking for a way to easily manage updates across all these applications. I have structured the code by creating a GitHub project where the main branch consists of the co ...

typescriptgitmoduleversion-control

Tips for integrating Reactjs with Chessboard.js

Recently, I stumbled upon chessboardjs (https://chessboardjs.com/) as a way to hone my React coding skills. However, I hit a roadblock while trying to implement a simple example of displaying the chess board in my application. The documentation instructed ...

reactjstypescriptchessboard.js

Guide on Linking a Variable to $scope in Angular 2

Struggling to find up-to-date Angular 2 syntax is a challenge. So, how can we properly connect variables (whether simple or objects) in Angular now that the concept of controller $scope has evolved? import {Component} from '@angular/core' @Comp ...

javascriptangulartypescript

Guide on converting a JSON object into a TypeScript Object

I'm currently having issues converting my JSON Object into a TypeScript class with matching attributes. Can someone help me identify what I'm doing wrong? Employee Class export class Employee{ firstname: string; lastname: string; bi ...

jsonangulartypescript