Polaris ViewComponents

Previews

No matching results.

Pages

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-DropZone-FileUpload__Content">
          <div class="Polaris-DropZone-FileUpload__UploadIcon">
            <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="M16.5 6.26a.75.75 0 0 1-1.5 0v-.51a.75.75 0 0 0-.75-.75h-8.5a.75.75 0 0 0-.75.75v.51a.75.75 0 0 1-1.5 0v-.51a2.25 2.25 0 0 1 2.25-2.25h8.5a2.25 2.25 0 0 1 2.25 2.25v.51Z"></path><path d="M10.75 16.01a.75.75 0 0 1-1.5 0v-6.69l-1.72 1.72a.75.75 0 1 1-1.06-1.06l3-3a.75.75 0 0 1 1.06 0l3 3a.75.75 0 1 1-1.06 1.06l-1.72-1.72v6.69Z"></path></svg>
            </span>
          </div>
          <div class="Polaris-DropZone-FileUpload__Button">
            Add files
          </div>
          <div class="Polaris-DropZone-FileUpload__HelpText">
            or drop files to upload
          </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" fill="none" aria-hidden="true" focusable="false">
            <circle class="Polaris-Spinner__Track" r="19" stroke-width="2" cx="22" cy="22" />
            <circle class="Polaris-Spinner__Indicator" pathLength="10" r="19" stroke-width="2" cx="22" cy="22" />
          </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--colorPrimary Polaris-ProgressBar--sizeSmall">
              <progress
    class="Polaris-ProgressBar__Progress"
    value="0"
    max="100"
  ></progress>
              <div style="--pc-progress-bar-duration: 200ms;--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.