How to make uploading files or images using ionicframwork or angularJS

For web app using ionicframwork and angularJS

Use the camera plugin as pointed out already. The camera plugin can be used to directly capture or to select from your library on your mobile. To upload you need on the server a http POST service and on the mobile another cordova / phonegap plugin file transfer.

I made a controller with 2 buttons, one to capture/select images and one to upload.

The code is on this github

go into the camera folder where you can install the 2 plugins (see top README.md file) and run phonegap run YOURPLATFORM.

4 Likes

I also have this problem

I am working on this problem as well.

I have the following controller:

.controller('CameraCtrl', function ($scope) {    

 $scope.takePic = function() {
    var options =   {
        quality: 50,
        destinationType: Camera.DestinationType.DATA_URL,
        sourceType: 1,      // 0:Photo Library, 1=Camera, 2=Saved Photo Album
        encodingType: 0     // 0=JPG 1=PNG
    }
    // Take picture using device camera and retrieve image as base64-encoded string
    navigator.camera.getPicture(onSuccess,onFail,options);
}
var onSuccess = function(imageData) {
    console.log("On Success! ");
    $scope.picData = "data:image/jpeg;base64," +imageData;
    $scope.$apply();
};

$scope.send = function() {            
var myImg = $scope.picData;
var options = new FileUploadOptions();
        options.fileKey="pics";
        options.chunkedMode = false;

        var params = {};
        params.user_token = localStorage.getItem('auth_token');
        params.user_email = localStorage.getItem('email');
        options.params = params;

    var ft = new FileTransfer();
    ft.upload(myImg.src, encodeURI("https://xxx.herokuapp.com/ics/"), onUploadSuccess, onUploadFail, options);
    
}

Taking pictures is working, but I cannot upload it. What am I doing wrong? I am thankful for any kind of hint.

I haven’t ever used the camera plugin. In the sample posted by @yafraorg, his code is getting access to a picture URI, while yours seems to be trying to get the encoded picture. Maybe that is wrong?


		navigator.camera.getPicture(
			function (imageURI) {
				//console.log("got camera success ", imageURI);
				$scope.mypicture = imageURI;
				},
			function (err) {
				//console.log("got camera error ", err);
				// error handling camera plugin
				},
			options);
		};

Taking pictures is working, but I cannot upload it.

What is happening when you try? An error? Nothing?

Thank you! That led me to the right solution. My controller now looks like this:

.controller('CameraCtrl', function ($scope) {        
     $scope.takePic = function() {
        var options =   {
            quality: 50,
            destinationType: Camera.DestinationType.FILE_URI,
            sourceType: 1,      // 0:Photo Library, 1=Camera, 2=Saved Photo Album
            encodingType: 0     // 0=JPG 1=PNG
        }
        navigator.camera.getPicture(onSuccess,onFail,options);
    }
    var onSuccess = function(FILE_URI) {
        console.log(FILE_URI);
        $scope.picData = FILE_URI;
        $scope.$apply();
    };
    var onFail = function(e) {
        console.log("On fail " + e);
    }
    $scope.send = function() {   
        var myImg = $scope.picData;
        var options = new FileUploadOptions();
        options.fileKey="post";
        options.chunkedMode = false;
        var params = {};
        params.user_token = localStorage.getItem('auth_token');
        params.user_email = localStorage.getItem('email');
        options.params = params;
        var ft = new FileTransfer();
        ft.upload(myImg, encodeURI("https://example.com/posts/"), onUploadSuccess, onUploadFail, options);
    }
15 Likes

Glad to hear it. Thanks for coming back and posting a solution. It will really help others.

Hi @Sebastian, does this plugin work for uploading other files from the device other than image files from the gallery?

@tolu360:
Yes, you can upload any file you want as long as you have file path and name.

Good work @Sebastian :slight_smile: ,but then is the image data u posted still in base64 type??

No, it is a regular image file and not an base64 encoded string. If you want an base64 encoded string you have to change
destinationType: Camera.DestinationType.FILE_URI
to
destinationType : Camera.DestinationType.DATA_URL and inject DATA_URL. I havent tried it though.

Oh ok… Well guess I will give a try on DATA_URI. Thanks for the help @Sebastian .

1 Like

@Deric1111 - If you are using Base64 in a POST JSON request you can use something like the following in a service:

 var createReceipt = function (UUID, base64Image) {
LoadingService.show();
var dfd = $q.defer();      
var newReceipt = { "receipt_guid" : UUID, "image" : base64Image };    
$http({ method: 'POST', url: baseUrl + 'receipts', data: newReceipt, headers: headers })
.then(function (response) {      
  LoadingService.hide();
  dfd.resolve(response);
}, function (error) {
  LoadingService.hide();
  dfd.reject(false);
});

return dfd.promise;

}

and something like this in your controller:

  $scope.getPhotoReciept = function () {
    var opts = {
      quality: 50,
      destinationType: Camera.DestinationType.DATA_URL,
      sourceType: 1,
      encodingType: 0
    }
    navigator.camera.getPicture(onSuccess, onFail, opts);
  }
    
  function onSuccess(imageData) {              
    console.log(UUID);
    Receipts.createReceipt(UUID, imageData).then(function(response){
      console.log("controller success");
    }, function(error){
      console.log("controller error");
    })    
  }

Hope this helps someone in the future, I followed the above information and then realized it is not necessary to add a plugin if you are sending Base64 requests to the server. At least in my instance that was the case.

Is it a ionic feature?

@biapar - kind of. I wrapped $ionicLoading into a service that accepts a param for the text you would like to show in the view when loading for different xhr events.

I uploaded files using photo library with angular-upload, installed from bower.io

But yet not upload photos directly from camera.

I really like what you built, but I noticed the Upload button is not functioning. I have attempted to link to generic php upload page that I use for testing. Is there some modification I should be doing to your code to get the photo to upload to this page.

is any one got success to read the file size in onSuccess method after selecting file from gallery and before uploading to server.I am getting only file url in onSuccess method.

I wants to display the file size and actual file name with extention.Even i am not getting extention also only file url getting in onSuccess method like -
content://media/external/images/media/1234

$scope.takePic = function() {
        var options =   {
            quality: 50,
            destinationType: Camera.DestinationType.FILE_URI,
            sourceType: 0,      // 0:Photo Library, 1=Camera, 2=Saved Photo Album
            encodingType: 0     // 0=JPG 1=PNG
        }
        navigator.camera.getPicture(onSuccess,onFail,options);
    }
    var onSuccess = function(FILE_URI) {
        console.log(FILE_URI);
       //How to get file size and actual file name heare
    };
    var onFail = function(e) {
        console.log("On fail " + e);
    }

You will probably just need to add the extension to the name yourself. You know the extension based on the encodingType you specified. Default is JPG.

function resolveLocalFileSuccessHandler(fileEntry) { 
    alert(fileEntry.name);
    alert(fileEntry.fullPath);
    fileEntry.getMetadata(function(metadata) {
         alert(metadata.size); // or do something more useful with it..
   });
 } 

 $window.resolveLocalFileSystemURL(FILE_URI, resolveLocalFileSuccessHandler);

Hi Keithmoore,how and where we can we call resolveLocalFileSuccessHandler method or it will call automatically…

As i add it within controller but its not calling.