# File Uploads

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.;

```html
<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.&#x20;

```html
<input type="file"
       name="avatar"
       accept=".webp, .png, image/jpeg">
```

You specify the [unique file-type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#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. &#x20;

![](/files/iG3YiRasURNFIjmPvSNp)

Generally you can specify;&#x20;

* Valid case-insensitive file extensions such as `.pdf`
* Valid MIME type strings, e.g. `image/jpeg`
* File-type category specifiers-&#x20;
  * `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.&#x20;

```html
<input type="file"
       name="avatar[]"
       accept="image/webp, image/png, image/jpeg"
       multiple>
```

<https://usebasin.com/docs/features/file-uploads>

## Notes&#x20;

<https://usebasin-recaptcha.webflow.io/ajaxified>

<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file>

<https://discourse.webflow.com/t/how-to-add-file-upload-input-to-a-webflow-form-with-basin-endpoint/100977/8>

<https://discourse.webflow.com/t/form-submissions-to-third-party-service-with-native-interactions/63401/49?page=2>

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

{% code overflow="wrap" %}

```html
<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>
```

{% endcode %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://attr.sygnal.com/sa5-forms/webhook-handler/basin/file-uploads.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.