Hi,
I found this link - http://www.c-sharpcorner.com/UploadFile/cd7c2e/create-file-uploader-using-angularjs/ beneficial because it is easy to understand; however, what if I need to store its filename and file description (user input of course) onto the database? I found this one - http://techbrij.com/crud-file-upload-asp-net-mvc-ef-multiple however it did not use AngularJS. Please, need your help. I Need an easy to understand tutorial. Thanks in advance.
boycotoPosted Jan 31, 2017, 9:06 PM
Sandip G PatilPosted Jan 27, 2017, 6:32 AM
boycotoPosted Jan 27, 2017, 4:12 AM
Sandip G PatilPosted Jan 25, 2017, 11:11 AM
If you need to store file name and its description
You should do below steps in order to upload file contents with details like filename and description and file size as well
Suppose your html is like this
<div class="modal-body">
<div id="divErrorMsg" style="display:none" class="alert alert-danger">
{{ErrorMessage}}
div>
<div class="panel panel-default">
<div class="panel-body">
<input type="file" ng-file-select="onFileSelect($files)" ng-disabled="isBrowseDisabled">
<label class="margin-right-label">{{fileInfo}}label>
div>
div>
div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="upload();" ng-disabled="isBrowseDisabled">Uploadbutton>
div>
Step 1)
Add below directive in your angular controller.js
app.directive("ngFileSelect", function () {
return {
link: function ($scope, el) {
el.bind("change", function (e) {
$scope.file = (e.srcElement || e.target).files[0];
$scope.filePath = e.target.value;
$scope.getFile();
})
}
}
})
Which is used in html for input tag with type=”file”
<input type="file" ng-file-select="onFileSelect($files)" ng-disabled="isBrowseDisabled">
Step 2)
Now your angular controller will look like this
angular.module("SandipModule").controller("FileUploadController", ["$scope", "$uibModalInstance", "$q", "$log", function ($scope, $uibModalInstance, $q, $log) {
$scope.onLoad = function (reader, deferred, scope) {
return function () {
scope.$apply(function () {
deferred.resolve(reader.result);
});
};
};
$scope.onError = function (reader, deferred, scope) {
return function () {
scope.$apply(function () {
deferred.reject(reader.result);
});
};
};
$scope.onProgress = function (reader, scope) {
return function (event) {
scope.$broadcast("fileProgress",
{
total: event.total,
loaded: event.loaded
});
};
};
$scope.getReader = function (deferred, scope) {
var reader = new FileReader();
reader.onload = $scope.onLoad(reader, deferred, scope);
reader.onerror = $scope.onError(reader, deferred, scope);
reader.onprogress = $scope.onProgress(reader, scope);
return reader;
};
$scope.readAsDataURL = function (file, scope) {
var deferred = $q.defer();
var reader = $scope.getReader(deferred, scope);
reader.readAsDataURL(file);
return deferred.promise;
};
$scope.xslFinaldata = null;
$scope.fileInfo = "";
$scope.fileInfodetails=="";
$scope.upload = function () {
$scope.xslFinaldata = $scope.xslData.substring(13);
var docContent = $scope.xslFinaldata;
$scope.fileName = $scope.uploadedDocName;
var fileName = $scope.fileName;
$scope.fileInfo = $scope.fileInfodetails;
var promisePost = chargeImportService.ProcessUploadedDocument(JSON.stringify(fileName), JSON.stringify(docContent));
promisePost.then(function (response) {
//Here you can call angular service method
}, function (err) {
});
}
$scope.xslData = "";
$scope.uploadedDocName = "";
$scope.getFile = function () {
$scope.progress = 0;
$scope.readAsDataURL($scope.file, $scope)
.then(function (result) {
$scope.xslData = result;
$scope.uploadedDocName = $scope.file.name;
$scope.fileInfodetails = "File name: " + $scope.filePath+ " " + $scope.file.size + " " + "Bytes";
});
};
}]);
Step 3)
Remember
In $scope.getFile() function you will get all information about uploaded document
Step 4)
Angular Service.js
chargeImportService.ProcessUploadedDocument = function ( fileName, docContent) {
var def = $q.defer();
var request = $http({
url: “http:localhost:84567”+ "/api/myWebApiController/ProcessUploadedDocument",
dataType: 'json',
method: 'POST',
data: JSON.stringify({'fileName': fileName, 'docContent': docContent })
}).success(function (data, status, headers, config) {
def.resolve(data);
}).error(function (response, status, headers, config) {
console.log(response);
});
return def.promise;
}
Through this service you can post data to WebAPI controller