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"

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"
       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 file

    • video/* means any audio file

    • image/* means any audio file

Multiple files

Simply add multiple, and brackets [] after the name.

<input type="file"
       accept="image/webp, image/png, image/jpeg"


Hack add enctype=multipart/mime to FORM; does not appear to be needed ( with AJAX forms enabled ).

    // 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');

Last updated