Image upload from gallery to server using ionic 2


#1

can any one please help me with plunker or any example code to upload photo to the server picking from the gallery .below code i tried

upload(){

   ImagePicker.getPictures({
   

     
     }).then((_imagePath) => {
        alert('got image path ' + _imagePath);
         // convert picture to blob
    
         const fileTransfer = new Transfer();
         var options: any;
         options = {
                          fileKey: 'file',
                         fileName: 'name.jpg',
           }
          fileTransfer.upload("_imagePath", "http://techverves.in/uploaddoc.php", options)
            .then((data) => {
                    alert("photo uploaded succesfully");

            }, (err) => {
                 // error
              })

        })



  }

Regards,
Datta

Thank you…


#2

You are passing “_imagePath” as a first argument of upload, remove the quotes and pass as a variable

 fileTransfer.upload("_imagePath", "http://techverves.in/uploaddoc.php", options)
            .then((data) => {
                    alert("photo uploaded succesfully");

            }, (err) => {
                 // error
              })

#3

thanks for the reply … but stll it is not working i removed those double quotes .phone is not picking the image from the gallery.
can you help me out trying it from 4 days


#4

do you get the image url in alert ?


#5

Try this thread. This might help you.

Thanks


#6

no i did not get the alert… even phone is not picking the image from the gallery .
please help me out.


#7

i went through that thread did not get full solution . refered some threads like those and wrote the above code


#8

Hi got the alert as ERROR: "plugin _not_installed "

thsee are the plugins i installed

cordova-plugin-camera 2.2.0 "Camera"
cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-console 1.0.3 "Console"
cordova-plugin-crop 0.1.0 "CropPlugin"
cordova-plugin-device 1.1.2 "Device"
cordova-plugin-image-picker 1.1.1 "ImagePicker"
cordova-plugin-splashscreen 3.2.2 "Splashscreen"
cordova-plugin-statusbar 2.1.3 "StatusBar"
cordova-plugin-whitelist 1.2.2 "Whitelist"
ionic-plugin-keyboard 2.2.1 “Keyboard”


#9

installed the image picker plugin again so that issue is solved… iits picking the photo from gallery got the alert of file path from where it picked the photo… now how i can know weather the photo uploaded to the server.is the upload code is correct? how can i get the response from the server as photo uploaded succesfully


#10

hi sorted my code little bit … finally got with this

upload(){

   ImagePicker.getPictures({
       maximumImagesCount: 1,
                   width: 127,
                 height: 127,
                 quality: 75
     }).then((_imagePath) => {
        alert('got image path ' + _imagePath);
         // convert picture to blob
    
         const fileTransfer = new Transfer();
         var options: any;
         options = {
                          fileKey: 'file',
                         fileName: 'suco.jpg',
                    }

            fileTransfer.upload(_imagePath, "http://techverves.in/uploaddoc.php", options).then((data) => {
              alert('file uploaded successfully  ' + data);
            },(err) => {
         
                  alert('server error');
             });
           
            },(error) => {
             console.log("ERROR -> " + JSON.stringify(error));
                alert("ERROR: " + JSON.stringify(error));
      });


    }

after picking the photo from the gallery its showing the alert as “server error” please anyone help me with solution i am trying hard .


#11

di you solve your problem?


#12

This link may should help you greatly www.developerslearnit.com/2016/11/build-photo-gallery-app-with-ionic2.html