File Uploads
Uploads are Easy with Basin
Basin also supports File Uploads. This is easily added to your Webflow forms by placing an HTML Embed with a file input element, e.g.;
<input type="file"
name="avatar">
Restricting File Types
If you just want a specific type of image, the accept param can be added to restrict file types.
<input type="file"
name="avatar"
accept=".webp, .png, image/jpeg">
You specify the unique file-type specifiers of the files you want to allow, and browsers will generally do a good job of restricting the file types that can be uploaded based on that.
Generally you can specify;
Valid case-insensitive file extensions such as
.pdf
Valid MIME type strings, e.g.
image/jpeg
File-type category specifiers-
audio/*
means any audio filevideo/*
means any audio fileimage/*
means any audio file
Multiple files
Simply add multiple
, and brackets []
after the name.
<input type="file"
name="avatar[]"
accept="image/webp, image/png, image/jpeg"
multiple>
https://usebasin.com/docs/features/file-uploads
Notes
https://usebasin-recaptcha.webflow.io/ajaxified
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
Hack add enctype=multipart/mime to FORM; does not appear to be needed ( with AJAX forms enabled ).
<script>
// Get the closest form element relative to the script tag
const scriptTag = document.currentScript;
const formContainer = scriptTag.closest('form');
if (formContainer) {
formContainer.setAttribute('enctype', 'multipart/form-data');
}
</script>
Last updated
Was this helpful?