I've been attempting to utilize FT (cordova file-transfer) to create a file and send it to my express app. However, I've encountered an issue where express does not receive the request. Previously, it was functioning correctly, but now it has stopped, and I am working to determine the cause.
Below is a snippet of my code:
Initially, I capture a photo using the cordova library, which works seamlessly.
$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
});
};
However, the upload function does not successfully submit a request to the express server.
upload = function (imageURI) {
var ft = new FileTransfer();
var options = new FileUploadOptions();
options.fileKey = "photo";
options.fileName = 'filename';
options.mimeType = "image/jpeg";
options.chunkedMode = false;
options.httpMethod = 'put';
options.params = {
"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 do not observe any requests reaching my server, and the console.log indicates a failure.
What could be the reason for 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();
I also have:
<access origin="*"/>
In the config.xml of my app.
Why is my request failing to go through?
Edit
After running the app in x-code (after downloading the new version...), I am able to see the following error:
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/";
}
It is worth mentioning that I had to adjust my nginx settings to allow for file sizes larger than 1M, only then did I receive the above error. Why is it giving a 404? The target is correct.
I have also added 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 implemented a CSP policy in my index.html which may seem like an insecure method, but I assumed it would enable me to successfully upload.
<!-- 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'">