Cordova file transfer upload image from device

1

I’m trying to upload my server an image from the gallery on the device. My code works fine when I take a new photo with your phone and upload. But when I select not working. The URL is incorrect or invalid. However I do not get error when I try uploading this. I’ll let my code

$scope.getPicture = function(){
var options = {
  quality: 75,
  destinationType: Camera.DestinationType.FILE_URI,
  sourceType : Camera.PictureSourceType.PHOTOLIBRARY,
  popoverOptions: CameraPopoverOptions,
  correctOrientation: true,
  targetWidth: 720
};

Camera.getPicture(options).then(function(imageURI) {
  $scope.photo = imageURI;
  $scope.nueva_foto = imageURI;
  $scope.mostrar_form = true;

   }, function(err) {
      // error
   });
 };

    var trustAllHosts = true;
    var ftOptions = new FileUploadOptions();
    ftOptions.fileKey = 'file';
    ftOptions.fileName = $scope.photo.substr($scope.photo.lastIndexOf('/') + 1);
    ftOptions.mimeType = 'image/jpeg';
    ftOptions.chunkedMode = false;
    ftOptions.httpMethod = 'POST';

      if(ionic.Platform.isAndroid()){
        $cordovaFileTransfer.upload(encodeURI(server),$scope.photo,ftOptions)
        .then(function(result) {
    
        }

The example URL I get is: image%3A43

2

This is a factory i created for uploading images. Make sure you have the file-transfer plugin installed. What does your PHP script look like? I will post simple PHP below that works with this factory.

.factory('PhotoUpload', ['$q', 'URLS', function ($q, URLS) {    	   
	return {						
            upload: function (imgURI, fileName) {					
		var q = $q.defer();			
		function win(r) {
			console.log(JSON.stringify(r));
			q.resolve(r.response);
		}
			
		function fail(e) {
			console.log(JSON.stringify(e));
			q.reject(e);
		}
			
		var uri = encodeURI(URLS.photoUpload);
			
		var options = new FileUploadOptions();
		options.fileKey="file";
		options.fileName=fileName;
		options.mimeType="image/jpeg";
			
		var ft = new FileTransfer();

		ft.upload(imgURI, uri, win, fail, options);
							
		return q.promise;				
        }
    };
}])	// ********** end PhotoUpload factory **********

PHP: uploadImage.php

<?php
$tmp_name = $_FILES["file"]["tmp_name"];
$name = $_FILES["file"]["name"];
move_uploaded_file($tmp_name, $name);
?>
1 Like
3

Thanks for your help !, the problem that I have is that when you select an image from my device, the URL to the image does not raise it, is invalid and is not an image. But if I upload an image just taken with the device I have no problems.

4

Is this on Android? If so, what version of the cordaova-camera are you using? I had this same issue. Fixed with latest version.

Robert

5

Yes this on Android, version plugin org.apache.cordova.camera 0.3.6 “Camera” @rgecy

6

Are you using phonegap? How are you adding the plugin to your app? Ionic CLI?

Robert

7

I’m taking plugin Cordova, with the added “Cordova plugin add …” command

8

cordova plugin add cordova-plugin-camera ??? You may want to remove the plugin and add it back in.

9

Yes!, So I add all plugins

10

Not sure if this is the problem, but according to the file-transfer plugin docs, the encodeURI(server) and $scope.photo seem to be reversed. The image URI should be first and the server URI should be second.

11

I’ll try that, but when I tested my server consultation works well, but the image URL is the one that does not fit me.

12

@rgecy It did not work reverse the values, throws an error. I am using the image that rescued the same cell and it works. But not upload it to the server. Sera can miss some of the URL of the image?

13

Try this. I added the encodingType to my camera options. Android quirk, from gallery ignores the encType!

think you can use zero ‘0’ or ‘Camera.EncodingType.JPEG’ for encodingType.

14

It has not worked, returns this URL to the image you have selected :

content://com.android.providers.media.documents/document/image%3A43
15

If that doesnt work, it has to be the version of the plugin you are using. Are you building it with Ionic CLI as well using ‘ionic build android’ command?

Only option is the plugin. Remove the old plugin using
cordova plugin remove org.apache.cordova.camera
and add it back using new command
cordova plugin add cordova-plugin-camera

You are using 0.3.6 and latest version is 2.0!

16

Just checked and 1.2.0 seems to be installing and not 2.0 for some reason. But 1.2.0 works with your issue.

Good Luck,

Robert

17

Thanks for all your help, but still not working. Update the plugin but fails.

18

Adding the plugin fails? Or the image upload still fails after you added the new plugin?

19

I could install the plugin but the load continues to fail image. It works when I take a new photo but not from the gallery.

20

Check the plugin version to make sure it installed correctly.