x
<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-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-Stack Polaris-Stack--spacingTight Polaris-Stack--vertical">
<div class="Polaris-Stack__Item">
<p class="Polaris-DisplayText Polaris-DisplayText--sizeSmall">
Drop files to upload
</p>
</div>
</div>
</div>
<div
class="Polaris-DropZone__Overlay Polaris-VisuallyHidden"
data-polaris-dropzone-target="errorOverlay"
>
<div class="Polaris-Stack Polaris-Stack--spacingTight Polaris-Stack--vertical">
<div class="Polaris-Stack__Item">
<p class="Polaris-DisplayText Polaris-DisplayText--sizeSmall">
This file type isn&#39;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-Stack Polaris-Stack--spacingTight Polaris-Stack--vertical">
<div class="Polaris-Stack__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-Stack__Item">
<div class="Polaris-DropZone-FileUpload__Button">
Add files
</div>
</div>
<div class="Polaris-Stack__Item">
<span class="Polaris-TextStyle--variationSubdued">
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"></path>
</svg>
</span>
</div>
</div>
<span class="Polaris-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-Stack Polaris-Stack--vertical">
<span class="target"></span>
</div>
</div>
</template>
<template data-polaris-dropzone-target="itemTemplate">
<div class="Polaris-Stack__Item">
<div class="Polaris-Stack Polaris-Stack--alignmentCenter">
<div class="Polaris-Stack__Item"> <span data-target="icon" style="border: none; background: none;" class="Polaris-Thumbnail Polaris-Thumbnail--sizeSmall">
<span class="Polaris-Icon">
<svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path d="M17 4a1 1 0 0 1 1 1v13.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 2 18.5v-17A1.5 1.5 0 0 1 3.5 0H8v2H4v16h12V5a1 1 0 0 1 1-1z"></path><path d="M8 5v6c0 1.206.799 3 3 3s3-1.794 3-3V3c0-1.206-.799-3-3-3h-1v2h1c.805 0 .988.55 1 1v7.988c-.012.462-.195 1.012-1 1.012-.805 0-.988-.55-1-1V5a1 1 0 1 0-2 0z"></path></svg>
</span>
</span> <span data-target="thumbnail" class="Polaris-Thumbnail Polaris-Thumbnail--sizeSmall">
<img src="#" alt="">
</span>
</div>
<div class="Polaris-Stack__Item Polaris-Stack__Item--fill">
<div data-target="content">
<p class="Polaris-Caption">
<span data-target="file-size" class="Polaris-TextStyle--variationSubdued">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
class="Polaris-ProgressBar__Indicator Polaris-ProgressBar__Animated"
style="width: 0%;"
>
<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 viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zM9 9a1 1 0 0 0 2 0V7a1 1 0 1 0-2 0v2zm0 4a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"></path></svg>
</span>
</div>
File upload failed
</div>
</div>
</div>
</div>
</template>
</div>
</div>
<%= 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.