Post
Ask Question

Image Upload Using AngularJS in ASP.NET

Web.config File
  1. <appSettings>  
  2.    <add key="Filesize" value="50KB"/>  
  3.    <add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\TempImageFiles\;" />  
  4. </appSettings>  
Asp File
  1. Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load  
  2. Try  
  3. Response.Clear()  
  4. Dim fileid As String = System.Guid.NewGuid.ToString()  
  5. Dim imgsize As String = ConfigurationManager.AppSettings("Filesize")  
  6. Dim a As String = Context.Request.Files.Get(0).ContentLength.ToString  
  7. Dim b As String = Math.Round(a / 1024)  
  8. Dim c As String = imgsize.Replace(("KB").ToString, "")  
  9. If Val(b) < Val(c) Then  
  10.     Context.Request.Files.Get(0).SaveAs("D:\manish\Project\Project\upload\" & fileid & ".jpg")  
  11.     Response.Write("True|" & fileid)  
  12. Else  
  13.     Response.Write("False|Select File Less Then " + imgsize + " || Your File Size is " + b + " KB")  
  14. End If  
  15. Response.End()  
  16. Catch ex As ArgumentOutOfRangeException  
  17. MsgBox("'Select A File' Then Click On Upload Button")  
  18. End Try  
  19. End Sub  
JS File
  1. var myApp = angular.module('myApp', ['ui.bootstrap']);  
  2. //upload a file code  
  3. myApp.directive('fileModel', ['$parse', function($parse) {  
  4.     return {  
  5.         restrict: 'A',  
  6.         link: function(scope, element, attrs) {  
  7.             var model = $parse(attrs.fileModel);  
  8.             var modelSetter = model.assign;  
  9.             element.bind('change', function() {  
  10.                 scope.$apply(function() {  
  11.                     modelSetter(scope, element[0].files[0]);  
  12.                 });  
  13.             });  
  14.         }  
  15.     };  
  16. }]);  
  17. myApp.service('fileUpload', ['$http', function($http) {  
  18.     this.uploadFileToUrl = function(file, uploadUrl) {  
  19.         var fd = new FormData();  
  20.         fd.append('file', file);  
  21.         $http.post(uploadUrl, fd, {  
  22.             transformRequest: angular.identity,  
  23.             headers: {  
  24.                 'Content-Type': undefined  
  25.             }  
  26.   
  27.         })  
  28.   
  29.             .success(function(data) {  
  30.             if (data.split("|")[0] == "True") {  
  31.                 $("#getimg").attr('src', 'upload/' + data.split("|")[1] + '.jpg');  
  32.                 $("#hid").val(data.split("|")[1] + ".jpg");  
  33.                 var img = $("#hid").val();  
  34.                 if (img == "noimage.jpg") {  
  35.                     $("#Remov").hide();  
  36.                 } else {  
  37.                     $("#Remov").show();  
  38.                 }  
  39.   
  40.             } else if (data.split("|")[0] == "False") {  
  41.                 alert(data.split("|")[1]);  
  42.                 var ab = $("#hid").val();  
  43.                 $("#getimg").attr('src', 'upload/' + ab);  
  44.                 var img = $("#hid").val();  
  45.                 if (img == "noimage.jpg") {  
  46.                     $("#Remov").hide();  
  47.                 } else {  
  48.                     $("#Remov").show();  
  49.                 }  
  50.   
  51.             }  
  52.         })  
  53.             .error(function() {  
  54.             if ($(myFile).val() == "") {  
  55.                 alert("Select a file");  
  56.             } else {  
  57.                 alert("Select a image file");  
  58.             }  
  59.         });  
  60.     }  
  61. }]);  
  62.   
  63. $scope.uploadFile = function() {  
  64.     var fileval = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];  
  65.     if ($(myFile).val() == "") {  
  66.         alert("Select a file");  
  67.     } else if ($.inArray($(myFile).val().split('.').pop().toLowerCase(), fileval) == -1) {  
  68.         alert("Select a image file");  
  69.         $(myFile).val('');  
  70.         $("#hid").val("noimage.jpg");  
  71.     } else {  
  72.         var file = $scope.myFile;  
  73.         var uploadUrl = "Image_Upload.aspx";  
  74.         fileUpload.uploadFileToUrl(file, uploadUrl);  
  75.         $scope.myFile = "";  
  76.         $scope.remove = true;  
  77.         var reader = new FileReader();  
  78.         reader.onload = function(e) {  
  79.             scope.image = e.target.result;  
  80.             scope.$apply();  
  81.         }  
  82.     }  
  83.   
  84.     elem.on('change', function() {  
  85.         reader.readAsDataURL(elem[0].files[0]);  
  86.     });  
  87.     return false;  
  88. };