File upload is standard functionality supported by HTML standard since 1995 (you can find more details about this topic here). Although this control is serving its purpose very well, in order to create control that is in compliance with modern web application UX standards, it requires significant amount of programming work and knowledge. Fortunately for all of us who are engaged in the development of web applications, some has already done this, and what left for us is to get acquainted with some of the existing controls for file-upload and learn how to use it and configure according to the needs of our application.
In our company for many years for these purposes we use pl-upload control that in addition to basic functionalities such as filtering by file type and defining the maximum size of the file also has a “drag and drop” functionality. Standards supported by this control are Flash, Silverlight, HTML 4 and HTML 5 (believe it or not pl-uplad can cope even with older versions of IE).
In the picture bellow you can see how pl-upload widget looks like.
Recently we have developed SPA (single page application) application using Angular.js and on this occasion we used plUpload angular directive , which is a wrapper around pl-upload control and supports a considerable number of functionalities from native plupload control.