CODEWITHSUNDEEP
cordovaphonegap-plugins
Varun Nath
Varun Nath

Reputation: 5632

Phonegap File Transfer of picture fails on every other picture: Error code 3 with FileTransfer upload

I answered this question myself since it took me a long time to find the solution for it and it wasn't documented very well.

Upvotes: 8

Views: 13635

Answers (2)

tim-montague
tim-montague

Reputation: 17382

Error code 3 is a rather broad error; it basically means your server isn't coded correctly or you don't have an internet connection, and that results in a connection error.

Could mean:

  1. You don't have a multipart plugin installed on the server. In PHP set "file_uploads = On" (in PHP.ini), in ExpressJS you need the Multer middleware plugin (https://www.npmjs.com/package/multer), etc.
  2. That the file upload is larger than what your server permits - which results in error of status code 413, with a message of "request entity is too large". To fix this on PHP you need to adjust the upload_max_filesize setting in php.ini, to fix this on ExpressJS you need to adjust the limit field for Multer, etc. Basically, increase the file upload size on the server. Most servers limit file upload sizes as a security measure. (https://www.owasp.org/index.php/Unrestricted_File_Upload)
  3. That the options.fileKey value (i.e. <input type="file" name="fileKey" />) isn't the name your server expects - an example error message might be "unexpected field".
  4. That the content-type field in the header does not have a value of multipart/form-data; boundary=----WebKitFormBoundary. Logging the request header on the server, could be used to check if content-type is correctly set.

Photo upload with File Transfer

@AugieGardner - Also in agreement that the Cordova File Transfer plugin isn't well documented for uploading photos taken with the Camera plugin.

Fortunately, I have a working example for iOS (and my guess is Android as well):
cordova file transfer plugin not working in ios simulator

Photo upload without File Transfer

A simpler alternative (or fallback), would be to encode the image as Base64, and send it through a plain old AJAX POST request. Which includes the following advantages and disadvantages.

Disadvantages of Base64 encoded images sent over AJAX

  1. You may need to increase the request limit size on your server, so you don't get 413 errors (i.e. "request entity too large").
  2. Base64 images are about 37% larger than binary images, which most likely results in slower uploads.
  3. May not be suitable for videos, or other file types.

Advantages of Base64 encoded images sent over AJAX

  1. Smaller app size (and faster app download), because Cordova's File Transfer plugin, and possibly Cordova's File plugin won't add overhead to the app.
  2. You don't have to fix File Transfer plugin errors, as you scale your app to new operating systems (i.e. iOS, Android, etc).
  3. You may not need a multipart service (or middleware) on the server to upload images.

Upvotes: 0

Varun Nath
Varun Nath

Reputation: 5632

While trying to use FileTransfer() to upload images from a phonegap app on android to a remote server i kept getting an error code 3 on every alternate file upload.

It worked once but instantly when i tried again it would throw an error without even sending the file to the server.

The code i am using for the file upload was :

The key to making it work was to add a header option. 

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


The complete code :

var options = new FileUploadOptions();

                        options.fileKey="file";
                        options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
                        options.mimeType="image/jpeg";
                        options.chunkedMode = false;
                        *options.headers = {
                           Connection: "close"
                        };*

                        // setup parameters
                        var params = {};
                        params.fullpath =imageURI;
                        params.name = options.fileName;



                        var ft = new FileTransfer();

                        ft.upload(imageURI, encodeURI(url+'/account/profile-pics'), win, fail, options);


 function win(r) {
                  //file uploaded successfully
                }
            function fail(error) {


                alert("An error has occurred: Code = " + error.code);
                alert("upload error source " + error.source);
                alert("upload error target " + error.target);
            }

Upvotes: 22

Related Questions