Uploading Files with Angular 2 using AJAX and Multipart Requests

Question

Uploading Files with Angular 2 using AJAX and Multipart Requests

I am currently working with Angular 2 and Spring MVC. At the moment, I have an Upload component that sends an AJAX request to the Spring backend and receives a response containing parsed data from a .csv file.

export class UploadComponent {

uploadFile: function(){

var resp = this;

var data = $('input[type="file"]')[0].files[0];
this.fileupl = data;
var fd = new FormData();
fd.append("file", data);
$.ajax({
url: "uploadFile",
type: "POST",
data: fd,
processData: false,
contentType: false,
success: function(response) {
resp.response = response;
},
error: function(jqXHR, textStatus, errorMessage) {
console.log(errorMessage);
}
});
};
}

Although this solution works and provides a valid response, I'm curious if there is a more angular 2 approach to pass files to Spring and handle the response. I've been exploring the option of creating an injectable service and using subscribe, but I'm facing challenges in receiving the response.

ajax spring-mvc post typescript angular

Answer 1

Answer №1

Here's how I tackled the task:

import { Component, Injectable } from '@angular/core';
import { Observable} from 'rxjs/Rx';
const URL = 'myuploadURL';

@Component({
  selector: 'upload',  
  templateUrl: 'upload.component.html',
  styleUrls: ['upload.component.css']
})

export class UploadComponent {

filetoUpload: Array<File>;
response: {};

constructor() {
  this.filetoUpload = [];
}

upload() {
        this.makeFileRequest(URL, [], this.filetoUpload).then((result) => {           
            this.response = result;            
        }, (error) => {
            console.error(error);
        });
    }
fileChangeEvent(fileInput: any){
        this.filetoUpload = <Array<File>> fileInput.target.files;
    }

    makeFileRequest(url: string, params: Array<string>, files: Array<File>) {
        return new Promise((resolve, reject) => {
            let formData: any = new FormData();
            let xhr = new XMLHttpRequest();
            for(let i =0; i < files.length; i++) {
                formData.append("file", files[i], files[i].name);                
            }            

            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        resolve(JSON.parse(xhr.response));                        
                    } else {
                        reject(xhr.response);
                    }
                }
            };
            xhr.open("POST", url, true);
            xhr.send(formData);
        });
    }

}

To display the response in my HTML, I can do the following:

<div class="input-group">
                <input type="file" id="file" name="file" placeholder="select file" (change)="fileChangeEvent($event)">

                <input type="submit" value="upload" (click)="upload()" class="btn btn-primary">
        </div>


    <div *ngIf="response">

    <div class="alert alert-success" role="alert">
    <strong>{{response.myResponseObjectProperty | number}}</strong> returned successfully!
    </div>

This setup supports multiple file uploads and I turned it into an injectable service showcased in this plunkr example: https://plnkr.co/edit/wkydlC0dhDXxDuzyiDO3

Answer 2

Here's how I tackled the task:

import { Component, Injectable } from '@angular/core';
import { Observable} from 'rxjs/Rx';
const URL = 'myuploadURL';

@Component({
  selector: 'upload',  
  templateUrl: 'upload.component.html',
  styleUrls: ['upload.component.css']
})

export class UploadComponent {

filetoUpload: Array<File>;
response: {};

constructor() {
  this.filetoUpload = [];
}

upload() {
        this.makeFileRequest(URL, [], this.filetoUpload).then((result) => {           
            this.response = result;            
        }, (error) => {
            console.error(error);
        });
    }
fileChangeEvent(fileInput: any){
        this.filetoUpload = <Array<File>> fileInput.target.files;
    }

    makeFileRequest(url: string, params: Array<string>, files: Array<File>) {
        return new Promise((resolve, reject) => {
            let formData: any = new FormData();
            let xhr = new XMLHttpRequest();
            for(let i =0; i < files.length; i++) {
                formData.append("file", files[i], files[i].name);                
            }            

            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        resolve(JSON.parse(xhr.response));                        
                    } else {
                        reject(xhr.response);
                    }
                }
            };
            xhr.open("POST", url, true);
            xhr.send(formData);
        });
    }

}

To display the response in my HTML, I can do the following:

<div class="input-group">
                <input type="file" id="file" name="file" placeholder="select file" (change)="fileChangeEvent($event)">

                <input type="submit" value="upload" (click)="upload()" class="btn btn-primary">
        </div>


    <div *ngIf="response">

    <div class="alert alert-success" role="alert">
    <strong>{{response.myResponseObjectProperty | number}}</strong> returned successfully!
    </div>

This setup supports multiple file uploads and I turned it into an injectable service showcased in this plunkr example: https://plnkr.co/edit/wkydlC0dhDXxDuzyiDO3

Uploading Files with Angular 2 using AJAX and Multipart Requests

Answer №1

Similar questions

Determining the location of an input field in Angular

What steps should I take to implement Role-Based Access Control in my Spring/React application?

Showing PHP array in the JavaScript console

The onclick handler fails to function following the injection of html using jquery AJAX

Develop a custom library within an Angular project without using Angular framework

Include a header in the API HTTP call for Angular 2 and Ionic 2

How do I use [(ngModel)] to set custom multiple select with 'selected' options with Angular and Materialize CSS?

Guidelines for implementing more rigorous type checks in TypeScript:

Performing database insertions iteratively using a foreach loop and executing various functions in a specific order

File handling in Angular 2 using Typescript involves understanding the fundamental syntax for managing files

Different categories combined into a singular category

"Encountering a challenge with accessing the class or id of an HTML element following the retrieval of data from an

What could be causing the ExcelJs plugin to malfunction in Internet Explorer 11?

What are some strategies for speeding up CRUD operations in a Django app that uses Ajax and Json? Is the sluggishness related to handling 7000 records, and if so, what steps can be taken

What is the best way to simultaneously test/send multiple (simulated) ajax-requests to a (node.js) server?

Issues with implementing routing children in Angular 8

How can I adjust a number using a shifter in JavaScript?

Issue encountered during unit testing: "Error occurred: 'Uncaught (in promise) SyntaxError: Unexpected token o in JSON at position 1'"

RxJS pipe operation ignoring observable

"Implementing a feature in Angular to automatically include a blank mat-option in all non-required mat-select elements