Angular 12 CRUD Example
In this article, we will learn angular 12 CRUD example with web API as well as way to implement cascading dropdown, searching, sorting, and pagination...
May 30, 2021 read moreIn this article, we will learn angular 12 CRUD example with web API as well as way to implement cascading dropdown, searching, sorting, and pagination...
May 30, 2021 read moreIn this article i am going to explain how you can use angular js table with bootstrap 4 in asp.net web form, and also show you how you can display records...
December 08, 2018 read moreCodingvila also allowing a guest post for digital marketing, where you can explore your business, product, or services in terms of articles. write quality.......
August, 21, 2021 read moreIn this article, we will learn how to create a bar chart in angular 12 using ng2-charts. Here, I'll explain how to create an angular 12 project in visual........
May 29, 2021 read moreThis article gives an explanation about convert Datatable to CSV in c# and explains the efficient way to write CSV files from Datatable as well as show...
March 01, 2020 read moreThis article provides an explanation about how to merge multiple pdf files into single pdf in using Itextsharp in c# here I also explained the use of Itextsharp.
January 22, 2019 read more<script type="text/javascript"> var app = angular.module('fileUpload', ['ngFileUpload']); app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) { $scope.uploadPic = function (file) { file.upload = Upload.upload({ url: 'UploadHandler.ashx', data: { file: file } }); file.upload.then(function (response) { $timeout(function () { file.result = response.data; }); }, function (response) { if (response.status > 0) $scope.errorMsg = response.status + ': ' + response.data; }, function (evt) { file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total)); }); } }]); </script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script> <script src="scripts/ng-file-upload-shim.min.js" type="text/javascript"></script> <script src="scripts/ng-file-upload.min.js" type="text/javascript"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head data-ng-app="UploadApp"> <title>AngularJS File Upload Example in Asp.Net</title> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script> <script src="scripts/ng-file-upload-shim.min.js" type="text/javascript"></script> <script src="scripts/ng-file-upload.min.js" type="text/javascript"></script> <script type="text/javascript"> var app = angular.module('fileUpload', ['ngFileUpload']); app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) { $scope.uploadPic = function (file) { file.upload = Upload.upload({ url: 'UploadHandler.ashx', data: { file: file } }); file.upload.then(function (response) { $timeout(function () { file.result = response.data; }); }, function (response) { if (response.status > 0) $scope.errorMsg = response.status + ': ' + response.data; }, function (evt) { // Math.min is to fix IE which reports 200% sometimes file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total)); }); } }]); </script> <style type="text/css"> form .progress { line-height: 15px; } .progress { width: 100%; background-color: #ddd; } .progress div { width: 1%; height: 30px; background-color: #223c88; } .upload-btn-wrapper { position: relative; overflow: hidden; display: inline-block; } .btn { border: 2px solid gray; color: #fff; background-color: #223c88;; padding: 8px 20px; border-radius: 8px; font-size: 20px; font-weight: bold; } .upload-btn-wrapper input[type=file] { font-size: 100px; position: absolute; left: 0; top: 0; opacity: 0; } button { background-color: #4CAF50; /* Green */ border-radius: 8px; border: none; color: white; padding: 8px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } </style> </head> <body ng-app="fileUpload" ng-controller="MyCtrl"> <form name="myForm"> <h3>AngularJS File Upload Example in Asp.Net</h3> <div class="upload-btn-wrapper"> <button class="btn">Upload a file</button> <input type="file" ngf-select ng-model="picFile" name="file" multiple accept="image/*" ngf-max-size="2MB" required ngf-model-invalid="errorFile" /> </div> <div> <i ng-show="myForm.file.$error.required">Please select any files/images.</i><br> <i style="color: red" ng-show="myForm.file.$error.maxSize">File too large {{errorFile.size / 1000000|number:1}}MB: Max 1MB</i> </div> <br> <div> <button ng-disabled="!myForm.$valid" ng-click="uploadPic(picFile)">Submit</button> </div> <br> <div style="background-color: #f1f1f1!important"> <span style="color: #fff!important" class="progress" ng-show="picFile.progress >= 0"> <div style="width:{{picFile.progress}}%" ng-bind="picFile.progress + '%'"></div> </span> </div > <span style="color:#4CAF50!important" ng-show="picFile.result">Your Upload Successful</span> <span style="color:Red" class="err" ng-show="errorMsg">{{errorMsg}}</span> </form> </body> </html>
![]() |
Generic Handler |
![]() |
Add-Generic-Handler |
<%@ WebHandler Language="C#" Class="UploadHandler" %> using System; using System.Web; using System.IO; public class UploadHandler : IHttpHandler { public void ProcessRequest (HttpContext context) { if (context.Request.Files.Count > 0) { HttpFileCollection files = context.Request.Files; for (int i = 0; i < files.Count; i++) { HttpPostedFile file = files[i]; string fname; if (HttpContext.Current.Request.Browser.Browser.ToUpper() == "IE" || HttpContext.Current.Request.Browser.Browser.ToUpper() == "INTERNETEXPLORER") { string[] testfiles = file.FileName.Split(new char[] { '\\' }); fname = testfiles[testfiles.Length - 1]; } else { fname = file.FileName; } fname = Path.Combine(context.Server.MapPath("~/uploads/"), fname); file.SaveAs(fname); } } } public bool IsReusable { get { return false;} } }
<%@ WebHandler Language="VB" Class="Handler" %> Imports System.Web Imports System.IO Public Class Handler : Implements IHttpHandler Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest If context.Request.Files.Count > 0 Then Dim files As HttpFileCollection = context.Request.Files For i As Integer = 0 To files.Count - 1 Dim file As HttpPostedFile = files(i) Dim fname As String If HttpContext.Current.Request.Browser.Browser.ToUpper() = "IE" OrElse HttpContext.Current.Request.Browser.Browser.ToUpper() = "INTERNETEXPLORER" Then Dim testfiles As String() = file.FileName.Split(New Char() {"\"c}) fname = testfiles(testfiles.Length - 1) Else fname = file.FileName End If fname = Path.Combine(context.Server.MapPath("~/uploads/"), fname) file.SaveAs(fname) Next End If context.Response.ContentType = "text/plain" context.Response.Write("File Uploaded Successfully!") End Sub Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable Get Return False End Get End Property End Class
![]() |
AngularJS Select File |
![]() |
AngularJS File Upload Validation |
![]() |
AngularJS File Upload Successful |
Codingvila provides articles and blogs on web and software development for beginners as well as free Academic projects for final year students in Asp.Net, MVC, C#, Vb.Net, SQL Server, Angular Js, Android, PHP, Java, Python, Desktop Software Application and etc.
Thank you for your valuable time, to read this article, If you like this article, please share this article and post your valuable comments.
Once, you post your comment, we will review your posted comment and publish it. It may take a time around 24 business working hours.
Sometimes I not able to give detailed level explanation for your questions or comments, if you want detailed explanation, your can mansion your contact email id along with your question or you can do select given checkbox "Notify me" the time of write comment. So we can drop mail to you.
If you have any questions regarding this article/blog you can contact us on info.codingvila@gmail.com
Tutup Konverter!sentiment_satisfied Emoticon