ngCordova in Angular JS Web Application - angularjs

Question

I am not an expert in Angular and have recently started learning it, I am trying to create a responsive form in an AngularJS WEB APPLICATION which will let me upload a file or a photo from a mobile browser (not mobile app). Before I upload anything through my mobile browser, I should check the native settings of my mobile device (not browser settings but the settings of my mobile device).
To achieve this I am using ngCordova with it's wrapper $cordovaFileTransfer. I have a normal project in Eclipse and I have included below files in my index page(I have stored these files locally in my project).
cordova.js
file.js
fileTransfer.js
ng-cordova.js
ng-cordova.min.js
Since I am using Eclipse, I tried to install THyM plugin however it wouldn't install in my work space. Below is my controller code.
angular.module('app').controller(
'CordovaCtrl',
function($scope, $timeout, $cordovaFileTransfer) {
document.addEventListener("deviceready", function(
$cordovaFileTransfer) {
alert("Inside the Cordova Controller - deviceready");
var fileToUpload = "";
var options = {
fileKey : "sendFile",
fileName : "angularJSFileToUpload",
chunkedMode : false,
mimeType : "text/plain"
};
var server = "C:/Dev/Angular file receiver";// Temporary path
var targetPath = "C:/Dev/Angular file sender";// Temporary path
$cordovaFileTransfer.upload(server, targetPath, options).then(
function() {
alert("Success");
}, function(err) {
alert("Error");
});
}, false)
});
I understand that all plugin calls should be wrapped in the "deviceready" event. Whenever I run my project I get below error on the browser console.
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/fileupload/cordova/cordova_plugins.js
Uncaught TypeError: Object #<Event> has no method 'upload' app.js:46
I am not sure where the cordova_plugins.js gets fetched from. I had read on some forum that it gets generated at run time (I might be wrong).
Does anyone have any idea about what’s going wrong here? I reckon I am missing something on the configuration part. Is it even possible to use ngCordova in a web application since supposedly its meant for mobile development?

Answer 1

Try code below
angular.module('app')
.controller('CordovaCtrl', function($scope, $timeout, $cordovaFileTransfer) {
document.addEventListener("deviceready", function() {
alert("Inside the Cordova Controller - deviceready");
var fileToUpload = "img.png";
var options = {
fileKey : "sendFile",
fileName : "angularJSFileToUpload",
chunkedMode : false,
mimeType : "text/plain"
};
var server = "C:/Dev/Angular file receiver";// Temporary path
var targetPath = "C:/Dev/Angular file sender";// Temporary path
$cordovaFileTransfer.upload(server, targetPath, options)
.then(function(result) {
alert("Success");
}, function(err) {
alert("Error");
}, function(progress){
alert("In Progress");
});
}, false)
});