In this post we are going to see how to create a Fileupload Directive in Angular Js. Using that directive we can able to get files list, success callback, error callback, input user data, url to upload files,method etc.
For this we have to add the two module reference files, from this file we have to add angularFileUpload module to our app module.
angular-file-upload.js
angular-file-upload-shim.js
Add above two files in the project and add script tag in the index.html
Result Directive will be like this :
Directive:
Template:
Index.html
Controller:
Output:
From this post you can learn how to create a fileupload directive in Angular js
For this we have to add the two module reference files, from this file we have to add angularFileUpload module to our app module.
angular-file-upload.js
angular-file-upload-shim.js
Add above two files in the project and add script tag in the index.html
var rgapp = angular.module('rgapp', ['angularFileUpload']);
<fileupload-form asyncurl="~/api/Blog"
method="post"
input-data="filedata"
fileselect-callback="uploadfiles(files)"
success-callback="success(data,status,headers,config)"
error-callback="error(data,status,headers,config)">
</fileupload-form>
Directive:
var rgapp = angular.module('rgapp', ['angularFileUpload']);
rgapp.directive('fileuploadForm', ['$upload', function ($upload) {
return {
scope: {
asyncurl: '@',
method: '@',
successCallback: '&',
fileselectCallback:'&',
errorCallback: '&',
inputData:'='
},
restrict: 'E',
templateUrl:'../App/templates/upload.html',
link: function (scope, element, attr, cntrl) {
var uploadingFiles = [];
var uploadFileHandlers = [];
scope.uploadedFilesString = '';
scope.uploading = function(){
for (var i = 0; i < uploadingFiles.length; i++) {
var _file = uploadingFiles[i];
(function (indx) {
uploadFileHandlers[indx] = $upload.upload({
url: attr.asyncurl,
method: attr.method,
file: _file,
data: scope.inputData
})
.progress(function (prg) {
console.log("index " + indx);
console.log(prg);
})
.success(function (data, status, headers, config) {
if (scope.successCallback)
scope.successCallback({ data: data,
status: status,
headers: headers,
config: config });
})
.error(function (data, status, headers, config) {
if (scope.errorCallback)
scope.errorCallback({ data: data,
status: status,
headers: headers,
config: config });
});
})(i);
}
}
scope.abort = function (indx) {
uploadFileHandlers[indx].abort();
}
scope.uploadedFiles = function (files) {
uploadingFiles = files;
scope.uploadedFilesString = '';
for (var i = 0; i < uploadingFiles.length; i++) {
scope.uploadedFilesString += uploadingFiles[i].name + ";";
}
if (scope.fileselectCallback)
scope.fileselectCallback({ files: files });
}
scope.browseFiles = function () {
document.getElementById('rgfile').click();
}
}
}
}]);
Template:
<div>
<div class="">
<div class="form-inline" style="padding:20px">
<label>Files :</label>
<input type="text" ng-model="uploadedFilesString" class="form-control" />
<button ng-click="browseFiles()" class="btn btn-sm">Browse</button>
<button ng-click="uploading()" class="btn btn-sm btn-success">Upload</button>
</div>
<div class="form-group">
<input type="file" style="display:none" ng-file-select="uploadedFiles($files)" class="form-control" id="rgfile"
ng-model="user.file" multiple />
</div>
</div>
</div>
Index.html
<script src="~/Scripts/angular.js" type="text/javascript"></script>
<script src="~/Scripts/angular-route.js" type="text/javascript"></script>
<script src="~/Scripts/angular-file-upload.js" type="text/javascript"></script>
<script src="~/Scripts/angular-file-upload-shim.js" type="text/javascript"></script>
<script src="~/App/app.js" type="text/javascript"></script>
<div ng-controller="blogcontroller">
<div>
<h3>Angular js File Upload</h3>
</div>
<div>
<div class="form-inline">
<label>Tracking id :</label>
<input type="text" class="form-control" ng-model="filedata.trackingid" />
</div>
<br />
<div class="form-inline">
<label>Description :</label>
<input type="text" class="form-control" ng-model="filedata.description" />
</div>
<div style="margin-left:25px;">
<fileupload-form asyncurl="~/api/Blog"
method="post"
input-data="filedata"
fileselect-callback="uploadfiles(files)"
success-callback="success(data,status,headers,config)"
error-callback="error(data,status,headers,config)">
</fileupload-form>
</div>
</div>
</div>
Controller:
rgapp.controller('blogcontroller', ['$scope','$upload',function ($scope,$upload) {
$scope.Files = [];
$scope.FilesData = [];
$scope.filedata = { trackingid:'', description:''};
$scope.success = function (data,status,headers,config) {
console.log('config');
console.log(config);
$scope.FilesData.push(data);
}
$scope.error = function (data,status,headers,config) {
console.log('error');
console.log(config);
}
$scope.uploadfiles = function (files) {
console.log(files);
}
}]);
Output:
From this post you can learn how to create a fileupload directive in Angular js
No comments:
Post a Comment