Issue PhoneGap API FileTransfer. Upload

7 posts, 0 answers
  1. Bala Chandra V
    Bala Chandra V avatar
    10 posts
    Member since:
    May 2014

    Posted 13 May 2014 Link to this post

    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?


     
  2. Kaloyan
    Admin
    Kaloyan avatar
    872 posts

    Posted 15 May 2014 Link to this post

    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
     

    Share what you think about AppBuilder and Telerik Platform with us in our feedback portal, so we can become even better!

     
  3. Musabbah
    Musabbah avatar
    3 posts
    Member since:
    Jun 2014

    Posted 09 Sep 2014 in reply to Kaloyan Link to this post

    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);
        }
        
  4. Kaloyan
    Admin
    Kaloyan avatar
    872 posts

    Posted 11 Sep 2014 Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  5. Musabbah
    Musabbah avatar
    3 posts
    Member since:
    Jun 2014

    Posted 20 Sep 2014 in reply to Bala Chandra V Link to this post

    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.
  6. Musabbah
    Musabbah avatar
    3 posts
    Member since:
    Jun 2014

    Posted 20 Sep 2014 in reply to Musabbah Link to this post

    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);


        } 






  7. Kaloyan
    Admin
    Kaloyan avatar
    872 posts

    Posted 24 Sep 2014 Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
Back to Top