Get response from file upload

Topic: Get response from file upload

rctoone pro asked 7 years ago

Is there anyway to subscribe or get the response from the File Upload? I am not sure how to pull that from the event?

startUpload(): void {
        const event: UploadInput = {
        type: 'uploadAll',
        url: '/upload',
        method: 'POST',
        data: { foo: 'bar' },
        concurrency: 1
        }

        this.uploadInput.emit(event);
    }

Add comment

Witold Tkaczyk free answered 7 years ago

0 0 Best answer

<p>Hello <a href="https://mdbootstrap.com/support/?user=rctoone">rctoone</a>,</p>
<p>you can do this using ng2-file-upload.Below is what it should looks like:</p>
<pre>import { Component } from '@angular/core';
import {FileUploader, FileItem, ParsedResponseHeaders} from "ng2-file-upload";
@Component({
    selector: 'upload-file',
    template: '<input type="file" ng2FileSelect [uploader]="uploader">',
})
export class UploadFileComponent {
    uploader:FileUploader;
    ngOnInit(): void {
        this.uploader = new FileUploader({
            url: 'http://url.to/upload',
            headers: [{name:'Accept', value:'application/json'}],
            autoUpload: true,
        });
        this.uploader.onErrorItem = (item, response, status, headers) => this.onErrorItem(item, response, status, headers);
        this.uploader.onSuccessItem = (item, response, status, headers) => this.onSuccessItem(item, response, status, headers);
    }
    onSuccessItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any {
        let data = JSON.parse(response); //success server response
    }
    onErrorItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any {
        let error = JSON.parse(response); //error server response
    }
}</pre>

Please insert min. 20 characters.

Hello rctoone,

you can do this using ng2-file-upload.Below is what it should looks like:

import { Component } from '@angular/core';
import {FileUploader, FileItem, ParsedResponseHeaders} from "ng2-file-upload";
@Component({
    selector: 'upload-file',
    template: '<input type="file" ng2FileSelect [uploader]="uploader">',
})
export class UploadFileComponent {
    uploader:FileUploader;
    ngOnInit(): void {
        this.uploader = new FileUploader({
            url: 'http://url.to/upload',
            headers: [{name:'Accept', value:'application/json'}],
            autoUpload: true,
        });
        this.uploader.onErrorItem = (item, response, status, headers) => this.onErrorItem(item, response, status, headers);
        this.uploader.onSuccessItem = (item, response, status, headers) => this.onSuccessItem(item, response, status, headers);
    }
    onSuccessItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any {
        let data = JSON.parse(response); //success server response
    }
    onErrorItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any {
        let error = JSON.parse(response); //error server response
    }
}

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

rctoone

Pro User 0Support score
7Questions 0Answers 0Snippets