. Upload Is Not a Function in Ng-File-Upload
I Am Using Ng-File-Upload for File Upload, Preview and Send to Server. I Have Added the Files Upload. Js and Upload. Shim. Js Is My Files Direcory. Added Them...
I am using NG-FILE-UPLOAD for file upload,preview and send to server.
I have added the files upload.js and upload.shim.js is my files direcory.added them in project and also added dependency in my angular module.working same as this one.
Html:
<fieldset>
<input type="file" ngf-select="" class="form-control" ng-model="picFile"
name="file" accept="image/*" ngf-max-size="2MB" required="" />
<img ngf-thumbnail="picFile" class="thumb" width="300"/>
<button ng-click="picFile = null" ng-show="picFile">Remove</button>
<br />
<button ng-click="uploadPic(picFile)">Submit</button>
<span class="progress" ng-show="picFile.progress >= 0">
<div style="width:{{picFile.progress}}%" ng-bind="picFile.progress + '%'"></div>
</span>
<span ng-show="picFile.result">Upload Successful</span>
<span class="err" ng-show="errorMsg">{{errorMsg}}</span>
</fieldset>
Controller:
$scope.uploadPic = function(file) {
Upload.upload({
url: '/student/studentimages',
data: {
uploadedPicture: file,
uploadedFrom: 'recipe'
},
}).then(function(response) {
$timeout(function() {
$scope.result = response.data;
});
}, function(response) {
if (response.status > 0) $scope.errorMsg = response.status + ': ' + response.data;
}, function(evt) {
$scope.progress = parseInt(100.0 * evt.loaded / evt.total);
});
}
But when i click submit it is giving me error as
Upload.upload is not a function
at Scope.e.uploadPic (app.min.js:1)
at fn (eval at compile (angular.js:13036), <anonymous>:4:296)
at update (upload.js:533)
at upload.js:611
at angular.js:17571
at completeOutstandingRequest (angular.js:5370)
at angular.js:5642
I have tried changing version too. What else can be tried to solve this?
1 Answer
It seems like you haven't properly initialized/ injected the dependencies.
In the module:
var app = angular.module('your_module', ['ngFileUpload']);
In the controller:
app.controller('MyCtrl', ['$scope', 'Upload', function ($scope, Upload) {
$scope.upload = function(dataUrl) {
Upload.upload({
url: AppConstants.api.images,
data: {
uploadedPicture: dataUrl,
uploadedFrom: 'recipe'
},
}).then(function(response) {
$timeout(function() {
$scope.result = response.data;
});
}, function(response) {
if (response.status > 0) $scope.errorMsg = response.status + ': ' + response.data;
}, function(evt) {
$scope.progress = parseInt(100.0 * evt.loaded / evt.total);
});
}
}
check this link
Sarah Jenkins is a veteran tech journalist with over 12 years of experience covering artificial intelligence, mobile innovations, and digital ethics. Her insights have appeared in leading technology publications worldwide.
