When adding a file upload field to a form, developers often need to specify which file types should be accepted. This is particularly useful for improving user experience and ensuring security by restricting uploads to only the necessary file formats.
The Accept Attribute
In HTML, the <input> element for file uploads supports the accept attribute, which allows developers to define the types of files users can select. The accept attribute can take various arguments based on MIME types, file extensions, or specific categories.
For example:
image/png, image/jpeg
In this example, only PNG and JPEG images will be selectable when users browse for files to upload.
Setting the Accept Attribute in WS Form
In WS Form, the accept attribute is set in the File Upload field settings in the Advanced tab.
Accept Argument Formats
The accept attribute can take three types of arguments:
1. File Extensions
You can use file extensions using a dot (.) followed by the extension. This is probably the easiest way of restricting the types of files that can be uploaded.
For example:
.jpg, .png, .gif
In this example, the file upload field would restrict the file selection to JPEG, PNG, and GIF image files.
.doc, .docx, .xls, .xlsx
In this example, the file upload field would restrict the file selection to Microsoft Word and Microsoft Excel files.
2. MIME Types
MIME (Multipurpose Internet Mail Extensions) types specify the format of a file. Common MIME types include:
- Images:
image/png,image/jpeg,image/gif - Audio:
audio/mpeg,audio/wav - Video:
video/mp4,video/webm - PDF:
application/pdf - Microsoft Word (.doc)
application/msword - Microsoft Word (.docx)
application/vnd.openxmlformats-officedocument.wordprocessingml.document
For example:
application/pdf
In this example, the file upload field would restrict the file selection to PDF files.
Learn more: Common MIME Types
3. Wildcard MIME Types
Wildcard MIME type selection can also be used, allowing any format of a particular media type.
For example:
image/*allows all image formats.audio/*allows all audio formats.video/*allows all video formats.
Combining Multiple Accept Arguments
You can specify multiple accept arguments by separating them with commas.
For example:
image/jpeg, image/png, .pdf
This allows users to select JPEG or PNG images, as well as PDF documents.