Upload image to server

Ionic Framework ionic-v3
1

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

2

You can use the File Transfer plugin.

3

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

4

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

5

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

6

Are you posting or ‘getting’?

7

im sending the data by posting

8

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

9

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”,{}).subscribe(data=>{

       result = data;
       resolve(result);

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

here is the code

10

please help me im stuck with this since two days

11

You are not using FileTransfer. Use the following code:

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!');
});
12

thank you ill try this method

13

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