File Upload using AngularJS

Some of the answers here propose using FormData(), but unfortunately that is a browser object not available in Internet Explorer 9 and below. If you need to support those older browsers, you will need a backup strategy such as using or Flash.<br /> There are already many Angular.js modules to perform file uploading. These two have explicit support for older browsers:</p> <p>https://github.com/leon/angular-upload – uses iframes as a fallback<br /> https://github.com/danialfarid/ng-file-upload – uses FileAPI/Flash as a fallback</p> <p>And some other options:</p> <p>https://github.com/nervgh/angular-file-upload/<br /> https://github.com/uor/angular-file<br /> https://github.com/twilson63/ngUpload<br /> https://github.com/uploadcare/angular-uploadcare</p> <p>One of these should fit your project, or may give you some insight into how to code it yourself.</p> <p>The easiest is to use HTML5 API, namely FileReader<br /> HTML is pretty straightforward:<br /> <input type="file" id="file" name="file"/><br /> <button ng-click="add()">Add</button></p> <p>In your controller define ‘add’ method:<br /> $scope.add = function() {<br /> var f = document.getElementById(‘file’).files[0],<br /> r = new FileReader();</p> <p> r.onloadend = function(e) {<br /> var data = e.target.result;<br /> //send your binary data via $http or $resource or do anything else with it<br /> }</p> <p> r.readAsBinaryString(f);<br /> }</p> <p>Browser Compatibility<br /> Desktop Browsers</p> <p>Edge 12, Firefox(Gecko) 3.6(1.9.2),<br /> Chrome 7, Opera* 12.02, Safari 6.0.2</p> <p>Mobile Browsers </p> <p>Firefox(Gecko) 32,<br /> Chrome 3,<br /> Opera* 11.5,<br /> Safari 6.1</p> <p>Note : readAsBinaryString() method is deprecated and readAsArrayBuffer() should be used instead.</p> <div id='jp-relatedposts' class='jp-relatedposts' > <h3 class="jp-relatedposts-headline"><em>Related</em></h3> </div> </div><footer class="entry-footer"><p class="entry-meta"><span class="entry-categories">Filed Under: Uncategorized</span> </p></footer></article></main><aside class="sidebar sidebar-primary widget-area" role="complementary" aria-label="Primary Sidebar"><section id="search-2" class="widget widget_search"><div class="widget-wrap"><form class="search-form" method="get" action="https://www.configrouter.com/" role="search"><input class="search-form-input" type="search" name="s" id="searchform-1" placeholder="Search this website"><input class="search-form-submit" type="submit" value="Search"><meta content="https://www.configrouter.com/?s={s}"></form></div></section> <section id="recent-posts-3" class="widget widget_recent_entries"><div class="widget-wrap"> <h4 class="widget-title widgettitle">Recent Posts</h4> <ul> <li> <a href="https://www.configrouter.com/how-do-i-give-user-access-to-jenkins-34560/">How do I give user access to Jenkins?</a> </li> <li> <a href="https://www.configrouter.com/what-is-docker-volume-command-34559/">What is docker volume command?</a> </li> <li> <a href="https://www.configrouter.com/what-is-the-date-format-in-unix-34558/">What is the date format in Unix?</a> </li> <li> <a href="https://www.configrouter.com/what-is-the-difference-between-arg-and-env-docker-34557/">What is the difference between ARG and ENV Docker?</a> </li> <li> <a href="https://www.configrouter.com/what-is-rsync-command-linux-34556/">What is rsync command Linux?</a> </li> <li> <a href="https://www.configrouter.com/how-to-add-your-own-music-to-snapchat-16662/">How to Add Music to Snapchat 2021 Android? | How to Search, Add, Share Songs on Snapchat Story?</a> </li> <li> <a href="https://www.configrouter.com/how-to-turn-on-notifications-for-snapchat-16616/">How to Enable Snapchat Notifications for Android & iPhone? | Steps to Turn on Snapchat Bitmoji Notification</a> </li> <li> <a href="https://www.configrouter.com/fix-snapchat-camera-not-working-16674/">Easy Methods to Fix Snapchat Camera Not Working Black Screen Issue | Reasons & Troubleshooting Tips to Solve Snapchat Camera Problems</a> </li> <li> <a href="https://www.configrouter.com/how-to-update-snapchat-on-iphone-16646/">Detailed Procedure for How to Update Snapchat on iOS 14 for Free</a> </li> <li> <a href="https://www.configrouter.com/how-to-post-on-snapchat-spotlight-16654/">What is Snapchat Spotlight Feature? How to Make a Spotlight on Snapchat?</a> </li> <li> <a href="https://www.configrouter.com/how-to-hack-a-snapchat-account-tutorial-16685/">Snapchat Hack Tutorial 2021: Can I hack a Snapchat Account without them knowing?</a> </li> </ul> </div></section> </aside></div></div><footer class="site-footer"><div class="wrap"><p>Copyright © 2025 · <a href="http://my.studiopress.com/themes/news/">News Pro Theme</a> on <a href="https://www.studiopress.com/">Genesis Framework</a> · <a href="https://wordpress.org/">WordPress</a> · <a rel="nofollow" href="https://www.configrouter.com/wp-login.php">Log in</a></p></div></footer></div><script type="text/javascript" src="https://www.configrouter.com/wp-includes/js/comment-reply.min.js?ver=6.6.2" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <script type="text/javascript" src="https://stats.wp.com/e-202518.js" id="jetpack-stats-js" data-wp-strategy="defer"></script> <script type="text/javascript" id="jetpack-stats-js-after"> /* <![CDATA[ */ _stq = window._stq || []; _stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"111943956\",\"post\":\"24500\",\"tz\":\"5.5\",\"srv\":\"www.configrouter.com\",\"j\":\"1:13.7.1\"}") ]); _stq.push([ "clickTrackerInit", "111943956", "24500" ]); /* ]]> */ </script> </body></html>