When creating the simple-file-upload input
component, add a data
attribute of accepted
.
You can use data-accepted=image/*
to allow only image files.
You can use any valid filename extension, starting with a period (".") character. For example: .jpg, .pdf, or .doc.
You can also provide a list of file types if you'd like to allow more than one.
Allow only jpegs
<input class="simple-file-upload" data-accepted="image/jpeg"
type="hidden" name="user[avatar_url]" id="user_avatar_url">
Allow all image types
<input class="simple-file-upload" data-accepted="image/*" type="hidden" name="user[avatar_url]" id="user_avatar_url">
Allow only pdf files
<input class="simple-file-upload" data-accepted=".pdf" type="hidden" name="user[avatar_url]" id="user_avatar_url">
Allow images and pdf files
<input class="simple-file-upload" data-tag="website-files" type="hidden" name="user[icon_url]"
id="user_icon_url" data-accepted ="image/*, .pdf">
When creating the simple-file-upload input
component, add a data
attribute of maxFileSize
.
You can use data-maxFileSize=3
to limit uploaded file size to 3 MB for example.
The maxFileSize
cannot exceed the file size for your plan.
Limit uploaded files to 3MB.
<input class="simple-file-upload" data-maxFileSize="3"
type="hidden" name="user[avatar_url]" id="user_avatar_url">
If you're using Ruby on Rails form helpers, the data attributes are specified like this:
<%= f.hidden_field :avatar_url, class: "simple-file-upload", data: { accepted: "image/*", maxFileSize: "3"} %>