300px
x
150px
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<div class="Polaris-LegacyCard"> <div class="Polaris-LegacyCard__Header"> <div class="Polaris-LegacyStack Polaris-LegacyStack--alignmentTrailing"> <div class="Polaris-LegacyStack__Item Polaris-LegacyStack__Item--fill"> <h2 class="Polaris-Text--root Polaris-Text--headingMd Polaris-Text--semibold"> Product Images </h2> </div> <div class="Polaris-LegacyStack__Item"> <div class="Polaris-ButtonGroup"> <div class="Polaris-ButtonGroup__Item Polaris-ButtonGroup__Item--plain"><a content="Upload Image" data-polaris-dropzone-external-target="trigger" data-controller="polaris-button" href="#" class="Polaris-Button Polaris-Button--plain"> <span class="Polaris-Button__Content"> <div class="Polaris-Button__Text"> Upload Image </div> </span> </a></div> </div> </div> </div> </div> <div class="Polaris-LegacyCard__Section"> <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> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
<%= polaris_card( title: 'Product Images', actions: [ { content: 'Upload Image', url: '#', data: { 'polaris-dropzone-external-target': 'trigger' } } ]) do %> <%= polaris_dropzone %><% end %>Use to trigger the file dialog from an action somewhere else on the page.
No params configured.