Django 3 Web Development Cookbook - Fourth Edition

Uploading images via Ajax

With the 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 the file uploads could be improved.