Submit a pdf file created with html2pdf to an S3 bucket using form data

Currently, I have the following script:

exportPDF(id) {
const options = {
  filename: 'INV' + id + '.pdf',
  image: { type: 'jpeg', quality: 0.98 },
  html2canvas: {
    scale: 2, dpi: 300,
    letterRendering: true,
    useCORS: true
  },
  jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
}
var element = document.getElementById('export-content');
var d = html2pdf().from(element).set(options).save();

const formData: FormData = new FormData();
formData.append('file', d);

// Service for uploading file to s3 bucket
this._uploadService.upload('invoice', formData).subscribe(res => {
  console.log(res);
}, (error: any) => { 
  console.log(error, 'error');
});}

I need assistance in storing the generated pdf file to an S3 bucket and then sending it as an email attachment from S3 without storing any blob data in the database. I just want to store the S3 URL in the database. Any help would be appreciated.

While I found a solution by converting the blob string to a file, I am facing issues with storing the response string in a global variable for conversion and sending via an API call.

this.blobString: any;
html2pdf().from(element).set(options).toPdf().output('datauristring').then(function (res) {
  this.blobString = res;

 // Service for uploading file to s3 bucket
 this._uploadService.upload('invoice', this.blobString).subscribe(res => {
   console.log(res);
 }, (error: any) => { 
   console.log(error, 'error');
 });

});
console.log(this.blobString);

When checking the console, I see "undefined." How can I set Worker data globally?

Answer №1

If you're dealing with promises, make sure your console.log waits for the promise response before triggering. Adjust your code to this:

let blobString: any;
html2pdf().from(element).set(options).toPdf().output('datauristring').then(function (res) {
  blobString = res;
  console.log(blobString);
});

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

Having trouble mocking Node fs Modules using Sinon

I am facing an issue with mocking the promises methods of the node fs module in my code. When my appData.ts file is executed, it calls the actual fs.promises.mkdir method instead of the mock function defined in \__tests__/appData.test.js. I suspect ...

Using Typescript Type Guard will not modify the variable type if it is set in an indirect manner

TL;DR Differentiation between link1 (Operational) vs link2 (not functional) TypeGuard function validateAllProperties<T>(obj: any, props: (keyof T)[]): obj is T { return props.every((prop) => obj.hasOwnProperty(prop)) } Consider a variable ms ...

Can SystemJS, JetBrains IntelliJ, and modules be combined effectively?

Looking for some clarification on the functionality of module includes and systemJS within an Angular2 app structure. I have set up a basic Angular2 app with the following layout: -app |-lib (contains shims and node libraries) |-components |-app |-app. ...

I'm attempting to retrieve mlab data in the console using node.js, but unfortunately encountering an error

I came across this helpful YouTube tutorial:https://www.youtube.com/watch?v=PFP0oXNNveg&t=460s. I followed the steps outlined in the video and made necessary code adjustments based on current updates found through a Google search (to resolve errors enc ...

Monitor the status of your Angular CLI build with real-time notifications

Encountered an interesting issue while trying to integrate the 'webpack-notifier' plugin into a new Angular 7 application. The goal was to have balloon notifications for build failures when running 'ng build --watch' in the console. TL ...

Combine the values in the array with the input

I received some data from the back-end which is being written to a form, and it's in the form of an array of objects Below is the code snippet: this.companyDetailsForm = new FormGroup({ directors : new FormControl(response?.companyDirectors) ...

Error with dateAdapter targeting a particular language

Currently facing an issue with the Angular material date picker when using a specific language - ka. Here is an example of the problem: constructor( private dateAdapter: DateAdapter<Date>, public noticesService:NoticesService, public d ...

One efficient way to iterate through an object and modify its values in a single line of code

_shop: { [key: string]: string[] } = { fruits: ['Apple', 'Orange'], vegetables: ['Tomato', 'Onions'] } Can a one-liner code be used to modify the values of _shop and return it in a specific format? The desired outp ...

Encountering memory leaks and displaying repetitive data due to having two distinct observables connected to the same Firestore

I am currently utilizing @angular/fire to retrieve data from firestore. I have two components - one serving as the parent and the other as the child. Both of these components are subscribing to different observables using async pipes, although they are bas ...

Make TypeScript parameter optional if it is not supplied

I am working with an interface that defines scenes and their parameters: export interface IScene<R extends string> { path: R; params?: SceneParams; } The SceneParams interface looks like this: export interface SceneParams { [key: string]: s ...

Challenge your TypeScript skills: convert snake_case to camelCase and back again

I am looking to develop a Typescript function that can deeply traverse a plain object and convert all snake_case keys to camelCase. Additionally, I need a function that can convert camelCase keys to snake_case throughout the object. While implementing thi ...

Utilizing Next.js and React to interact with Open AI through API requests

I'm currently experimenting with the OpenAI API to develop a chatbot using React, TypeScript, and Next.js. I am facing an issue where clicking the send button in the UI does not trigger any action. Even after adding console.log statements, nothing sho ...

Tips on Calculating the Number of Object Properties and Presenting Each Value Individually on a Dynamic Button with Click Event Attached

When it comes to displaying dynamic data with markers on a map, everything works fine up until this point. However, I've encountered some issues that I'm currently stuck on and not sure how to proceed. Dynamic data: { "page": 2, "data" ...

The build process encounters an issue with initializing Sentry's Vuejs (with Typescript) Integration

While attempting to build my (vue-cli-3 based) Vuejs project using gitlab-runner on my local machine, an error occurs: 98% after emitting CopyPlugin ERROR Failed to compile with 1 errors ... Property 'util' is missing in type 'VueConstruct ...

Unusual Type Inference in Typescript {} when Evaluating Null or Undefined

Upon upgrading from typescript 4.9.3 to 5.0.2, we encountered an error when asserting types. Can someone explain why the function "wontWorking" is not functioning correctly? I expected this function to infer v as Record<string, any>, but instead it ...

Using generics in Typescript, transform an array of strings into various types and values

Enhanced with coding norms I have obtained an array of fruit values: const fruitsArray = ["apple", "banana", "peach"] as const; Utilizing this array as a foundation, I generated types and values in the following manner: type ...

An error occurs in TypeScript when attempting to reduce a loop on an array

My array consists of objects structured like this type AnyType = { name: 'A' | 'B' | 'C'; isAny:boolean; }; const myArray :AnyType[] =[ {name:'A',isAny:true}, {name:'B',isAny:false}, ] I am trying ...

Submitting a POST request from a Typescript Angular 2 application to a C# MVC backend

Having trouble passing a payload using Typescript service in an http.post request Here is my TypeScript code: saveEdits(body: Object): Observable<Animal[]> { let bodyString = JSON.stringify(body); let headers = new Headers({ 'Content- ...

Is it possible to invoke a function exclusively on the center item within an ngx-owl-carousel?

Is there a way to call a function only when an element is in the center of a slider? This is my HTML: <owl-carousel-o [options]="customOptions"> <ng-container *ngFor="let slide of slides"> <ng-template carous ...

Is there an Angular counterpart to Vue's <slot/> feature?

Illustration: Main component: <div> Greetings <slot/>! </div> Subordinate Component: <div> Planet </div> Application component: <Main> <Subordinate/> </Main> Result: Greetings Planet! ...