How to upload file using post method in ionic


For picking file i am using following line.
<input type=“file” (change)=“changeListener($event)” />

please tell me the solution


The solution is entirely dependent on what your server is expecting.


Pasting all my code here is not good I guess. I recommend you read the docs below:

  1. take a picture

  2. upload the picture

If you are really taking a picture and upload it, you may need the file plugin to move the picture to a app directory before uploading it to the server.

However you can also try the method here:

You can encode you file to a base64 string then post it like normal form data, or json.


all parameter required by server is correct except one …which is ‘file’ parameter and it containes file …
so i am facing problem while passing file in ‘file’ parameter…so please tell me solution …
when i am using postman and selects file in ‘file’ parameter its working fine and uploading file.


this solution is using upload method from native file-transfer;
But i want to use simple http post method to upload file And i am using browser’s file picker to pic file
<input type=“file” (change)=“changeListener($event)” />


If so, I guess you can add a ‘name’ attribute to the file input(suppose the field name is “file”), like:

<input type=“file” (change)=“changeListener($event)” />


<input type=“file” name="file"  (change)=“changeListener($event)” />


What does that do?
What is the code?


i have created that function and it will call that function after file selection



But how are you trying to upload? Are you using IOnic Native File transfer? Or Angular’s


i am using angular http post.
and i want to upload file using http post method


Show us the code you have.


@Rakesh21 Did you find the solution?

I am having the same problem: How to upload a file along with form data using


This might help : I have used nodejs and mongodb at backend

<input type=“file” name=“image” accept=“image/*” (change)=“changeListener($event)”>

file: File;
changeListener($event): void {
this.file = $[0];
this.imagesProvider.test1(this.file) // Calls test1() function in imagesProvider.ts


var options = {
let body = new FormData();
body.append(‘image’, data);
body.append(‘desc’, “testing”);“Your api endpoint”, body, options).subscribe(res => {


I tired it … it is working as you have used , but this will not work if we use ionic native camera or PHOTOLIBRARY