Flowjs file upload - Ionic and ngCordova

553 views Asked by At

I'm trying to upload an image from my app to the server, I wanted to use the ngCordova file transfer plugin but I'm not happy with the progress informations that this plugin gives you, so I decided to go with Flowjs, but I can't manage to create a proper HTML5 File object from the file url I have. This is my code

window.resolveLocalFileSystemURL(photo, function(fileEntry){
    fileEntry.file(function(file){
        $scope.flow.addFile(file);
        $scope.flow.upload();
        $scope.flow.on('fileProgress', function (file, chunk){
            console.log(file);
            console.log(chunk);
        });
        $scope.flow.on('error', function(a,b){
            console.log(a);
            console.log(b);
        });
    });
    }, function(err){
        console.log(err);
});

Where photo is the path to the fileSystem for the file. I get a 400(bad Request) error when I try doing this upload, I'm sure the server side is correct because I use it with many other Flowjs applications. I think that the object returned by fileEntry.file() is not a proper HTML5 file object, maybe creating a Blob from the file url could solve the problem, but I haven't understand how to create it. I'd like to get my code to work though, before trying to create a Blob, but if that's the only solution, well...

1

There are 1 answers

0
Daniele Sassoli On BEST ANSWER

Ok, I've found a solution that works, dunno if it's the best possibile, any improvment is well appreciated.

window.resolveLocalFileSystemURL(photo, function(fileEntry){
    fileEntry.file(function(file){
        var reader = new FileReader();
        reader.onload = function(){
            var blob = new Blob([reader.result], {type: 'application/octet-stream'});
            blob.name = 'image.jpg';
            $scope.flow.addFile(blob);
            $scope.flow.upload();
            $scope.flow.on('fileProgress', function (file, chunk){
                console.log(file);
                console.log(chunk);
            });
            $scope.flow.on('error', function(a,b){
                console.log(a);
                console.log(b);
            });
        };
        reader.readAsArrayBuffer(file);
    });
}, function(err){
    console.log(err);
});