Welcome
Design Principles
For Developers
For Designers
Extending
Writing Guidelines
Color
Icon
Text
General
Overview
Tabs
Form
Card
Editor
Iframe
Basic Grid
Flex Grid
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Action List
Upgrade
Order
Field
Input Group
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Numberinput
Textarea
Upload
Select
Multiselect
Datetime
Slider
Criteria
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Ring
Compare
Notification
Progress
Spinner
Validator
Tooltip
Checklist
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Widget
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
CSS Utility Classes
Flipper Service
Config
Authentication Token
Translation
Tracking
Redesign
Numeric
Time
Iframe Loader
Release Notes

Upload

In order to use this component, you have to have our Javascript file included into your page. Binding happens automatically.

For MediaDB example, you have to take care of opening the MediaDB and passing the file from the MediaDB into the input.

For the Filedrop component, we use the jQuery Filedrop library.

Default

Copy Pug
Copy HTML
Open in playground
Show code
Hide code
<e-upload>

<e-upload name="upload" placeholder="Placeholder text" button="Browse"></e-upload>
<e-upload name="upload" placeholder="Placeholder text" button="Browse"></e-upload>
JavaScript
Copy JavaScript

Variations

Invalid
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[invalid]

<e-upload name="upload" placeholder="Placeholder text" button="Browse" invalid></e-upload>
<e-upload name="upload" placeholder="Placeholder text" button="Browse" invalid></e-upload>
JavaScript
Copy JavaScript

With MediaDB
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<e-upload name="upload" placeholder="Placeholder text" button="Browse" mediadb="From your Media Database" mediadb-callback="alert(&quot;From MediaDb&quot;);" browse="From Computer"></e-upload>
<e-upload name="upload" placeholder="Placeholder text" button="Browse" mediadb="From your Media Database" mediadb-callback="alert(&quot;From MediaDb&quot;);" browse="From Computer"></e-upload>
JavaScript
Copy JavaScript

Filedrop
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-filedrop

<div class="e-filedrop">
  <div class="e-filedrop__content">
    <div class="text-size-title">
      Drag and drop a file here to get started
    </div>
    <div class="e-field text-size-title text-color-shade">
      or
    </div>
    <div class="e-field">
      <a class="e-btn e-btn-primary" href="#">
        Select a File
      </a>
    </div>
    <div class="text-color-shade">
      Please note: only .csv files can be imported.
    </div>
  </div>
</div>
<div class="e-filedrop">
  <div class="e-filedrop__content">
    <div class="text-size-title">
      Drag and drop a file here to get started
    </div>
    <div class="e-field text-size-title text-color-shade">
      or
    </div>
    <div class="e-field">
      <a class="e-btn e-btn-primary" href="#">
        Select a File
      </a>
    </div>
    <div class="text-color-shade">
      Please note: only .csv files can be imported.
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Drag and drop a file here to get started
or
Select a File
Please note: only .csv files can be imported.

Filedrop
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-filedrop-over

<div class="e-filedrop e-filedrop-over">
  <div class="e-filedrop__content">
    <div class="text-size-title">
      Drag and drop a file here to get started
    </div>
    <div class="e-field text-size-title text-color-shade">
      or
    </div>
    <div class="e-field">
      <a class="e-btn e-btn-primary" href="#">
        Select a File
      </a>
    </div>
    <div class="text-color-shade">
      Please note: only .csv files can be imported.
    </div>
  </div>
</div>
<div class="e-filedrop e-filedrop-over">
  <div class="e-filedrop__content">
    <div class="text-size-title">
      Drag and drop a file here to get started
    </div>
    <div class="e-field text-size-title text-color-shade">
      or
    </div>
    <div class="e-field">
      <a class="e-btn e-btn-primary" href="#">
        Select a File
      </a>
    </div>
    <div class="text-color-shade">
      Please note: only .csv files can be imported.
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Drag and drop a file here to get started
or
Select a File
Please note: only .csv files can be imported.

Overlay
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-filedrop-overlay

<div class="e-filedrop e-filedrop-overlay e-filedrop-over">
  <div class="e-filedrop__content">
    <e-icon icon="e-cloud-upload" size="middle"></e-icon>
    <div class="text-size-title">
      Drag and drop a file here to get started
    </div>
  </div>
</div>
<div class="e-filedrop e-filedrop-overlay e-filedrop-over">
  <div class="e-filedrop__content">
    <e-icon icon="e-cloud-upload" size="middle"></e-icon>
    <div class="text-size-title">
      Drag and drop a file here to get started
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Show / Hide
Drag and drop a file here to get started

API Reference

Properties

NameDescriptionTypeRequiredDefault value
nameFile input name attributestring
placeholderText input placeholder attributestring
button"Browse local files" button labelstringChoose File
mediadbAdd Media Database dropdownstringFrom your Media Database
browse"Browse local files" button label if set mediadbstringChoose File
invalidDefines invalid state of the input.booleanfalse

Events

EventDescriptionReturns
updateFires on upload change and returns the file list{ detail: { files: [file] } }