Creating a multipart/form-data POST request in Angular2 and performing validation on the input type File

Question

Creating a multipart/form-data POST request in Angular2 and performing validation on the input type File

I am working on sending an image (base64) via a POST request and waiting for the response. The POST request should have a Content-Type of multipart/form-data, and the image itself should be of type image/jpg.

This is what the POST request should look like:

POST https://www.url... HTTP/1.1
Content-Type: multipart/form-data; boundary=-------------------------acebdf13572468
User-Agent: Fiddler
Host: www.host.com
Content-Length: 199640

---------------------------acebdf13572468
Content-Disposition: form-data; name="fieldNameHere"; filename="Nikon Digital SLR Camera D3100 14.2MP 2.jpg"
Content-Type: image/jpeg

The actual binary image data will be the content body.

I'm trying to use the Http Post method in Angular 2, but I'm unsure about how to properly structure the request. Here is my current code snippet:

let body = atob(imageData);
let headers = new Headers({'Content-Type': 'multipart/form-data'});
let options = new RequestOptions({headers: headers});

this._http.post(url, body, options)
.map(res=>{
  //do stuff
});

While this code appears to be missing some crucial parts, particularly regarding the Content-Disposition and Type of the binary image data, I am uncertain about how to proceed in order to include these details.

javascript angular typescript post angular2-forms

Answer 1

Answer №1

Customized form template

<form id="custom-form" name="file" [formGroup]="FileFormGroup"(submit)="addFrom($event, FileFormGroup)" method="post">  

   <input spellcheck="true" formControlName="Demo" name="Demo" type="text"/>
   <input type="file" accept="image/*" id="file" name="File"/>
   <input formControlName="File" type="hidden"/>

</form>

JavaScript Code (Ts)

   import {FormGroup, FormBuilder, FormControl, Validators} from '@angular/forms';

   import {ValidatorFn} from '@angular/forms/src/directives/validators';

   public FileFormGroup: FormGroup; /* initializing variable */

   constructor(public fb: FormBuilder) {}

   ngOnInit() {
      this.FileFormGroup = this.fb.group({
      Demo: ["", Validators.required],
      File: ["", this.fileExtension({msg: 'Please upload valid Image'})]
     });
   }

   public addFrom(event: Event, form: FormGroup): void {

   if(form.valid && form.dirty) {

   let formTemp: HTMLFormElement <HTMLFormElement>document.querySelector('#custom-form');

   let formData: FormData = new FormData(formTemp);

   let xhr: XMLHttpRequest = this.foo(formData);

    xhr.onreadystatechange = () => {
      if(xhr.readyState === 4) {
        if(xhr.status === 201) {
           console.log("Success");
        } else {
           console.log("Error");
        }
      }
    }
  }}

    // Ajax function
     public Foo(formData){
         let url: Foo;
         let xhr: XMLHttpRequest = new XMLHttpRequest();
         xhr.open('POST', url, true);

         // enctype For Multipart Request
          xhr.setRequestHeader("enctype", "multipart/form-data");

          // Cache control headers for IE bug fixes
          xhr.setRequestHeader("Cache-Control", "no-cache");
          xhr.setRequestHeader("Cache-Control", "no-store");
          xhr.setRequestHeader("Pragma", "no-cache"); 

          xhr.send(formData);
          return xhr;
     }

     /* Function to validate file extension */

  public fileExtension(config: any): ValidatorFn {
    return (control: FormControl) => {

      let urlRegEx: RegExp = /\.(jpe?g|png|gif)$/i;

      if(control.value && !control.value.match(urlRegEx)) {
        this.deleteImg = false;
        return {
          invalidUrl: config.msg
        };
      } else {
        return null;
      }
    };
  }

Answer 2

Customized form template

<form id="custom-form" name="file" [formGroup]="FileFormGroup"(submit)="addFrom($event, FileFormGroup)" method="post">  

   <input spellcheck="true" formControlName="Demo" name="Demo" type="text"/>
   <input type="file" accept="image/*" id="file" name="File"/>
   <input formControlName="File" type="hidden"/>

</form>

JavaScript Code (Ts)

   import {FormGroup, FormBuilder, FormControl, Validators} from '@angular/forms';

   import {ValidatorFn} from '@angular/forms/src/directives/validators';

   public FileFormGroup: FormGroup; /* initializing variable */

   constructor(public fb: FormBuilder) {}

   ngOnInit() {
      this.FileFormGroup = this.fb.group({
      Demo: ["", Validators.required],
      File: ["", this.fileExtension({msg: 'Please upload valid Image'})]
     });
   }

   public addFrom(event: Event, form: FormGroup): void {

   if(form.valid && form.dirty) {

   let formTemp: HTMLFormElement <HTMLFormElement>document.querySelector('#custom-form');

   let formData: FormData = new FormData(formTemp);

   let xhr: XMLHttpRequest = this.foo(formData);

    xhr.onreadystatechange = () => {
      if(xhr.readyState === 4) {
        if(xhr.status === 201) {
           console.log("Success");
        } else {
           console.log("Error");
        }
      }
    }
  }}

    // Ajax function
     public Foo(formData){
         let url: Foo;
         let xhr: XMLHttpRequest = new XMLHttpRequest();
         xhr.open('POST', url, true);

         // enctype For Multipart Request
          xhr.setRequestHeader("enctype", "multipart/form-data");

          // Cache control headers for IE bug fixes
          xhr.setRequestHeader("Cache-Control", "no-cache");
          xhr.setRequestHeader("Cache-Control", "no-store");
          xhr.setRequestHeader("Pragma", "no-cache"); 

          xhr.send(formData);
          return xhr;
     }

     /* Function to validate file extension */

  public fileExtension(config: any): ValidatorFn {
    return (control: FormControl) => {

      let urlRegEx: RegExp = /\.(jpe?g|png|gif)$/i;

      if(control.value && !control.value.match(urlRegEx)) {
        this.deleteImg = false;
        return {
          invalidUrl: config.msg
        };
      } else {
        return null;
      }
    };
  }

