AngularJS File Upload Formdata
Last Updated : Mar 11, 2024
IN - Angular JS | Written & Updated By - Dikshita
In this tutorial we will show you the solution of angularjs file upload formdata, as we know in html how to create upload file option using <input> tag with ‘file’ type same as in angularjs also but here we can do more process by types of directives and attributes.
Here we defined and created uploading file only accepts image contain files on without accept attribute we can upload any type of file it will accept it depends on developer code we can change it.
Step By Step Guide On AngularJS File Upload Formdata :-
In our application we defined upload option in <input> tag with ‘file’ type.
So it can allow any files to upload on our webpage but we defined attribute ‘accept’ with ‘image/*’ so this allows image type files only by user can upload and image with any type of extension also it can accept like (.jpg,.jpeg,.png,.gif,..etc).
Using ng-value directive we can retrieve file name and sets to value attribute value then in attribute ‘set-file-data’ we sets file data.
<!DOCTYPE html>
<html>
<head>
<title>UploadFile</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script>
</head>
<body>
<input accept="image/*" name="file"
type="file" ng-value="fileToUpload" value="{{fileToUpload}}" file-model="fileToUpload"
set-file-data="fileToUpload= value;">
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- This file contains angularjs is distributed as a javascript file and added to webpage must added by using <script> tag.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contains coding of entire website blocks and elements described here.
- In <input> with file type we defined for uploading files with that we defined more directives of ‘ng-value,file-model,set-file-data’.
- Ng-value is used to set the value attribute of an input element, or a select element. Here we used to sets value ‘fileToUpload’.
- File-model is lightweight and small directive that allows to use like ‘ng-model’ in input element. Here we used to collects file value ‘fileToUpload’.
- Set-file-data is used to sets data by value attribute value pointed with ‘fileToUpload’. In accept attribute ‘image/*’- image refers image type files, * refers image with any extension of files can accepted.
- Both </body> ,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to create file upload using angularjs.
When we executing angularjs file some of those needs internet connection because we used some external library supports so we need to use internet connection when you’re facing problems.
In our program when user executing this on browser it will shows upload option using user can upload any type of image files.
For accepting other type of files also means in input accept attribute value needs to change as ‘*’ only so it can accept all types of file.
I hope this tutorial on angularjs file upload formdata helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
