0

I have to admit that I'm not very experienced with web development. Today I had to implement an AJAX file upload in an AngularJS. It is a single page application, so there should be no page refresh. It also should work with the major browsers (including IE8) and should be not restrict possible designs.

In the end I found angular-file-upload, which seems to work, but it took longer that I expected. Also I'm not sure whether there is a simpler solution that I have overlooked.

I was surprised that there are a variety of solutions to the problem (the most recent ones seem to rely on FormData, as in this SO answer, requiring IE >= 10). There are also a lot of fallbacks for older browsers (including iframes and flash).

Because of the rapid development in the last years, I wonder:

  • Is there meanwhile an established standard to implement non-reloading AJAX file uploads?
  • If not, what techniques are still relevant and what should now be avoided?
  • Assuming you need only to support bleeding edge browsers: What solution do you consider the most elegant? (In other words, what might become the recommended solution in the next years?)
Community
  • 1
  • 1
Philipp Claßen
  • 41,306
  • 31
  • 146
  • 239
  • It all depend on your needs, list what you need, list the solutions, then make the correlation – Jonathan de M. Jun 11 '14 at 23:06
  • 1
    The HTML5 standard is to use FormData. That is also by far the most elegant -assuming you are willing to allow only browsers that support FormData. The fallbacks you reference are the older techniques. As to what to use and avoid – Robert Munn Jun 11 '14 at 23:22
  • 1
    Sorry, tiny keyboard, I fat-fingered the Return key. IMHO iframes is a good way to go to avoid browser plugins, but maybe plugins are OK for your project, in which case there are plenty of options for Flash-based file uploaders, and some of them are quite nice. The HTML5 FormData technique evolved, I think, to address this mess of kludges and provide a native JavaScript method for uploading files. – Robert Munn Jun 11 '14 at 23:37
  • @JonathandeM. At the moment, the requirements are: cross-browser non-reloading asynchronous file upload. Should support at least Firefox, Chrome, Safari, IE >= 8 and also be recent mobile devices (especially iOS). The result should be designer in the sense that the solution should not restrict the design. Showing the upload progress is currently not required. The best approach that I am aware of is to pick one of the many libraries (beside angular-file-upload there are many JQuery plugins). They mostly seem to use FormData in newer browser and iframes as the fallback mechanism. – Philipp Claßen Jun 11 '14 at 23:40
  • @RobertMunn Thanks, I think I should learn more about FormData. It is interesting that Flash still remained a viable option (it is also used by some libraries, e.g., Uploadify). I wonder why. Maybe the advantage of Flash is that security concept is less severe than native Javascript (does flash have something like a "same origin-policy"?). However, I never programmed with Flash, so I'm merely guessing. – Philipp Claßen Jun 12 '14 at 00:06

0 Answers0