Cordova File-Transfer Not Hitting Server Endpoint

Question

I'm trying to create a file using FT (cordova file-transfer) to send a file up to my express app. The problem is, express doesn't get a request. There was a point where it worked, but it stopped working and I'm trying to figure out why.

My code looks like this.

First I take a picture with cordova lib, this works.

    $scope.takePicture = function(){
          Camera.getPicture().then(function(imageURI) {
            $scope.lastPhoto = imageURI;
            upload(imageURI)
          }, function(err) {
            console.err(err);
          }, {
            quality: 25,
            targetWidth: 320,
            targetHeight: 320,
            saveToPhotoAlbum: false
          });
    };

The upload function though, does not get a request up to the express server.

upload = function (imageURI) {
    var ft = new FileTransfer();
    var options = new FileUploadOptions();

    options.fileKey = "photo";
    options.fileName = 'filename'; // We will use the name auto-generated by Node at the server side.
    options.mimeType = "image/jpeg";
    options.chunkedMode = false;
    options.httpMethod = 'put';
    options.params = { // Whatever you populate options.params with, will be available in req.body at the server-side.
        "description": "Uploaded from my phone"
    };

    ft.upload(imageURI, encodeURI(RESOURCES.PRODUCTION_DOMAIN + '/api/boats/' + $scope.boat._id),
        function (e) {
            console.log('File Transfer Completed', e)
        },
        function (e) {
            alert("Upload failed", e);
        }, options);
}

I don't see a request come into my server, and I see the console.log that fails.

Why is this?

My Server has the following access control methods

    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET, POST', 'PUT', 'DELETE');
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header('Access-Control-Allow-Credentials', true);
    next();

and I have

    <access origin="*"/>

In my config.xml for my app.

Why do the requests do not get through!?

Edit

After getting the app to run in x-code (downloaded the new version...) I see the error is as follows.

2015-10-26 05:00:54.955 Fish App[358:68325] File Transfer Finished with response code 404
2015-10-26 05:00:54.956 Fish App[358:68325] FileTransferError {
    body = "";
    code = 3;
    "http_status" = 404;
    source = "file:///var/mobile/Containers/Data/Application/598EAE4A-F0E4-4A3B-A4A4-0DB657981122/tmp/cdv_photo_010.jpg";
    target = "http://example.com/api/boats/";
}

Also important to note I had to configure my nginx settings to allow larger than 1M file sizes, only THEN did I get the above error. Why is it a 404? The target is correct.

I have the following in my plist to allow all connections...

<key>NSAppTransportSecurity</key>
<dict>
  <!--Include to allow all connections (DANGER)-->
  <key>NSAllowsArbitraryLoads</key>
      <true/>
</dict>

Edit2:

I have added a CSP policy in my index.html This seems to be the most insecure way to do it, which I would think would allow me to get the upload through!

<!-- This policy allows everything (eg CSS, AJAX, object, frame, media, etc) except that 
* CSS only from the same origin and inline styles,
* scripts only from the same origin and inline styles, and eval()
-->
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; img-src '*' script-src 'self' 'unsafe-inline' 'unsafe-eval'">

Answer 1

UPDATE 2016-04-11: Google will soon require new and updated Apps that use Cordova/Phonegap be at least 4.1.1 Details: Android pre-4.1.1 to be blocked

You need to add the white-list, the plugin, and CSP . OR SET the version to your compiler.

The fix to many common white-list problems

The alternative to the white-list is this quick fix – but know that this quick fix removes all needs for white-list . This creates a security issue which you may not want to by pass.

QUICK FIX Add this to your config.xml for PHONEGAP BUILD ONLY
<preference name="phonegap-version" value="3.7.0" />
This method will not be available after May, 2016.

THE LONG ANSWER IS as such:

From Top Mistakes by Developers new to Cordova/Phonegap you have hit:

• #6 Not setting the "phonegap version" for your compiler
• #7 Not setting "version" for you plugins
• #10 Not adding the new "white-list" and "white-list plugin" parameters in config.xml.

For #6 & #7

With the CLI version, if you do not assign a version for your platform OR in ''Phonegap Build'' if you do not set the phonegap-version in config.xml, YOU WILL GET THE LATEST VERSION. If you are lucky, your program just works as expected. If you are not lucky, you'll get a set of cascading errors.

Luckily for all of us, Holly Schinsky has written a nice blog post to explain it all:

Cordova/PhoneGap Version Confusion
http://devgirl.org/2014/11/07/cordovaphonegap-version-confusion/

For #10

This relatively * NEW * requirement means – to access ANY website or resources on the web, you MUST use the whitelist and the whitelist plugin. This requirement goes into affect, if you are using cordova-android@4.0.0 or better; including cli-5.1.1 and cli-5.2.0. If however, your version is before 4.0.0, let's say 3.5.0 or 3.7.0, then you will not have to add the white-list requirement.

To be clear, the "whitelist" has been around for a bit, but the plugin and requirement is very new. As you would expect, when the "whitelist" was added, the defacto open-access feature was deprecated. Or said another way, the defacto open-access feature was planned and scheduled to be eliminated. This change marks a step in removal of the open-access feature.

In addition, the Content Security Policy (CSP) has caught numerous developers - because it was soooo poorly publicized. The documentation is buried in the bottom of many of the latest documentation pages.

Lastly, Raymond Camden in his blog points to a LARGE change in policy starting with Cordova 5

Phonegap Build Forum: Notes for upgrading to cli-5.1.1 on PGB and now required Whitelist

• Cordova Whitelist Guide
• Phonegap Whitelist Guide
• Phonegap Build Whitelist Guide