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
    https://ionicframework.com/docs/native/camera/

  2. upload the picture
    https://ionicframework.com/docs/native/file/
    https://ionicframework.com/docs/native/file-transfer/

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:
http://blog.ionic.io/10-minutes-with-ionic-2-using-the-camera-with-ionic-native/

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.

1 Like

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:
replace:

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

with:

<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

Obviously…

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

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 http.post

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

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

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

imagesProvider.ts:

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

2 Likes

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

same problem with me … i tried with chooser plugin but api not see the file
i tested api on postman it work as expected any help please
also not working as expected on device it work on browser not working on device :frowning:

use file chooser plugin for select the file in your local and use file transfer plugin for upload the file to your server.

my api expect file parameter with other string parameters … i don’t want to use file transfer i want to path the selected file by chooser plugin … how to do that ?

it helped me!!!
thanks a lot :slight_smile: