# Upload image to server

**URL:** <https://forum.ionicframework.com/t/upload-image-to-server/108088>\
**Category:** ionic-v3\
**Created:** [October 8, 2017, 12:11pm UTC](https://forum.ionicframework.com/t/upload-image-to-server/108088 "2017-10-08T12:11:26Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![guptajagadish843](https://avatars.discourse-cdn.com/v4/letter/g/71c47a/32.png) [@guptajagadish843](https://forum.ionicframework.com/u/guptajagadish843)\
**Post date:** [October 8, 2017, 12:11pm UTC](https://forum.ionicframework.com/t/upload-image-to-server/108088/1 "2017-10-08T12:11:27Z")

</div>

Can any one know how to upload a picture to php server  
i need source code example ionic and php as well

---

<div class="post-metadata">

**Author:** ![meysammahfouzi](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/meysammahfouzi/32/113600_2.png) [@meysammahfouzi](https://forum.ionicframework.com/u/meysammahfouzi)\
**Post date:** [October 8, 2017, 12:59pm UTC](https://forum.ionicframework.com/t/upload-image-to-server/108088/2 "2017-10-08T12:59:01Z")

</div>

You can use the [File Transfer](https://ionicframework.com/docs/native/file-transfer/) plugin.

---

<div class="post-metadata">

**Author:** ![Judgewest2000](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/judgewest2000/32/113339_2.png) [@Judgewest2000](https://forum.ionicframework.com/u/Judgewest2000)\
**Post date:** [October 8, 2017, 1:06pm UTC](https://forum.ionicframework.com/t/upload-image-to-server/108088/3 "2017-10-08T13:06:45Z")

</div>

Not to do your job for you, but in the past I’ve done base64 strings and posted them to a backend server in a json payload.

You can then convert the string to a file on the server itself, or store it as a string on your db

---

<div class="post-metadata">

**Author:** ![guptajagadish843](https://avatars.discourse-cdn.com/v4/letter/g/71c47a/32.png) [@guptajagadish843](https://forum.ionicframework.com/u/guptajagadish843)\
**Post date:** [October 8, 2017, 1:10pm UTC](https://forum.ionicframework.com/t/upload-image-to-server/108088/4 "2017-10-08T13:10:51Z")

</div>

yes i have used file transfer plugin but at server end im getting null

---

<div class="post-metadata">

**Author:** ![guptajagadish843](https://avatars.discourse-cdn.com/v4/letter/g/71c47a/32.png) [@guptajagadish843](https://forum.ionicframework.com/u/guptajagadish843)\
**Post date:** [October 8, 2017, 1:11pm UTC](https://forum.ionicframework.com/t/upload-image-to-server/108088/5 "2017-10-08T13:11:37Z")

</div>

yes i have tried to store base64 string but im getting request entitiy is too large error  
thats y i have asked sample code

---

<div class="post-metadata">

**Author:** ![Judgewest2000](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/judgewest2000/32/113339_2.png) [@Judgewest2000](https://forum.ionicframework.com/u/Judgewest2000)\
**Post date:** [October 8, 2017, 1:12pm UTC](https://forum.ionicframework.com/t/upload-image-to-server/108088/6 "2017-10-08T13:12:06Z")

</div>

Are you posting or ‘getting’?

---

<div class="post-metadata">

**Author:** ![guptajagadish843](https://avatars.discourse-cdn.com/v4/letter/g/71c47a/32.png) [@guptajagadish843](https://forum.ionicframework.com/u/guptajagadish843)\
**Post date:** [October 8, 2017, 1:19pm UTC](https://forum.ionicframework.com/t/upload-image-to-server/108088/7 "2017-10-08T13:19:14Z")

</div>

im sending the data by posting

---

<div class="post-metadata">

**Author:** ![meysammahfouzi](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/meysammahfouzi/32/113600_2.png) [@meysammahfouzi](https://forum.ionicframework.com/u/meysammahfouzi)\
**Post date:** [October 8, 2017, 1:23pm UTC](https://forum.ionicframework.com/t/upload-image-to-server/108088/8 "2017-10-08T13:23:50Z")

</div>

> [@guptajagadish843](#):
>
> yes i have used file transfer plugin but at server end im getting null

Can you share the code you are using to post the file?

---

<div class="post-metadata">

**Author:** ![guptajagadish843](https://avatars.discourse-cdn.com/v4/letter/g/71c47a/32.png) [@guptajagadish843](https://forum.ionicframework.com/u/guptajagadish843)\
**Post date:** [October 8, 2017, 1:35pm UTC](https://forum.ionicframework.com/t/upload-image-to-server/108088/9 "2017-10-08T13:35:34Z")

</div>

let body = new FormData();  
body.append(‘username’,username);  
body.append(‘title’,activity[“Activity”]);  
body.append(‘option’,activity[“activeoption”]);  
body.append(‘description’,activity[“des”]);  
body.append(‘name’,activity[“refname”]);  
body.append(‘phone’,activity[“mobile”]);  
body.append(‘timeslot’,activity[“timeslot”]);  
body.append(‘location’,location);  
body.append(‘photo’,photo);

```
var result;

```

if(result)  
{  
Promise.resolve(result);  
}  
return new Promise(resolve=\>{  
this.http.post(“[https://someserver/testphp.php](https://someserver/testphp.php)”,{}).subscribe(data=\>{

```
       result = data;
       resolve(result);

    },error=>{
       
       result = error;
       resolve(result);
    });
});

```

here is the code

---

<div class="post-metadata">

**Author:** ![guptajagadish843](https://avatars.discourse-cdn.com/v4/letter/g/71c47a/32.png) [@guptajagadish843](https://forum.ionicframework.com/u/guptajagadish843)\
**Post date:** [October 8, 2017, 1:36pm UTC](https://forum.ionicframework.com/t/upload-image-to-server/108088/10 "2017-10-08T13:36:24Z")

</div>

please help me im stuck with this since two days

---

<div class="post-metadata">

**Author:** ![meysammahfouzi](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/meysammahfouzi/32/113600_2.png) [@meysammahfouzi](https://forum.ionicframework.com/u/meysammahfouzi)\
**Post date:** [October 8, 2017, 3:58pm UTC](https://forum.ionicframework.com/t/upload-image-to-server/108088/11 "2017-10-08T15:58:23Z")

</div>

You are not using `FileTransfer`. Use the following code:

```auto
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';

...

constructor(private transfer: FileTransfer) {
  
}

...

const fileTransfer: FileTransferObject = this.transfer.create();

let options: FileUploadOptions = {
  fileKey: "photo",
  fileName: "filename.jpg",
  chunkedMode: false,
  params : {
      "username": username,
      "title": activity[“Activity”],
      // the rest of your form fields go here, except photo
  }
};

fileTransfer.upload(photo, 'https://someserver/testphp.php', options)
.then((data) => {
  console.log('uploaded successfully');
}, (err) => {
  console.log('upload failed!');
});

```

---

<div class="post-metadata">

**Author:** ![guptajagadish843](https://avatars.discourse-cdn.com/v4/letter/g/71c47a/32.png) [@guptajagadish843](https://forum.ionicframework.com/u/guptajagadish843)\
**Post date:** [October 8, 2017, 4:10pm UTC](https://forum.ionicframework.com/t/upload-image-to-server/108088/12 "2017-10-08T16:10:40Z")

</div>

thank you ill try this method

---

<div class="post-metadata">

**Author:** ![ShakirAli](https://avatars.discourse-cdn.com/v4/letter/s/b3f665/32.png) [@ShakirAli](https://forum.ionicframework.com/u/ShakirAli)\
**Post date:** [August 29, 2018, 11:27am UTC](https://forum.ionicframework.com/t/upload-image-to-server/108088/13 "2018-08-29T11:27:10Z")

</div>

I am also facing same problem. I am able to load photo to local directory but not able to load to server, So that when i am refreshing profile page the photo again moving to default image.  
I have only api’s endpoint and parameter. can anyone tell me