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

Validating dates using JQuery within a specific range of dates

The input field malfunctioned after the clear button was pressed

The node-transmission package seems to be malfunctioning

Error: No default Firebase App named '[DEFAULT]' exists. Please remember to call Firebase App.initializeApp() to create the app (app/no-app). This issue is located at the app

When I click on the md-select element, a superfluous "overflow-y: scroll;" gets added to the <body> of my webpage

What is the best way to notify the JSON code below using jQuery?

Stop the Bootstrap 5 accordion from expanding when the spacebar is pressed in the header text input

Do the values returned by window.screen.width and height represent CSS pixels or physical screen pixels?

Acquire a portion of a string with JavaScript or jQuery

"Interact with JSON data using AngularJS and JavaScript by clicking a button to edit

I need the title to be filled with the input data and the content to be filled with the textarea data

The unexpected token "[ ]" was encountered while assigning a numerical value to an array

Is it recommended to use separate Controllers for each tab in Angular JS to load the pane?

Looking to disable the back button in the browser using next.js?

Using Regular Expressions: Ensuring that a specific character is immediately followed by one or multiple digits

Encountering an issue with a loop in my jQuery function - any solutions?

Stop repeated form submissions in Angular using exhaust map

How should a successful post request be properly redirected in React?

Retrieve the attribute values of an element in Angular after utilizing a template

The click event that is dynamically added is triggered multiple times