Uploading issue with FileTransfer in PhoneGap

Question

I am not able to upload the image captured by phone in phone-gap android version. for iOS, it's working fine, but same code not working for android version using phone gap

I am getting 200 response code, but no "success" response from the server.

I am using cordova-1.7.0.js and the target SDK is Android 2.1.

Here is the sample code:

function imageUpload(imageURI)
{
    var options = new FileUploadOptions();
    options.fileKey="image";
    options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
    options.mimeType="image/jpeg";
    var params = new Object();
    var msg="test message";
    var token= "test token";
    params.message = msg;
    params.access_token = token;
    options.params = params;
    var ft = new FileTransfer();
    ft.upload(imageURI, "http://mydomain.info/demo/upload.php", win, fail, options,false);
}

Answer 1

See my answer here, this works for me on android (sending image and data to a django rest api) for the complete code:

android phonegap camera and image uploading

I suppose the trick is in:

options.chunkedMode = true; //this is important to send both data and files

and maybe this one:

var url=encodeURI("http://your_url_for_the_post/");

use an url encoded url to pass to the FileTransfer

Answer 2

I had the same problem. I fixed it with adding code

System.setProperty("http.keepAlive", "false");

in main java file in the beginning of onCreate() method. This bug is unresolved bug of apache cordova.

Answer 3

First make sure that your doPost method is getting called If it is not called write doGet() method and inside that call do post in the following way

protected void doGet(HttpServletRequest request, HttpServletResponse response) {
    doPost(request,response);
} 

then, you need to place the following jar files in lib folder under WEB-INF

1. commons-fileupload-1.2.2.jar
2. commons-fileupload-1.2-javadoc.jar
3. commons-fileupload-1.2-sources.jar
4. commons-io-1.3.2.jar

Also put them in build path.

Answer 4

Well now we are on Cordova-1.9.0 also add apache libraries : commons-io-2.4.JARS

I have been trying to upload image from phonegap android emulator to servlet to store images

Servlet code: uploadpic.java

private static final String BASE_DIRECTORY = "/Users/tshah/Pictures";

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

//  boolean isMultipart = ServletFileUpload.isMultipartContent(request);

    System.out.println("Do post....");

    /**
    * The base upload directory. In this directory all uploaded files will
    * be stored. With the applet param tag 'directory' you can create a
    * subdirectory for a user. 
    * See http://www.javaatwork.com/parameters.html#directory for more 
    * information about the 'directory' param tag. For a Windows environment 
    * the BASE_DIRECTORY can be e.g. * 'c:/temp' for Linux environment '/tmp'.
    */


    boolean isMultipart = ServletFileUpload.isMultipartContent(request);

    // check if the http request is a multipart request
    // with other words check that the http request can have uploaded files
    if (isMultipart) {

      //  Create a factory for disk-based file items
      FileItemFactory factory = new DiskFileItemFactory();

      //  Create a new file upload handler
      ServletFileUpload servletFileUpload = new ServletFileUpload(factory);

      // Set upload parameters
      // See Apache Commons FileUpload for more information
      // http://jakarta.apache.org/commons/fileupload/using.html
      servletFileUpload.setSizeMax(-1);

      try {

        String directory = "";

        // Parse the request
        List items = servletFileUpload.parseRequest(request);

        // Process the uploaded items
        Iterator iter = items.iterator();

        while (iter.hasNext()) {
          FileItem item = (FileItem) iter.next();

          // the param tag directory is sent as a request parameter to
          // the server
          // check if the upload directory is available
          if (item.isFormField()) {

            String name = item.getFieldName();

            if (name.equalsIgnoreCase("directory")) {

              directory = item.getString();
            }

            // retrieve the files
          } else {

            // the fileNames are urlencoded
            String fileName = URLDecoder.decode(item.getName());

            File file = new File(directory, fileName+".jpeg");
            file = new File(BASE_DIRECTORY, file.getPath());

            // retrieve the parent file for creating the directories
            File parentFile = file.getParentFile();

            if (parentFile != null) {
              parentFile.mkdirs();
            }

            // writes the file to the filesystem
            item.write(file);
          }
        }

      } catch (Exception e) {
        e.printStackTrace();
        response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
      }

      response.setStatus(HttpServletResponse.SC_OK);

    } else {
      response.setStatus(HttpServletResponse.SC_BAD_REQUEST);
    }
}

Answer 5

Also dont forget to add Camera permission to android emulator

HTML CODE:

<!DOCTYPE html>
<html>
    <head>
        <title>Login Page</title>
              <meta name="viewport" content="width=device-width, initial-scale=1">

     <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
     <link rel="stylesheet"
href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script
src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

    <script type="text/javascript">


        function PictureSourceType() {};
        PictureSourceType.PHOTO_LIBRARY = 0;
        PictureSourceType.CAMERA = 1;

        function getPicture(sourceType)
        {
             var options = { quality: 10 };
             if (sourceType != undefined) {
                  options["sourceType"] = sourceType;
                 // options["destinationType"] = destinationType.DATA_URL;
             }
             // if no sourceType specified, the default is CAMERA 
             navigator.camera.getPicture(getPicture_Success, null, options);
        };


        function getPicture_Success(imageData)
        {
                 alert("getpic success "+ imageData);
                document.getElementById("test_img").src =  imageData;
        };

        function success(response) {
            alert("Your photo has been uploaded!");
          };
          // callback if the photo fails to upload successfully.

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

        function uploadPhoto()
        {
            var imageFile = document.getElementById("test_img").src;
            alert(imageFile);




            var ft,options;


            options = new FileUploadOptions();
            options.fileKey = "profile_image";
              // name of the file:
              options.fileName = imageFile.substr(imageFile.lastIndexOf('/') + 1);
              // mime type:
              options.mimeType = "multipart/form-data";
              params = {
                val1: "some value",
                val2: "some other value"
              };
              options.params = params;



            ft = new FileTransfer();
            ft.upload(imageFile, 'http://10.0.2.2:8080/cio/uploadpic', success, fail, options);
            alert("There is something called file transfer " + imageFile);

        };

       </script>
        </head>

         <body>
     <div data-role="page" id="cameraPage">
    <div data-role="header" data-position="inline">
        <h1>Edit profile Pic</h1>
        <a href="index.html" data-icon="delete" class="ui-btn-right">Cancel</a>
    </div>

    <div data-role="content">
        <center>
        <img style="width: 60px; height: 60px" id="test_img" src="" />
        </center>

        <button onclick="getPicture()">From Camera</button>

        <button onclick="getPicture(PictureSourceType.PHOTO_LIBRARY)">From
            Photo Library</button>
        <button onclick="uploadPhoto()">Upload Photo</button>


    </div>

</div>