Crud operation using mvc angularjs on Fileuplode

Question

Hello friends if any one knows how to update image using angularjs mvc please provide me that link Thank u

Mayank · Answer

MVC Home Controller: [HttpPost] public JsonResult SaveFiles() { string description = string.Empty; string Message, fileName, actualFileName; Message = fileName = actualFileName = string.Empty; bool flag = false; if (Request.Files != null) { var file = Request.Files[0]; actualFileName = file.FileName; fileName = Guid.NewGuid() + Path.GetExtension(file.FileName); int size = file.ContentLength; try { file.SaveAs(Path.Combine(Server.MapPath("~/FileUpload"), fileName)); } catch (Exception) { Message = "File upload failed! Please try again"; } } return new JsonResult { Data = new { Message = Message, Status = flag } }; } Directive: mainApp.directive('ngFiles', ['$parse', function ($parse,scope) { function fn_link(scope, element, attrs) { var onChange = $parse(attrs.ngFiles); element.on('change', function (event) { onChange(scope, { $files: event.target.files }); }); }; return { link: fn_link } }]); Angular Controller: mainApp.controller('UploadFileController', function ($scope, $http) { var formdata = new FormData(); $scope.getTheFiles = function ($files) { angular.forEach($files, function (value, key) { formdata.append(key, value); }); }; // NOW UPLOAD THE FILES. $scope.uploadFiles = function () { var request = { method: 'POST', url: '/Home/SaveFiles/', data: formdata, headers: { 'Content-Type': undefined } }; // SEND THE FILES. $http(request) .success(function (d) { alert("Success"); angular.element(document.querySelector('#file1')).val(null); // $scope.f1.$setPristine(); // $scope.IsFormSubmitted = false; }) .error(function () { }); } }); HTML: ng-files="getTheFiles($files)" /> If it resolve your issue please mark as answer.

Suvendu Shekhar Giri · Answer

Anything you have tried so far?

Crud operation using mvc angularjs on Fileuplode

Answers (2)