Ajax Form + Upload Widget
Our upload widget is implemented using the techniques outlined in
Styling & Customizing File Inputs the Smart Way and
and Drop File Uploading by Osvaldas Valutis.
We use an
<upload-widget> with a nested
<input is="upload-input"> to progressively enhance
the front end. However, using them is rarely needed in practice, as
frontend.upload.UploadWidget contains the Django
widget for rendering all the required HTML.
Due to the technical limitations of HTML5, forms containing the
progressively-enhanced upload widget must be submitted via ajax. This can
be accomplished via a custom
frontend.ajaxform contains utilities for processing
forms submitted by this web component in a progressively-enhanced way.
For a simple ajax form code example that also embeds an upload
Any response from the ajax form that dynamically updates content on
the page instead of redirecting the user to a new page should
<alerts-widget> which wraps
a message to inform users about what just happened. This will
automatically be focused when the content is injected into the
page, allowing screen readers to announce it.
To experience this in action, try submitting invalid data into the
example form above.
Note that the upload widget gracefully degrades to a standard HTML
file input if either JS is disabled or any required HTML5 features
In some cases, it may be preferable to indicate to a user that a
file upload field is not only optional, but that a default which
the user has uploaded earlier will be used if nothing else is
The baseline experience simply explains to the user that leaving
the field blank will result in the use of their previously-uploaded
The server, of course, will not receive any data if the user
doesn't supply a file. Finding and using the previously uploaded
file is the server's responsibility.
However, if proper browser support exists, the user experience is
progressively enhanced: the widget will appear populated,
but as with the baseline experience, the server will not actually
receive any data unless the user explicitly chooses a different file.