ngcordova android file select and upload to server

Question

I want to upload file from my ionic application to server. I am using cordovafiletransfer plugin. Using that I am able to upload file by providing static path in controller code. My question is how to get selected file path by user? I only get filename from input tag on the relative path of selected file. How to get that?

View Page Code:

<label class="item item-input">
    <div class="input-label">Upload Photo</div>
    <input type="file" onchange="angular.element(this).scope().setFile(this)" accept="image/*"/>
</label>
<div class="padding">
    <button ng-click="upload()" class="button button-block button-assertive">Upload</button>
</div>

Controller Code:

$scope.upload = function() {
    var filename, options, targetPath;
    console.log($scope.theFile);
    targetPath = cordova.file.externalRootDirectory + '/Download/androidify.png';
    filename = targetPath.split('/').pop();
    options = {};
    options.fileKey = 'image_file';
    options.fileName = $scope.theFile.name;
    options.chunkedMode = false;
    options.mimeType = $scope.theFile.type;
    options.headers = {
        'Authorization': getDeviceToken()
    };
    console.log(options);
    return $cordovaFileTransfer.upload(domain.uploadphoto(), targetPath, options).then(
            (function(result) {
                console.log('SUCCESS: ' + JSON.stringify(result.response));
            }), 
            (function(err) {
                console.log('ERROR: ' + JSON.stringify(err));
            }), 
            function(progress) {}
    );
};

$scope.setFile = function(element) {
    return $scope.$apply(function($scope) {
        console.log(element);
        return $scope.theFile = element.files[0];
    });
};

How to get proper target path of selected file?

did you find any solution for this? – Shri Apr 01 '16 at 05:34 — Shri, Apr 01 '16 at 05:34

score 0 · Answer 1 · edited May 23 '17 at 11:52

I came across this post which should solve the problem, (it works for me, with some modification):

In my template:

<input type="file" fileread="file.path" />
<button type="button" class="button button-small button-assertive" ng-click="vm.upload(file)">Upload PDF</button>

and my modified Directive:

.directive("fileread", ['$cordovaFile', function ($cordovaFile) {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                    var fileName = changeEvent.target.files[0].name;
                    $cordovaFile.writeFile(cordova.file.dataDirectory, fileName, loadEvent.target.result, true)
                        .then(function (result) {
                            console.log(result)
                        }, function (err) {
                            console.warn(err)
                        });
                    scope.$apply(function () {
                        scope.fileread = cordova.file.dataDirectory + fileName;
                    });
                }
                reader.readAsArrayBuffer(changeEvent.target.files[0]);
            });
        }
    }
}]);

Remember to clean up after you uploaded the document

use:

$cordovaFile.removeFile(cordova.file.dataDirectory, fileName)
  .then(function (success) {
    // success
  }, function (error) {
    // error
  });

Also see http://www.javascripture.com/FileReader for more info regarding FileReader

ngcordova android file select and upload to server

1 Answers1

Remember to clean up after you uploaded the document