CODEWITHSUNDEEP
androidcordovafile-uploadibm-mobilefirst
imationyj
imationyj

Reputation: 145

Cordova FileUpload API returns error code 3

I am having problem trying to upload an image file to my local web server (hosted using wampserver) for android hybrid app built using IBM Worklight 6.2.0 with Cordova version 3.4.0. The code snippet is as below:

<script type="text/javascript" charset="utf-8">
  // Wait for Cordova to load
  document.addEventListener("deviceready", onDeviceReady, false);

  // Cordova is ready
  function onDeviceReady() {
    // Nothing here
  }

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

  }

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

    var params = new Object();
    params.value1 = "test";
    params.value2 = "param";

    options.params = params;
    options.chunkedMode = false;

    var ft = new FileTransfer();
    ft.upload(imageURI, encodeURI("http://192.168.1.4:8081/folder_name/upload2.php"), win, fail, options);
  }

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

  function fail(error) {
    alert("An error has occurred: Code = " + error.code);
  }
</script>

<button onclick="getImage();">Upload a Photo</button>

upload2.php

<?php print_r($_FILES); $new_image_name="namethisimage.jpg" ; move_uploaded_file($_FILES[ "file"][ "tmp_name"], "folder_name/uploads/".$new_image_name); ?>

I'm getting http status 200 and an error code 3. Besides that, I also getting this error below the http status and error code error.

java.lang.SecurityException: Permission Denial: reading com.android.providers.media.MediaDocumentsProvider uri content://com.android.providers.media.documents/document/image:14584 from pid=4926, uid=10092 requires android.permission.MANAGE_DOCUMENTS, or grantUriPermission()

Is there any solution to this? Or is there a better way for me to upload the image file?

I've added the following to AndroidManifest.xml

<uses-permission android:name="android.permission.MANAGE_DOCUMENTS"/> 
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

Upvotes: 0

Views: 871

Answers (2)

imationyj
imationyj

Reputation: 145

I am not sure what's the issue here. My code just works suddenly, even with AngularJS. I will just share my working code here, if others might want to refer.

main.js

$scope.getImage = function() {
             // Retrieve image file location from specified source
             navigator.camera.getPicture(onSuccess, function(message) {
                alert('get picture failed');
            },{
                quality: 50, 
                destinationType: Camera.DestinationType.FILE_URI,
                sourceType: Camera.PictureSourceType.PHOTOLIBRARY
            }
             );
         }

        function onSuccess(imageURI) {
            $scope.image = imageURI;
        };

         function uploadPhoto(image) {

             var options = new FileUploadOptions();
             options.fileKey="file";
             options.fileName= $scope.imageName;
             options.mimeType="image/jpeg";

             var params = new Object();
             params.value1 = "test";
             params.value2 = "param";

             options.params = params;
             options.chunkedMode = false;

             var ft = new FileTransfer();
             ft.upload(image, encodeURI(ipaddress_to_your_server/root_folder/upload.php), win, fail, options);
         }

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

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

upload.php

<?php
print_r($_FILES);
$image_name = $_FILES['file']['name'];
move_uploaded_file($_FILES["file"]["tmp_name"], "uploads/".$image_name);
?>

You will just need to call the $scope.getImage function in html to open the device's photo library.

Upvotes: 1

Idan Adar
Idan Adar

Reputation: 44526

Based on the last image, it seems that you solved this somehow - you should share it as an answer.

Regardless,

  1. Why is there PHP code in your code snippet? Is this code snippet originating from your Worklight-based app? You cannot have there PHP... This is a mobile app, running in your device, not on your server. There is nothing there that will interpret that code.

  2. The following should not be used in your app, because Cordova is part of the Worklight framework and this check is done internally. Instead, your code should sit inside the wlCommonInit() function in main.js, or be called from there.

    // Wait for Cordova to load
document.addEventListener("deviceready", onDeviceReady, false);

// Cordova is ready
function onDeviceReady() {
    // Nothing here
}

I suspect that is why nothing works for you. Try to use AJAX to make the request to the server, to receive the sent image and store it in your web server.

Upvotes: 0

Related Questions