Uploading images via Ajax

With default file input fields, it quickly becomes obvious that there is a lot we could do to improve the user experience. First, only the path to the selected file is displayed within the field, whereas people want to see what they have chosen right after selecting the file. Second, the file input itself is generally too narrow to show much of the path selected, and reads from the left end. As a result, the filename is rarely visible within the field. Finally, if the form has validation errors, nobody wants to select the files again; the file should still be selected in the form with validation errors. In this recipe, we will see how to do this.

Getting ready

Let's start with the quotes app...