Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div class="flex flex-col gap-8 p-16 max-w-lg mx-auto">
  <div class="midwest-input midwest-form-group type-file has-dropzone" data-controller="midwest-file">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="upload-ed70">
        Upload a file
      </label>
    </div>
    <div class="midwest-file-dropzone" data-midwest-file-target="dropzone" data-action="dragenter->midwest-file#dragenter dragover->midwest-file#dragover dragleave->midwest-file#dragleave drop->midwest-file#drop click->midwest-file#browse">
      <div class="midwest-file-dropzone-content">
        <svg class="midwest-file-dropzone-icon" viewBox="0 0 512 512" fill="none" aria-hidden="true">
          <path d="M320 367.79h76c55 0 100-29.21 100-83.6s-53-81.47-96-83.6c-8.89-85.06-71-136.8-144-136.8-69 0-113.44 45.79-128 91.2-60 5.7-112 43.88-112 110.4s54 102.4 112 102.4h68" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
          <path d="M256 245.09v192M176 313.09l80-80 80 80" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
        </svg>
        <p class="midwest-file-dropzone-text">Drop files here or click to browse</p>
      </div>
      <input type="file" name="upload" id="upload-ed70" data-midwest-file-target="input" class="midwest-file-dropzone-input" />
    </div>
    <output class="midwest-grid fit" name="preview" for="upload-ed70" data-midwest-file-target="output"></output>
  </div>
  <div class="midwest-input midwest-form-group type-file has-dropzone" data-controller="midwest-file">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="documents-ed78">
        Upload documents
      </label>
    </div>
    <div class="midwest-file-dropzone" data-midwest-file-target="dropzone" data-action="dragenter->midwest-file#dragenter dragover->midwest-file#dragover dragleave->midwest-file#dragleave drop->midwest-file#drop click->midwest-file#browse">
      <div class="midwest-file-dropzone-content">
        <svg class="midwest-file-dropzone-icon" viewBox="0 0 512 512" fill="none" aria-hidden="true">
          <path d="M320 367.79h76c55 0 100-29.21 100-83.6s-53-81.47-96-83.6c-8.89-85.06-71-136.8-144-136.8-69 0-113.44 45.79-128 91.2-60 5.7-112 43.88-112 110.4s54 102.4 112 102.4h68" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
          <path d="M256 245.09v192M176 313.09l80-80 80 80" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
        </svg>
        <p class="midwest-file-dropzone-text">Drop PDFs or Word documents here</p>
      </div>
      <input type="file" name="documents" id="documents-ed78" accept=".pdf,.doc,.docx" multiple="multiple" data-midwest-file-target="input" class="midwest-file-dropzone-input" />
    </div>
    <output class="midwest-grid fit" name="preview" for="documents-ed78" data-midwest-file-target="output"></output>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="flex flex-col gap-8 p-16 max-w-lg mx-auto">
  <%= render Midwest::Form::FileComponent.new(
    name: "upload",
    label: "Upload a file",
    dropzone: true,
    preview: true
  ) %>
  <%= render Midwest::Form::FileComponent.new(
    name: "documents",
    label: "Upload documents",
    dropzone: true,
    multiple: true,
    accept: ".pdf,.doc,.docx",
    dropzone_text: "Drop PDFs or Word documents here",
    preview: true
  ) %>
</div>

Dropzone

Use dropzone: true to render a drag-and-drop file upload area. Files can be dropped onto the zone or the user can click to browse.

No params configured.

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for File/dropzone

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."