Image Upload Technical Notes
Webflow's File Upload Element
Currently unsupported.

Appears to upload first, prior to form submission ( like UploadCare )
Highly stylable
No drag-drop
Designer UX

<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>
Last updated