AngularJS Upload File Tutorial – Meul Tech
Hello friends, today we will show you how to upload a file in angularjs. File uploading in Angular is extremely easy. In this ‘AngularJS upload file’ tutorial, you will learn the best and the easiest technique to upload file.
Step 1:
Create a file-upload.html file.
[php]
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<title>AngularJS Upload File Tutorial – Meul Tech </title>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%09var%20app%20%3D%20angular.module(%22myapp%22%2C%20%5B%5D)%3B%0A%09%09%20%20app.directive(‘myDirective’%2C%20function%20(httpPostFactory)%20%7B%0A%09%09%09return%20%7B%0A%09%09%09%09restrict%3A%20’A’%2C%0A%09%09%09%09scope%3A%20true%2C%0A%09%09%09%09link%3A%20function%20(scope%2C%20element%2C%20attr)%20%7B%0A%0A%09%09%09%09%09element.bind(‘change’%2C%20function%20()%20%7B%0A%09%09%09%09%09%09var%20formData%20%3D%20new%20FormData()%3B%0A%09%09%09%09%09%09formData.append(‘file’%2C%20element%5B0%5D.files%5B0%5D)%3B%0A%09%09%09%09%09%09httpPostFactory(‘file-upload.php’%2C%20formData%2C%20function%20(callback)%20%7B%0A%09%09%09%09%09%09%20%20%20%2F%2F%20recieve%20image%20name%20to%20use%20in%20a%20ng-src%20%0A%09%09%09%09%09%09%09alert(%22file%20uploaded%22)%3B%0A%09%09%09%09%09%09%09console.log(callback)%3B%0A%09%09%09%09%09%09%7D)%3B%0A%09%09%09%09%09%7D)%3B%0A%0A%09%09%09%09%7D%0A%09%09%09%7D%3B%0A%09%09%7D)%3B%0A%0A%09%09app.factory(‘httpPostFactory’%2C%20function%20(%24http)%20%7B%0A%09%09%09return%20function%20(file%2C%20data%2C%20callback)%20%7B%0A%09%09%09%09%24http(%7B%0A%09%09%09%09%09url%3A%20file%2C%0A%09%09%09%09%09method%3A%20%22POST%22%2C%0A%09%09%09%09%09data%3A%20data%2C%0A%09%09%09%09%09headers%3A%20%7B’Content-Type’%3A%20undefined%7D%0A%09%09%09%09%7D).success(function%20(response)%20%7B%0A%09%09%09%09%09callback(response)%3B%0A%09%09%09%09%7D)%3B%0A%09%09%09%7D%3B%0A%09%09%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</head>
<body ng-app="myapp">
<input data-my-Directive type="file" name="file">
<h3>By <a href="https://www.mehulprajapati.com">Meul Tech </a></h3>
</body>
</html>
[/php]
Step 2:
Next, create a ‘file-upload.php’ file that completes the file upload process in angularjs.
[php]
<?php if (isset($_FILES[‘file’]) && $_FILES[‘file’][‘error’] == 0) { // uploads image in the folder images $temp = explode(".", $_FILES["file"]["name"]); $newfilename = substr(md5(time()), 0, 10) . ‘.’ . end($temp); move_uploaded_file($_FILES[‘file’][‘tmp_name’], ‘images/’ . $newfilename); // give callback to your angular code with the image src name echo json_encode($newfilename); } ?>
[/php]
Finally, our code is finished. Now hit the url and run your code to see the output. Thanks for reading the tutorial.
Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.
You may want to take a look at the following related posts:
- Facebook Wall System Using Angular JS with Multiple Bindings Tutorial
- AngularJS TO-DO List Application
- Angular Create Read Update Delete Tutorial
- AngularJS Instant Search Example
Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .
Bonus: We also give training on following topics:
1. Angular Training in Mumbai.
2. Bootstrap Training Course in Mumbai.
3. Web Designing Training in Mumbai.
4. UI / UX Training.
5. IOS Training Institute in Mumbai.