Answer 3

Answer №2

Referencing a similar inquiry found here: Angular 2 - Post File to Web API

As of now, Angular2 does not provide built-in support for multipart/form-data POST requests. To address this limitation, I opted to utilize jQuery for the implementation and subsequently convert it into an RxJs Observable (subject) in order to align with the expected type for http.post function in Angular2:

// Converting base64 representation of JPEG to blob
let imageData = imageString.split(',')[1];
let dataType = imageString.split('.')[0].split(';')[0].split(':')[1];
let binaryImageData = atob(imageData);
let data = new FormData();
let blob = new Blob([binaryImageData], { type: dataType })
data.append('file', blob);
let deferred = $.ajax({
  url: this._imageAPIBaseUrl,
  data: data,
  cache: false,
  contentType: false,
  processData: false,
  type: 'POST'
});
let observable = new AsyncSubject();

// Upon completion of Deferred, emit an item through the Observable
deferred.done(function () {

  // Convert arguments to array
  let args = Array.prototype.slice.call(arguments);

  // Trigger observable next with the same parameters
  observable.next.apply(observable, args);

  // Mark the Observable as completed to signify no more items
  observable.complete();
});

// In case of error in Deferred, propagate an error through the Observable
deferred.fail(function () {

  // Convert arguments to array
  let args = Array.prototype.slice.call(arguments);

  // Call the observable error with the args array
  observable.error.apply(observable, args);
  observable.complete();
});

return observable;

Answer 4

Referencing a similar inquiry found here: Angular 2 - Post File to Web API

As of now, Angular2 does not provide built-in support for multipart/form-data POST requests. To address this limitation, I opted to utilize jQuery for the implementation and subsequently convert it into an RxJs Observable (subject) in order to align with the expected type for http.post function in Angular2:

// Converting base64 representation of JPEG to blob
let imageData = imageString.split(',')[1];
let dataType = imageString.split('.')[0].split(';')[0].split(':')[1];
let binaryImageData = atob(imageData);
let data = new FormData();
let blob = new Blob([binaryImageData], { type: dataType })
data.append('file', blob);
let deferred = $.ajax({
  url: this._imageAPIBaseUrl,
  data: data,
  cache: false,
  contentType: false,
  processData: false,
  type: 'POST'
});
let observable = new AsyncSubject();

// Upon completion of Deferred, emit an item through the Observable
deferred.done(function () {

  // Convert arguments to array
  let args = Array.prototype.slice.call(arguments);

  // Trigger observable next with the same parameters
  observable.next.apply(observable, args);

  // Mark the Observable as completed to signify no more items
  observable.complete();
});

// In case of error in Deferred, propagate an error through the Observable
deferred.fail(function () {

  // Convert arguments to array
  let args = Array.prototype.slice.call(arguments);

  // Call the observable error with the args array
  observable.error.apply(observable, args);
  observable.complete();
});

return observable;

Answer 5

Answer №3

Take a look at this example in action (not created by me): https://plnkr.co/edit/ViTp47ecIN9kiBw23VfL?p=preview

1 - Ensure not to alter or specify the Content-Type header

2 - Utilize FormData to transmit parameters

3 - Make sure to include the following snippet in app.module.ts:

import { HttpModule, RequestOptions, XHRBackend, ConnectionBackend, Http, Request, RequestOptionsArgs, Response, Headers } from '@angular/http';
@Injectable()
export class HttpInterceptor extends Http {
    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) 
    {
        super(backend, defaultOptions);
        defaultOptions.headers = new Headers();
        defaultOptions.headers.append('Content-Type', 'application/json');
}

Answer 6

Take a look at this example in action (not created by me): https://plnkr.co/edit/ViTp47ecIN9kiBw23VfL?p=preview

1 - Ensure not to alter or specify the Content-Type header

2 - Utilize FormData to transmit parameters

3 - Make sure to include the following snippet in app.module.ts:

import { HttpModule, RequestOptions, XHRBackend, ConnectionBackend, Http, Request, RequestOptionsArgs, Response, Headers } from '@angular/http';
@Injectable()
export class HttpInterceptor extends Http {
    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) 
    {
        super(backend, defaultOptions);
        defaultOptions.headers = new Headers();
        defaultOptions.headers.append('Content-Type', 'application/json');
}

Creating a multipart/form-data POST request in Angular2 and performing validation on the input type File

Answer №1

Answer №2

Answer №3

Similar questions

Utilize Express Node to display API information on HTML pages using Handlebars template

The CSS class is not properly implemented in the React component

Leveraging highland.js for sequentially executing asynchronous functions while maintaining references to the initial stream data

React beautiful dnd and Material UI list encountering compatibility problem

Managing iframes in React using reference methods

Receiving no communication from Express Router

The transition() function in Angular 2.1.0 is malfunctioning

What's the reason for the alert not functioning properly?

What's the best way to alter an HTTP request response and conveniently retrieve it before sending it back from an Observable?

How can I transfer Gmail message using express rendering parameters?

The checkbox is not showing the check mark accurately

Display open time slots in increments of 15 minutes on Fullcalendar

Issue with React Redux: Store dispatch not causing component update

Alter the content of a div depending on the values of three different elements

Looking to retrieve selections when the inputValue changes in react-select?

Configuration of injected services in IONIC 2

Is there a way to add text to HTML code using CKEditor?

Issue with mat-selection-list search filter losing selections upon searching

Encountering difficulty retrieving host component within a directive while working with Angular 12

Selecting an option from the knockout dropdown menu