AngularJS Upload File Tutorial



AngularJS Upload File Tutorial – TryCatch Classes

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.

<!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="&lt;script&gt;" title="&lt;script&gt;" />
  <title>AngularJS Upload File Tutorial - TryCatch Classes</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="&lt;script&gt;" title="&lt;script&gt;" />
</head>
 <body ng-app="myapp">
	<input data-my-Directive type="file" name="file">
<h3>By <a href="http://www.trycatchclasses.com/">TryCatch Classes</a></h3>
</body>
</html>

Step 2:

Next, create a ‘file-upload.php’ file that completes the file upload process in angularjs.

<?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); } ?>

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 becaus“You share, I share, let’s make the world aware”.

You may want to take a look at the following related posts:

Also for more awesome tutorials, please don’t forget to like our facebook page TryCatch Classes.

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.