Angular 2 form Data and JSON data post in same request

Question

I am doing a file upload operation using Angular 2 and HTML file upload control. My code for uploading the file is as follows -

saveDocument(value: any) {
        let apiEndPoint: any = 'http://localhost:58736/LandingPage/addUpdateDocument';
        let fi = this.FileInput.nativeElement;
        if (fi.files && fi.files[0]) {
            let fileToUpload = fi.files[0];
            let formData: FormData = new FormData();
            formData.append('newDocument', fileToUpload, value);
            let headers = new Headers();
            headers.append('Accept', 'application/json');
            let options = new RequestOptions({ headers: headers });
            this._http.post(`${apiEndPoint}`, formData , options).map(res => res.json()).catch(error => Observable.throw(error)).subscribe(
                data => console.log('success'),
                error => console.log(error))
        }
    }

I have a ASP.Net MVC server side method as follows --

[System.Web.Http.HttpPost]
        public string addUpdateDocument(HttpPostedFileBase newDocument)
        {
            string responseMessage = string.Empty;
            try
            {
                if (newDocument.ContentLength > 0)
                {
                    string _FileName = Path.GetFileName(newDocument.FileName);
                    string _path = Path.Combine(Server.MapPath("~/upload"), _FileName);
                    newDocument.SaveAs(_path);
                }
                responseMessage = "Upload Successfull !!";
            }
            catch(Exception ex)
            {
                responseMessage = "Upload Successfull !!";
            }

            return responseMessage;
        }

    }

This is working fine as long as I am uploading only the file. But I want to send some more information apart from the File. I tried to implement the function as follows --

this._http.post(`${apiEndPoint}`,{'newDocument':formData,'documentMetaData':value} , options).map(res => res.json()).catch(error => Observable.throw(error)).subscribe(
                data => console.log('success'),
                error => console.log(error))

and then I modified the server side method as follows -

[System.Web.Http.HttpPost]
public string addUpdateDocument(HttpPostedFileBase newDocument, BlankFormsModels documentMetaData)

Where BlankFormsModels is just a class. When I do this, the the Meta data is received in the server side but the file is not received. It comes as null. Please suggest how can POST form data and JSON data in the same request.

I finally found a proper way to upload a file and send some JSON within the same request and made a proper answer here: https://stackoverflow.com/questions/39693966/how-to-angular2-post-json-data-and-files-in-same-request/47408232#47408232 — maxime1992, Nov 21 '17 at 08:16

score -3 · Accepted Answer · answered Jul 04 '17 at 13:54

-3

You can send data like this:

var obj = {
   formData : formData,
   otherInfo : otherInfo
}

And on server side, while uploading file, use the key formData of obj instead of entire object. And after that post another data. Use promises for proper Sync.

answered Jul 04 '17 at 13:54

Arun Sahani

72
6

This doesn't work on my end, the `formData` will become empty when I attach two files. – Jason Liu Oct 23 '18 at 00:03

Angular 2 form Data and JSON data post in same request

1 Answers1