Angularjs File Upload and Send to Api Jsfiddle
I have previously written couple of articles on file upload, especially multiple file upload in Asp.Net , along with other technologies such as Spider web API, HTML5 and JQuery etc. At present, in this article I am going to share with you a unproblematic case on how to upload multiple files in AngularJS and Asp.Net Web API.
Every new version of AngularJS looks promising and information technology's opening new opportunities for frontend developers. If you are working on Single Page Applications using Angular, then I am sure you will detect this article and its case, very useful.
👉 File upload example using HTML5, jQuery Ajax and Web API in Asp.Cyberspace
Web API controller
The Web API controller, which I am going to employ in this example, has the procedure for uploading the files at the server side. I have used this process many times in other articles. Therefore, I have at present dedicated a separate postal service explaining the File Upload procedures in the API. This will spare me from writing the codes multiple times. Its written is C# and Vb.Net.
I am using XMLHttpRequest methods, in this example, to make calls to my API. Therefore, please click the below link and bank check the Web API controller.
The Web API Controller with the File Upload Procedure
In one case yous accept created the API, it'due south time to create the web folio, using few AngularJS directives.
AngularJS View
<!DOCTYPE html> <html> <head> <title>File Upload Example in AngularJS</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> </head> <body ng-app="fupApp"> <div ng-controller="fupController"> <input type="file" id="file" proper noun="file" multiple onchange="angular.element(this).scope().getFileDetails(this)" /> <input blazon="button" ng-click="uploadFiles()" value="Upload" /> <p><progress id="pro" value="0"></progress></p> </div> </torso>
In the markup section, I have three elements (2 input and 1 progress) packed inside a DIV element with ng-controller directive , defining the application controller. The <input> blazon file, is an HTML5 input type that will allow us to select multiple files at a time.
The elements onchange event will call the getFileDetails() function in the $telescopic using athwart.element() method.
The angular.chemical element() method is an interface between jQuery and AngularJS. Angular says, "use this method if yous are not using jQuery in your application". Therefore, when you select files, the angular.element calls the role defined in the scope.
Ref: Learn more almost athwart.chemical element
The Controller and the Scope
<script> var myApp = angular.module('fupApp', []); myApp.controller('fupController', part ($scope) { $scope.getFileDetails = role (e) { $telescopic.files = []; $scope.$employ(function () { for (var i = 0; i < e.files.length; i++) { $scope.files.push button(e.files[i]) } }); }; $scope.uploadFiles = function () { var data = new FormData(); for (var i in $scope.files) { information.append("uploadedFile", $scope.files[i]); } var objXhr = new XMLHttpRequest(); objXhr.addEventListener("progress", updateProgress, false); objXhr.addEventListener("load", transferComplete, imitation); objXhr.open("Mail", "/api/fileupload/"); objXhr.send(information); } office updateProgress(e) { if (eastward.lengthComputable) { document.getElementById('pro').setAttribute('value', eastward.loaded); document.getElementById('pro').setAttribute('max', eastward.total); } } function transferComplete(east) { alert("Files uploaded successfully."); } }); </script> </html> 👉 How to upload file in AngularJS using $http postal service and FormData
-----------------
Browser Support:
Chrome 39.0 - Yep | FireFox 34.0 - Yes | Edge 85 - Yes | Safari 5.ane.seven - No
Note: Safari (v five.1.vii) cannot upload multiple files using XMLHttpRequest(). It will upload just one file at a fourth dimension. This version does not support HTML5 <progress> element either. Therefore, if you are using Safari then I propose you download Safari vi or above (if possible) to make this example work.
-----------------
Function getFileDetails() inside the controller, takes a single parameter. This function is chosen when, you lot select files using the <input> file blazon, from the application view. The parameter has the elements information, such as, file type, number of files, names etc. Afterwards, we will store each file's information in an array.
The 2d method uploadFiles() is called when the user clicks the upload push.
$scope.uploadFiles = function ()
To upload the files, first I am using FormData() object to collect the file details from the array $scope.files[]. In one case I have extracted the details, I'll make a call to the Web API for upload. To do this I am using XMLHttpRequest. This is 1 of simplest method to brand http requests, using both GET and Postal service. Here, still I take to make a POST request, since I am sending file to the server to upload.
Before sending the information for processing, I take added two listeners, one for the progress of the file upload and the other a confirmation when it's done.
objXhr.addEventListener("progress", updateProgress, fake);
objXhr.addEventListener("load", transferComplete, false);
To show the progress, I have added an HTML5 <progress> chemical element in the markup section. In the controller, I have declared a function that will update the progress for every byte information technology transfers.
The first listener (for progress) calls the updateProgress() function and receives values in bytes. I am assigning the values to <progress> elements two attributes, that is, value and max.
function updateProgress(e) { if (e.lengthComputable) { certificate.getElementById('pro').setAttribute('value', e.loaded); document.getElementById('pro').setAttribute('max', eastward.full); } } That's it. Hope you discover this article and its example useful.
← Previous Next →
reardonfichames1940.blogspot.com
Source: https://www.encodedna.com/angularjs/tutorial/angularjs-multiple-file-upload-example-with-webapi.htm
Post a Comment for "Angularjs File Upload and Send to Api Jsfiddle"