I try to use angular uploader which download it using npm and later browserify it all in single file. The error details can be seen here
I cannot understand the errors because now I'm still new to AngularJS. Here is my code
var angular = require('angular');
angular
.module('jobApp', [require('angular-material'), require('ng-file-upload')])
.controller('MainCtrl', ['$rootScope', '$scope', '$mdToast', '$animate', '$http', '$timeout', '$q', '$log', 'Upload',
function($rootScope, $scope, $mdToast, $animate, $http, $timeout, $q, $log, Upload) {
'use strict';
// Initialize the scope variables
$scope.$watch('files', function () {
$scope.upload($scope.files);
});
$scope.upload = function (files) {
if (files && files.length) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
Upload.upload({
url: 'http://sr-recruit.herokuapp.com/resumes',
fields: {
'name': $scope.name,
'email': $scope.email,
'about': $scope.about
},
file: file
}).progress(function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
$scope.log = 'progress: ' + progressPercentage + '% ' +
evt.config.file.name + '\n' + $scope.log;
}).success(function (data, status, headers, config) {
$scope.log = 'file ' + config.file.name + 'uploaded. Response: ' + JSON.stringify(data) + '\n' + $scope.log;
$scope.$apply();
});
}
}
};
}]);
UPDATE
Now am using Browserify-shim to properly enclosed the Angular-file-upload in Commonjs format. Thanks to @ryan Johnson.
Here is the package.json
{
"browser": {
"angular": "./node_modules/angular/angular.js",
"ng-file-upload": "./node_modules/ng-file-upload/dist/ng-file-upload-all.js"
},
"browserify-shim": {
"angular": {
"exports": "angular"
},
"ng-file-upload": {
"exports": "angular.module('ngFileUpload').name"
}
},
"browserify": {
"transform": [
"browserify-shim"
]
}
}
I still the error
TypeError: Cannot read property '' of undefined
Not sure why. FYI I use Laravel-elixir built in browserify to run the task.
I noticed that you are using require('ng-file-upload')
to include the module. Even though the ng-file-upload
module is available through npm the downloaded JS files are not in commonJS format.
In order for the require('ng-file-upload')
to work in your example the source file would need to export the module like so:
module.exports = angular.module('ng-file-upload').name;
Since this is not the case for the file you are including you need to shim it to work with Browserify. Here is a good article on Properly shim AngularJS applications using Browserify.