Post/Upload FormData (multipart/form-data) with Angular 10, TypeScript and HttpClient
In this post we will give you information about Post/Upload FormData (multipart/form-data) with Angular 10, TypeScript and HttpClient. Hear we will give you detail about Post/Upload FormData (multipart/form-data) with Angular 10, TypeScript and HttpClientAnd how to use it also give you demo for it if it is necessary.
In this quick how-to tutorial, you’ll learn how to work with
FormData in Angular 10 and TypeScript and how to post it to a web server via a POST request and
One of the most important aspects of web development is forms as they allow you to collect data from users and upload it to servers.
If you are new to these how-tos, check out how to install and set up a project and the prerequisites.
In this tutorial, we’ll be looking at
FormData, A browser API for handling forms data just like its name suggests. This API provides methods and properties that enable you to have access and work with form elements and their values in a straightforward way.
It’s particularly helpful if you are working with client side frameworks like Angular as it allows you to easily prepare form data to be sent with POST HTTP requests.
You also can create a FormData instance from an HTML form.
FormData API allows you to create a set of key/value elements that correspond to form fields and their values. This can be then sent to the server using Angular HttpClient.
Note: A FormData instance is equivalent to an HTML form sent using the
How to use FormData in Angular 10?
Let’s now see an example of how you can create a
FormData instance and send it with
HttpClient POST in Angular 10.
Note: We assume that you have a server running at the
http://localhost:3000address with an
/uploadthat accepts POST requests for uploading files in your server.
If you would like to create a server for uploading files, check out Nest.js Tutorial: File Uploading with Multer and Serving Static Files in Nest.
Provided that you have created an Angular 10 project with Angular CLI, navigate to your project’s root folder and run the following command to generate a component that we’ll be working with:
$ ng generate component upload
src/app/upload/upload.component.html file and add the following form:
<h1>Angular 10 FormData (multipart/data-form) Example</h1><div><form[formGroup]="uploadForm"(ngSubmit)="onSubmit()"><div><inputtype="file"name="profile"(change)="onFileSelect($event)"/></div><div><buttontype="submit">Upload</button></div></form></div></div>
You can also check this example with HTML pre.
Next, open the
src/app/upload/upload.component.ts file and start by importing these modules:
FormGroup from the
@angular/forms package which are necessary to create a reactive form in Angular. We also import
HttpClient that will be used to send data to the server.
Note: Make sure to import
HttpClientModulein your main module application which exists in the
src/app/app.module.tsfile and add them to the
HttpClientcalls directly from your components is against the separation of concerns principle but this is just a simple example. Typically, you would need to create a service and make
HttpClientfrom the service.
Next define the
uploadForm variables in your component:
Next, import and inject
Next, create a reactive form in
ngOnInit() method of the component which gets called when the component is initialized:
Next, let’s add the
onFileSelect() method which gets called when a file is selected by the user:
We simply check if at least one file is selected and we set the
profile field of
uploadForm to the selected file.
Finally, let’s see how we can use
FormData to send
multipart/form-data to our server. Let’s define the
We simply create an instance of
FormData, next we add fields with their values using the
append() method of
FormData. In our example, we only add a field named
file which holds the value the selected file. Finally we use the
post() method of
HttpClient to send the form data to the server.
FormData provides the following methods for working with form data:
FormData.append()appends a new value for an existing key, or adds the key if it does not exist.
FormData.delete()method deletes a key/value pair from a
FormData.entries()method provides an iterator for going through all key/value pairs of the instance.
FormData.get()method Returns the first value associated with a given key from within a
FormData.getAll()method provides an array of all the values associated with a specific key.
FormData.has()methods provides a boolean indicating whether a
FormDatainstance contains a specific key.
FormData.keys()method provides an iterator for going through all the keys contained in the form instance.
FormData.set()method sets a new value for an existing key inside a
FormDataobject, or adds the key/value if it does not exist.
FormData.values()method provides an iterator for going through all values contained in this object.
In this tutorial, we’ve seen how to send post multi-part form data to a server using TypeScript, Angular 10, HttpClient and
Hope this code and post will helped you for implement Post/Upload FormData (multipart/form-data) with Angular 10, TypeScript and HttpClient. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs