> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-forms/image-upload/image-upload-technical-notes.md).

# Image Upload Technical Notes

## Webflow's File Upload Element 

{% hint style="warning" %}
Currently unsupported. 
{% endhint %}

<figure><img src="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2FKYQGFamOzDqtXB4tsdhE%2Fimage.png?alt=media&amp;token=939b90d4-9256-4d75-8bf3-342bd89c4223" alt=""><figcaption></figcaption></figure>

* Appears to upload first, prior to form submission ( like UploadCare ) &#x20;
* Highly stylable&#x20;
* No drag-drop&#x20;

### Designer UX

<figure><img src="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2FjxXhJ0coJvXM7pgcbwOI%2Fimage.png?alt=media&amp;token=365e1a75-b566-47e3-bb03-e37b02dfe110" alt=""><figcaption></figcaption></figure>

```html
<div class="w-file-upload">
  <div class="w-file-upload-default">
    <input
      class="w-file-upload-input"
      accept=""
      name="file"
      data-name="File"
      aria-hidden="true"
      type="file"
      id="file"
      tabindex="-1"
      style="height: 49.3333px; width: 1px;"
    />
    <label for="file" role="button" tabindex="0" class="w-file-upload-label">
      <div class="w-icon-file-upload-icon" aria-hidden="true"></div>
      <div class="w-inline-block">Upload File</div>
    </label>
    <div class="w-file-upload-info">Max file size 10MB.</div>
  </div>

  <div tabindex="-1" class="w-file-upload-uploading w-hidden">
    <div class="w-file-upload-uploading-btn">
      <svg
        class="w-icon-file-upload-uploading"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 30 30"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          opacity=".2"
          d="M15 30a15 15 0 1 1 0-30 15 15 0 0 1 0 30zm0-3a12 12 0 1 0 0-24 12 12 0 0 0 0 24z"
        ></path>
        <path
          fill="currentColor"
          opacity=".75"
          d="M0 15A15 15 0 0 1 15 0v3A12 12 0 0 0 3 15H0z"
        >
          <animateTransform
            attributeName="transform"
            attributeType="XML"
            dur="0.6s"
            from="0 15 15"
            repeatCount="indefinite"
            to="360 15 15"
            type="rotate"
          ></animateTransform>
        </path>
      </svg>
      <div class="w-inline-block">Uploading...</div>
    </div>
  </div>

  <div tabindex="-1" class="w-file-upload-success w-hidden">
    <div class="w-file-upload-file">
      <div class="w-file-upload-file-name">fileuploaded.jpg</div>
      <div
        aria-label="Remove file"
        role="button"
        tabindex="0"
        class="w-file-remove-link"
      >
        <div class="w-icon-file-upload-remove" aria-hidden="true"></div>
      </div>
    </div>
  </div>

  <div tabindex="-1" class="w-file-upload-error w-hidden">
    <div
      class="w-file-upload-error-msg"
      data-w-size-error="Upload failed. Max size for files is 10 MB."
      data-w-type-error="Upload failed. Invalid file type."
      data-w-generic-error="Upload failed. Something went wrong. Please retry."
    >
      Upload failed. Max size for files is 10 MB.
    </div>
  </div>
</div>

```