CODEWITHSUNDEEP
javascriptc#angularfile-upload.net-core
Saurabh Palatkar
Saurabh Palatkar

Reputation: 3384

File upload in Angular2 not working

I am trying to create a file upload functionality where an user can upload geotiff (could be of several GBs in size). For some reason my angular code is not able to hit the api and throws 404 but I am able to upload file with Postman.

Angular Code:

 fileChange(event) {
        let token = localStorage.getItem('userToken');
        let fileList: FileList = event.target.files;
        if (fileList.length > 0) {
            let file: File = fileList[0];
            let formData: FormData = new FormData();
            formData.append('files', file, file.name);
            let headers = new Headers();
            headers.append('Content-Type', 'multipart/form-data');
            headers.append("Authorization", token);
            let options = new RequestOptions({ headers: headers });
            this.uploadInProgress = true;
            this._http.post(`${this.uploadApiUrl}`, formData, options)
                .map(res => res.json())
                .catch(error => Observable.throw(error))
                .subscribe(
                data => console.log('success'),
                error => console.log(error),
                () => this.uploadInProgress = false)
        }
    }

API:

// POST: api/GeoTif
[HttpPost]
public async Task<IActionResult> Post(List<IFormFile> files)
        {
            long size = files.Sum(f => f.Length);


            return Ok(new { NoOfUploadedFileCount = files.Count, TotalFileSize =size });
        }

Upvotes: 0

Views: 495

Answers (2)

Anuja
Anuja

Reputation: 1

Add your URL with http:// (Ex: http://localhost/api/GeoTif/). And remove the following code.

headers.append('Content-Type', 'multipart/form-data');
headers.append("Authorization", token);

Upvotes: 0

Jose Zamudio
Jose Zamudio

Reputation: 865

I understand that there is an issue with the HTTP service and FormData.. you can use XMLHttpRequest to accomplish it:

fileChange(event: Event) {
    this.uploadFile(event)
        .subscribe(() => {
            console.log('sent');
        })
}

private uploadFile(event: Event) {
    return Observable.create(observer => {
        const token = localStorage.getItem('userToken');
        const fileList = event.target.files;
        if (fileList.length > 0) {
            const file = fileList[0];
            const formData = new FormData();
            const xhr = new XMLHttpRequest();

            formData.append('files', file, file.name);
            this.uploadInProgress = true;
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        observer.next(JSON.parse(xhr.response));
                        observer.complete();
                    } else {
                        observer.error(xhr.response);
                    }
                    this.uploadInProgress = false;
                }
            }

            xhr.open('POST', this.uploadApiUrl, true);
            xhr.send(formData);
        }
    });
}

Upvotes: 1

Related Questions