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>