How to upload multiple images with $ cordovaFileTransfer

Question

How to upload multiple images with $ cordovaFileTransfer

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I am programming an application with angular and ionic compatible with android, I need to upload 5 images to a server and use $ cordovaFileTransfer for this purpose, the problem is that trying to upload the 5 images what it does is upload 5 times the last photo, any idea of this error ?, I read somewhere that is a bug of the cache of the device and I had to change the name to the URI of each image but I do not know how to do it.

                      var cont = 0;
                      var id = response.data;
                      var indice = 1;

                      for (var i = 1; i <= 5 ; i++) {

                               var path = $scope.imagenes[i];
                               var options = {

                               fileKey: "file",
                               fileName: "ID-" + id + "-N-" + indice + ".jpg",
                               chunkedMode: false,
                               mimeType: "image/jpg"

                               };

                               indice++;

                            $cordovaFileTransfer.upload(server, path , options)
                            .then(function(result) {  
                              cont++;
                              if(cont == 5)
                                 $window.alert("TODO OK!");

                            }, function(err) {
                                      $window.alert("ERROR" + JSON.stringify(err));

                            }); 
                        $scope.imagenes[i] = "";
                     }

EDITED

I found a possible solution in another stackoverflow post. The problem is that the code is not adapted for angle and apparently this way it does not work!

function renameFile(src, callback) {
    var d = new Date();
    //find the FileEntry for the file on the device
    window.resolveLocalFileSystemURL(src, function(fileEntry) {
        //get the parent directory (callback gives a DirectoryEntry)
        fileEntry.getParent(function(parent) {
            //rename the file, prepending a timestamp.
            fileEntry.moveTo(parent, d.getTime() + fileEntry.name, function(s) {
                //Callback with the new URL of the file.
                callback(s.nativeURL);
            }, function(error) {
                alert('Error on moving file!');
                callback(src); //Fallback, use the src given
            });
        }, function(error) {
            alert('Error on getting parent!');
            callback(src); //Fallback
        });
    }, function(error) {
        alert('Error on resolveLocalFileSystemURI!');
        callback(src); //Fallback
    });
}'

angularjs ionic ng-cordova

asked by Juan Donado 13.07.2016 в 05:41

source

2 answers

Editable grid with Jquery and PHP [closed] Load data by ajax with Jquery and place parameters in url

score 1 · Answer 1

I do not know if it's useful for you to do a function that uploads the images and you only give the path per parameter, I do not think it's by cache, I also work uploading several images at once and I always did it with a function in particular that will be responsible only for uploading. Both Android and iOS worked for me.

    var cont = 0;
    var id = response.data;
    var indice = 1;

    for (var i = 1; i <= 5; i++) {

        var path = $scope.imagenes[i];
        var options = {

            fileKey: "file",
            fileName: "name",
            chunkedMode: false,
            mimeType: "image/jpg"

        };
        uploadImage(path);

    }

    function uploadImage(path) {
        var options = {

            fileKey: "file",
            fileName: "ID-" + id + "-N-" + indice + ".jpg",
            chunkedMode: false,
            mimeType: "image/jpg"

        };
        $cordovaFileTransfer.upload(server, path, options)
        .then(function(result) {
            console.log("bien");

        }, function(err) {
            $window.alert("ERROR" + JSON.stringify(err));
        });
    }

score 0 · Answer 2

The problem is not cache, but the index variable does not contain the value assigned to it in each loop, but it takes the value that has index at the moment of execution of the function that in this would be 5 , this type of error is very common and can be solved with the famous closures, which are functions that handle independent variables, so for each closure we would send the value of the index in each cycle, leaving the code as follows:

var cont = 0; // este es tu contador 
function myClosure(i,id,limite){
  var path = $scope.imagenes[i];
  var options = {
    fileKey: "file",
    fileName: "ID-" + id + "-N-" + i + ".jpg",
    chunkedMode: false,
    mimeType: "image/jpg"
  };
  $cordovaFileTransfer.upload(server, path , options)
  .then(function(result) {
     cont++;
     console.log(cont);
     if(cont === limite){
       $window.alert("TODO OK!");
       cont = 0; //volvemos el contador a 0
     }
   },function(err) {
       $window.alert("ERROR" + JSON.stringify(err)+ " unicamente se subieron "+cont+" imagenes");
  }); 
  $scope.imagenes[i] = "";
}

var id = response.data;
for (var i = 1; i <= 5 ; i++) {
   myClosure(i,id,5)//aca invocamos la funcion con los valores que queremos
}

Note that the counter must be of global reach so that the closure increases it every time an image is correctly uploaded.