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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
<form enctype="multipart/form-data" action="/uploads" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="GwgsnguP_V3kyj-56HxVpViI0LQVTkHmEgQFDabnDUypJjXFOepU3SHprb0KqXogdXTgh0q1fIPySIzoKydykg" autocomplete="off" /> <div class="Polaris-FormLayout"> <div class="Polaris-FormLayout__Item"> <div class="Polaris-Labelled--hidden"> <div class="Polaris-Labelled__LabelWrapper"> <div class="Polaris-Label"> <label class="Polaris-Label__Text" for="upload_file_one">File one</label> </div> </div> <div data-polaris-dropzone-accept-value="" data-polaris-dropzone-allow-multiple-value="false" 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 file </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 accept="" data-polaris-dropzone-target="input" data-action="focus->polaris-dropzone#onFocus blur->polaris-dropzone#onBlur change->polaris-dropzone#onChange" type="file" name="upload[file_one]" id="upload_file_one" /> </span> <template data-polaris-dropzone-target="previewTemplate"> <div data-polaris-dropzone-target="preview" class="Polaris-DropZone__Preview Polaris-DropZone__Preview--singleFile"> <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 Polaris-LegacyStack--spacingTight Polaris-LegacyStack--vertical"> <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 class="Polaris-FormLayout__Item"> <button type="submit" data-controller="polaris-button" class="Polaris-Button"> <span class="Polaris-Button__Content"> <div class="Polaris-Button__Text"> Submit </div> </span> </button> </div> </div></form><div class="Polaris-Spacer Polaris-Spacer--verticalSpacingBase"></div><form enctype="multipart/form-data" action="/uploads" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="KHZ9fn0dK4TsCgPGrdlCetmJ86N094Xlvbbxq9_LQYaaWGQlT3iCBCkpkcJPDG3_9HXDkCsMuIBd-nhOUgs-WA" autocomplete="off" /> <div class="Polaris-FormLayout"> <div class="Polaris-FormLayout__Item"> <div class="Polaris-LegacyStack"> <div class="Polaris-LegacyStack__Item"> <div class="Polaris-Labelled--hidden"> <div class="Polaris-Labelled__LabelWrapper"> <div class="Polaris-Label"> <label class="Polaris-Label__Text" for="upload_attachment_one">Attachment one</label> </div> </div> <div data-polaris-dropzone-accept-value="" data-polaris-dropzone-allow-multiple-value="false" 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="small" 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--sizeSmall Polaris-DropZone--hasOutline"> <div class="Polaris-DropZone__Overlay Polaris-VisuallyHidden" data-polaris-dropzone-target="overlay" > </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--small"> <div class="Polaris-LegacyStack Polaris-LegacyStack--spacingTight Polaris-LegacyStack--vertical"> <div class="Polaris-LegacyStack__Item"> <img width="20" 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> </div> <div class="Polaris-DropZone__Loader Polaris--hidden" data-polaris-dropzone-target="loader"> <span class="Polaris-Spinner Polaris-Spinner--sizeSmall"> <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M7.229 1.173a9.25 9.25 0 1011.655 11.412 1.25 1.25 0 10-2.4-.698 6.75 6.75 0 11-8.506-8.329 1.25 1.25 0 10-.75-2.385z" /> </svg> </span> </div> </div> <span class="Polaris-Text--root Polaris-Text--bodyMd Polaris-Text--regular Polaris-Text--visuallyHidden"> <input accept="" data-polaris-dropzone-target="input" data-action="focus->polaris-dropzone#onFocus blur->polaris-dropzone#onBlur change->polaris-dropzone#onChange" data-direct-upload-url="https://polarisviewcomponents.org/rails/active_storage/direct_uploads" type="file" name="upload[attachment_one]" id="upload_attachment_one" /> </span> <template data-polaris-dropzone-target="previewTemplate"> <div data-polaris-dropzone-target="preview" class="Polaris-DropZone__Preview Polaris-DropZone__Preview--singleFile Polaris-DropZone__Preview--sizeSmall"> <span class="target"></span> </div> </template> <template data-polaris-dropzone-target="itemTemplate"> <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> </template> </div> </div> </div> <div class="Polaris-LegacyStack__Item"> <div class="Polaris-Labelled--hidden"> <div class="Polaris-Labelled__LabelWrapper"> <div class="Polaris-Label"> <label class="Polaris-Label__Text" for="upload_attachment_two">Attachment two</label> </div> </div> <div data-polaris-dropzone-accept-value="" data-polaris-dropzone-allow-multiple-value="false" 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="small" 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--sizeSmall Polaris-DropZone--hasOutline"> <div class="Polaris-DropZone__Overlay Polaris-VisuallyHidden" data-polaris-dropzone-target="overlay" > </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--small"> <div class="Polaris-LegacyStack Polaris-LegacyStack--spacingTight Polaris-LegacyStack--vertical"> <div class="Polaris-LegacyStack__Item"> <img width="20" 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> </div> <div class="Polaris-DropZone__Loader Polaris--hidden" data-polaris-dropzone-target="loader"> <span class="Polaris-Spinner Polaris-Spinner--sizeSmall"> <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M7.229 1.173a9.25 9.25 0 1011.655 11.412 1.25 1.25 0 10-2.4-.698 6.75 6.75 0 11-8.506-8.329 1.25 1.25 0 10-.75-2.385z" /> </svg> </span> </div> </div> <span class="Polaris-Text--root Polaris-Text--bodyMd Polaris-Text--regular Polaris-Text--visuallyHidden"> <input accept="" data-polaris-dropzone-target="input" data-action="focus->polaris-dropzone#onFocus blur->polaris-dropzone#onBlur change->polaris-dropzone#onChange" data-direct-upload-url="https://polarisviewcomponents.org/rails/active_storage/direct_uploads" type="file" name="upload[attachment_two]" id="upload_attachment_two" /> </span> <template data-polaris-dropzone-target="previewTemplate"> <div data-polaris-dropzone-target="preview" class="Polaris-DropZone__Preview Polaris-DropZone__Preview--singleFile Polaris-DropZone__Preview--sizeSmall"> <span class="target"></span> </div> </template> <template data-polaris-dropzone-target="itemTemplate"> <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> </template> </div> </div> </div> </div> </div> <div class="Polaris-FormLayout__Item"> <button type="submit" data-controller="polaris-button" class="Polaris-Button"> <span class="Polaris-Button__Content"> <div class="Polaris-Button__Text"> Submit </div> </span> </button> </div> </div></form>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
<%= form_with(model: upload, builder: Polaris::FormBuilder) do |form| %> <%= polaris_form_layout do |form_layout| %> <% form_layout.with_item do %> <%= form.polaris_dropzone :file_one, multiple: false %> <% end %> <% form_layout.with_item do %> <%= polaris_button(submit: true) { "Submit" } %> <% end %> <% end %><% end %><%= polaris_spacer(vertical: :base) %><%= form_with(model: upload, builder: Polaris::FormBuilder) do |form| %> <%= polaris_form_layout do |form_layout| %> <% form_layout.with_item do %> <%# With direct upload in ActiveStorage %> <%= polaris_stack do |stack| %> <% stack.with_item do %> <%= form.polaris_dropzone :attachment_one, size: :small, multiple: false, direct_upload: true %> <% end %> <% stack.with_item do %> <%= form.polaris_dropzone :attachment_two, size: :small, multiple: false, direct_upload: true %> <% end %> <% end %> <% end %> <% form_layout.with_item do %> <%= polaris_button(submit: true) { "Submit" } %> <% end %> <% end %><% end %>No notes provided.
No params configured.