In this article we will show you the solution of image upload in angularjs, a FileUpload element (Input Type File) can be used to upload an Image File.
The Image File data will be read using HTML5 FileReader API and displayed in the Image element using AngularJS.
AngularJS directives ng-app and ng-controller have been assigned to the below HTML Markup.
Step By Step Guide On Image Upload In AngularJS :-
A FileUpload element (Input Type File) is included in the HTML markup, along with an Image element.
OnChange event handlers have been assigned to HTML FileUpload (Input Type File) elements.
Upon selecting an Image File in the HTML FileUpload element (Input Type File), HTML5 FileReader API is used to read the Image File data and assign it to a Model variable.
An Image is displayed in the HTML Image element by using the Model variable assigned to the ng-src directive.
An ng-show directive is also assigned to the Image element, which displays the HTML image element only when the Model variable does not contain NULL.
When an image element has an ng-src directive, the src attribute is overridden.
In the case of AngularJS code inside the src value, you should use ng-src instead of src.
AngularJS evaluates the code before evaluating the ng-src directive to ensure the image is not displayed incorrectly.
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.SelectFile = function (e) {
var reader = new FileReader();
reader.download = function (e) {
$scope.PreviewImage = e.target.result;
$scope.$apply();
};
reader.readAsDataURL(e.target.files[0]);
};
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<input type="file" onchange="angular.element(this).scope().select file(event)" />
<hr />
<img ng-src="{{PreviewImage}}" ng-show="PreviewImage != null" alt="" style="height:200px;width:200px" />
</div>
</body>
</html>
- In our first step, we write <HTML>, which tells the browser what HTML version we're using. Documents in HTML begin with tags.
- Using the <head> tag, we will explain the project's heading.
- Both <head> and <title> tags are paired tags. So both have </head> and </title> ending tags respectively.
- This is followed by the <body> tag that defines the body of the webpage. This is where all the content for the website is written.
- AngularJs is a JavaScript framework. It can be added to an HTML page with a <script> tag. The script tag explains the source code we used for the angularjs google API run and the file we used for the code.
- Read this method and receive the file as a parameter from the listener. A FileReader has been implemented by reading this. The FileReader can also be defined as a component instead of a function.
- This is followed by the ng-app directive, which defines the Angular JS application. A controller for the application is specified by the "ng-controller" directive within the ng-app directive.
- The input tag is used to input text and to create files using the change tag.
- HTML FileUpload (Input Type File) reads Image File data using HTML5 FileReader API and displays it in Image element using AngularJS if Image File is selected.
- Then we closed </body> and </html> then execute the code.
Conclusion :-
The cool part is the undefined content type and the transform request: an angular.
An identity that gives at the $http the ability to choose the right "content type" and manage the boundary needed when handling multipart data.
When an Image File is selected in the HTML FileUpload element (Input Type File), the Image File data will be read using HTML5 FileReader API and the Image data is assigned to a Model variable.
The Model variable is assigned to the ng-src directive which displays the Image in the HTML Image element.
I hope this article on image upload in angularjs helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
