Issue PhoneGap API FileTransfer. Upload

[Bala Chandra V]

Hello, I am currently working on Android App, where I need to upload a picture/image (*.png/*.jpeg/any) to server. I am using App builder.

I written following code to select picture using Camera API.

function _getFileEntry(filename, onSuccess, onError) {
        var that = this;
        // Get existing file, don't create a new one.
        fileSystem.root.getFile(filename,
                                function (fileEntry) {
                                    //_getFile(fileEntry, onSuccess, onError);
                                    alert('Got File Entry');
                                },
                                function (error) {
                                    alert(JSON.stringify(error));
                                    error = "Unable to get file entry for reading.";
                                    onError(error);
                                });
    }
$scope.OnSelectFile = function () {
        navigator.camera.getPicture(function (filename) {
             _getFileEntry(filename, _onSuccess, _onError);
             },
               _onError,
               {
                   quality: 100,
                   destinationType: navigator.camera.DestinationType.FILE_URI,
                   sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY,
                   encodingType: Camera.EncodingType.JPEG,
                   saveToPhotoAlbum: true
               });
    }

I am running above code in android simulator, I am selecting a picture on my D: drive. say,"http://localfile/Simulator////D:/IMG1.jpg".
When I am calling fileSystem.root.getFile(....) with my selected file. I am not able to get fileentry. I am always getiing erro code 9 or 1.
May I know how to get file entry for this? Am I doing some thing wrong here?

[Kaloyan]

Hello Bala Chandra V,

You do not need to explicitly get the image with the File API. What you can do instead is to directly use the passed base-64 encoded string from the Camera API. Here is a piece of code that should guide you further:

function uploadFromGallery() {

    // Retrieve image file location from specified source
    navigator.camera.getPicture(uploadPhoto,
                                function(message) { alert('get picture failed'); },
                                { quality: 100,
                                destinationType: navigator.camera.DestinationType.FILE_URI,
                                sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY }
                                );

}

function uploadPhoto(imageURI) {
    var options = new FileUploadOptions();
    options.fileKey="file";
    options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1)+'.png';
    options.mimeType="text/plain";

    var params = new Object();

    options.params = params;

    var ft = new FileTransfer();
    ft.upload(imageURI, encodeURI("http://some.server.com/upload.php"), win, fail, options);
}

Here is the source of the above code. Also, you can check the Cordova Camera and File documentation.

I hope the above helps.

Regards,
Kaloyan
Telerik

 

 

[Musabbah]

your changes did not work for me even i stopped receiving response.
i tried the following as i am using windows IIS server at remote machine it returns the html of contactus.aspx but never writes file at remote machine. i have full permission of root folder even.
   function uploadPhoto(imageUriToUpload) {
             var url = encodeURI("http://bluebellsintl.com/contactus.aspx");      
        var params = new Object();
        params.your_param_name = "something";  //you can send additional info with the file
        
        var options = new FileUploadOptions();
        
        options.fileKey = "file"; //depends on the api
        
        options.fileName = imageUriToUpload.substr(imageUriToUpload.lastIndexOf('/') + 1) + ".jpg";        
        //options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1) + '.png';
        
        options.mimeType = "image/jpeg";
        //options.mimeType = "text/plain";

        options.params = params;
        options.chunkedMode =true; //this is important to send both data and files
        
        
        var ft = new FileTransfer();
       
        ft.upload(imageUriToUpload, url, win, fail, options);
        

    }


    function win(r) {
        console.log("HIIIIIiiii");
        console.log("Code = " + r.responseCode);
        console.log("Response = " + r.response);
        console.log("Sent = " + r.bytesSent);
        alert(r.response);
    }

    function fail(error) {
        alert("There is something");
        alert("An error has occurred: Code = " + error.code);
    }
    

[Kaloyan]

Hello Musabbah,

Observing the code you have provided, I see only a few potential issues:

• Try setting the options.fileName property without + "jpg" at the end. I suppose this is not needed as there already is file type in the image uri. Like so:
  

  options.fileName = imageUriToUpload.substr(imageUriToUpload.lastIndexOf('/') + 1);

• As per known issue in the FileTransfer Cordova plugin, please check if setting the options.chunkedMode to false and adding a Connection: "close" header will fix the issue. As follows:
  

  options.chunkedMode = false;
  options.headers = {
     Connection: "close"
  };

Further, can you share if there is any error thrown in the above code?

Regards,
Kaloyan
Telerik

 

 

[Musabbah]

Hi, Please try the same code but not with simulator, try it on original device. I am using it on physical device and able to get file.

[Musabbah]

Ok, I am presenting my working code for your ease. I am using IIS on remote server and have written a httphandler their to handle image writing on server. Any way on client side i am using following. On server side i don't know what u r using. I have no experience of other servers except IIS. I was suppose to do some configurations on server side for its handling.

//function to get image from library

 $('#getPhotoFromLibraryButton').on('click', function () {

        getPhoto(navigator.camera.PictureSourceType.PHOTOLIBRARY);
    });

    function cameraGetPicture() {


        navigator.camera.getPicture(imageReceived, cameraFail, {
            quality: 50,
            destinationType: Camera.DestinationType.FILE_URI,
            allowEdit: false,
            saveToPhotoAlbum: true,
            correctOrientation: true

        });
    }

    function imageReceived(imageURI) {
       
        camCapturedFile = imageURI;

        var image = document.querySelector('img#smallImage');
        image.src = imageURI;
        imageURI = new steroids.File({
            path: "image.png",
            relativeTo: steroids.app.userFilesPath
        });


    }

//button to write image on server
$('#btnUploadImage').on('click', function () {
           var img = document.getElementById("smallImage");
            var imgURI = img.src;
           
            uploadPhoto(imgURI);

}

 function uploadPhoto(imageUriToUpload) {  
        
       
        var url = encodeURI("http://*****.com/api/fileupload/uploadfile");
      
        var options = new FileUploadOptions();
        options.fileKey = "UploadedImage";
     
        options.fileName =  imageUriToUpload.substr(imageUriToUpload.lastIndexOf('/') + 1) + ".jpg";
        options.mimeType = "image/jpeg";
        options.chunkedMode =true; 
        var ft = new FileTransfer();
      
        ft.upload(imageUriToUpload, url, win, fail, options);


    } 

[Kaloyan]

Hello Musabbah,

As I understand, the above code works well when deployed on actual devices and fails when ran in the AppBuilder simulator. Please, correct me if I have misunderstood you. This could be so, due to the %simulator_persistent_root% variable, which represents your root persistent folder in the simulator (e.g. C:\Telerik\Icenium\). Nevertheless, you should be able to debug your application in the AppBuilder simulator and check if this is causing the issue on your side. If so, you can workaround it by using fileEntry.fullPath to obtain the file path of the image. However, be aware that this might not be working on device so it would be best to test such scenarios on emulator or real device.

Going through the provided code, I see the following event handler:

$('#getPhotoFromLibraryButton').on('click', function () {

        getPhoto(navigator.camera.PictureSourceType.PHOTOLIBRARY);
    });

Still, I do not see the getPhoto function in your code. Instead there is a cameraGetPicture function, as follows:

function cameraGetPicture() {


        navigator.camera.getPicture(imageReceived, cameraFail, {
            quality: 50,
            destinationType: Camera.DestinationType.FILE_URI,
            allowEdit: false,
            saveToPhotoAlbum: true,
            correctOrientation: true

        });
    }

Further, I will be able to test your code if you isolate the issue in a sample project and send it over. I hope this is doable for you. You should be able to attach an exported archive to your reply, as long as its size is under 20mb.

Regards,
Kaloyan
Telerik