Polaris ViewComponents

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<div class="Polaris-Labelled--hidden">
  <div class="Polaris-Labelled__LabelWrapper">
    <div class="Polaris-Label">
      <label class="Polaris-Label__Text"></label>
    </div>
  </div>
  <div data-polaris-dropzone-accept-value="" data-polaris-dropzone-allow-multiple-value="true" data-polaris-dropzone-disabled-value="false" data-polaris-dropzone-disabled-class="Polaris-DropZone--isDisabled" data-polaris-dropzone-focused-value="false" data-polaris-dropzone-drop-on-page-value="false" data-polaris-dropzone-render-preview-value="true" data-polaris-dropzone-size-value="extra_large" data-polaris-dropzone-remove-previews-after-upload-value="true" data-controller="polaris-dropzone" data-action="click->polaris-dropzone#onClick drop->polaris-dropzone#onDrop dragover->polaris-dropzone#onDragOver dragenter->polaris-dropzone#onDragEnter dragleave->polaris-dropzone#onDragLeave" class="Polaris-DropZone Polaris-DropZone--sizeExtraLarge Polaris-DropZone--hasOutline">
    <div
      class="Polaris-DropZone__Overlay Polaris-VisuallyHidden"
      data-polaris-dropzone-target="overlay"
    >
      <div class="Polaris-LegacyStack Polaris-LegacyStack--spacingTight Polaris-LegacyStack--vertical">
        <div class="Polaris-LegacyStack__Item">            
          <p class="Polaris-Text--root Polaris-Text--headingLg Polaris-Text--semibold">
            Drop files to upload
          </p>
        </div>
      </div>
    </div>
    <div
      class="Polaris-DropZone__Overlay Polaris-VisuallyHidden"
      data-polaris-dropzone-target="errorOverlay"
    >
      <div class="Polaris-LegacyStack Polaris-LegacyStack--spacingTight Polaris-LegacyStack--vertical">
        <div class="Polaris-LegacyStack__Item">          
          <p class="Polaris-Text--root Polaris-Text--headingLg Polaris-Text--semibold">
            This file type isn't accepted
          </p>
        </div>
      </div>
    </div>
    <div class="Polaris-DropZone__Container" data-polaris-dropzone-target="container">
      <div data-polaris-dropzone-target="fileUpload" class="Polaris-DropZone-FileUpload Polaris-DropZone-FileUpload--large">
        <div class="Polaris-LegacyStack Polaris-LegacyStack--spacingTight Polaris-LegacyStack--vertical">
          <div class="Polaris-LegacyStack__Item">                <img width="40" src="data:image/svg+xml,%3csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 10a10 10 0 11-20 0 10 10 0 0120 0zM5.3 8.3l4-4a1 1 0 011.4 0l4 4a1 1 0 01-1.4 1.4L11 7.4V15a1 1 0 11-2 0V7.4L6.7 9.7a1 1 0 01-1.4-1.4z' fill='%235C5F62'/%3e%3c/svg%3e" alt="">
          </div>
          <div class="Polaris-LegacyStack__Item">                  
            <div class="Polaris-DropZone-FileUpload__Button">
              Add files
            </div>
          </div>
          <div class="Polaris-LegacyStack__Item">
            <span class="Polaris-Text--root Polaris-Text--bodyMd Polaris-Text--subdued Polaris-Text--regular">
              or drop files to upload
            </span>
          </div>
        </div>
      </div>
      <div class="Polaris-DropZone__Loader Polaris--hidden" data-polaris-dropzone-target="loader">
        <span class="Polaris-Spinner Polaris-Spinner--sizeLarge">
          <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.542 1.487A21.507 21.507 0 00.5 22c0 11.874 9.626 21.5 21.5 21.5 9.847 0 18.364-6.675 20.809-16.072a1.5 1.5 0 00-2.904-.756C37.803 34.755 30.473 40.5 22 40.5 11.783 40.5 3.5 32.217 3.5 22c0-8.137 5.3-15.247 12.942-17.65a1.5 1.5 0 10-.9-2.863z" />
          </svg>
        </span>
      </div>
    </div>
    <span class="Polaris-Text--root Polaris-Text--bodyMd Polaris-Text--regular Polaris-Text--visuallyHidden">
      <input type="file" id="" accept="" multiple="multiple" data-polaris-dropzone-target="input" data-action="focus->polaris-dropzone#onFocus blur->polaris-dropzone#onBlur change->polaris-dropzone#onChange" />
    </span>
    <template data-polaris-dropzone-target="previewTemplate">
      <div data-polaris-dropzone-target="preview" class="Polaris-DropZone__Preview">
        <div class="Polaris-LegacyStack Polaris-LegacyStack--vertical">
          <span class="target"></span>
        </div>
      </div>
    </template>
    <template data-polaris-dropzone-target="itemTemplate">
      <div class="Polaris-LegacyStack__Item">
        <div class="Polaris-LegacyStack Polaris-LegacyStack--alignmentCenter">
          <div class="Polaris-LegacyStack__Item">              <span data-target="icon" style="border: none; background: none;" class="Polaris-Thumbnail Polaris-Thumbnail--sizeSmall">
              <span class="Polaris-Icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path fill-rule="evenodd" d="M4.843 9.854a3.75 3.75 0 0 0 0 5.303l.147.147a3.543 3.543 0 0 0 5.01 0 .75.75 0 0 0-1.06-1.061 2.043 2.043 0 0 1-2.89 0l-.146-.146a2.25 2.25 0 0 1 0-3.182l5.015-5.015a2.244 2.244 0 0 1 3.173 3.172l-2.286 2.286a.817.817 0 1 1-1.155-1.155l2.25-2.25a.75.75 0 1 0-1.06-1.061l-2.25 2.25a2.317 2.317 0 0 0 3.275 3.277l2.286-2.286a3.744 3.744 0 0 0-5.294-5.294l-5.015 5.015Z"></path></svg>
              </span>
            </span>              <span data-target="thumbnail" class="Polaris-Thumbnail Polaris-Thumbnail--sizeSmall">
              <img src="#" alt="">
            </span>
          </div>
          <div class="Polaris-LegacyStack__Item Polaris-LegacyStack__Item--fill">              
            <div data-target="content">
              <p class="Polaris-Text--root Polaris-Text--bodySm Polaris-Text--regular">
                <span data-target="file-size" class="Polaris-Text--root Polaris-Text--bodyMd Polaris-Text--subdued Polaris-Text--regular">
                  SIZE
                </span>
              </p>
              </div>
            <div data-target="progress-bar" style="margin-top: 4px;" class="Polaris--hidden Polaris-ProgressBar Polaris-ProgressBar--colorHighlight Polaris-ProgressBar--sizeSmall">
              <progress
    class="Polaris-ProgressBar__Progress"
    value="0"
    max="100"
  ></progress>
              <div style="--pc-progress-bar-duration: 500ms;--pc-progress-bar-percent: 0.0" class="Polaris-ProgressBar__Indicator Polaris-ProgressBar__IndicatorAppearDone">
                <span class="Polaris-ProgressBar__Label">0%</span>
              </div>
            </div>
            <div data-target="upload-error" style="margin-top: 4px;" class="Polaris--hidden Polaris-InlineError">
              <div class="Polaris-InlineError__Icon">
                <span class="Polaris-Icon">
                  <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path d="M10 14a.75.75 0 0 1-.75-.75v-3.5a.75.75 0 0 1 1.5 0v3.5a.75.75 0 0 1-.75.75Z"></path><path d="M9 7a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z"></path><path fill-rule="evenodd" d="M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Zm-1.5 0a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Z"></path></svg>
                </span>
              </div>
              File upload failed
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</div>
1
<%= polaris_dropzone %>

Use to allow merchants to upload files. They can drag and drop files into the dashed area, or upload traditionally by clicking the “Add file” button or anywhere inside the dashed area.

No params configured.