UI Kit

Overview
Principles
Icons
Colors
Flex grid
Functions
Grid
Media
Mixins
Typography
Utility
Button
Checkbox
Emoji
Field
Input
Multiselect
Numberinput
Radio
Select
Switch
Textarea
Tokeninput
Upload
Box
Emptystate
Field
Fullheight
Header
Infolayer
Phone
Separator
Fixed
Deprecated Flex Grid
Grid
Accordion
Navigation bar
Pagination
Steps
Tab
Verticalnav
Alert
Notice
Progress
Spinner
Validator
Button
Button group
Button radio
Calendar
Card
Carousel
Chart
Colorpicker
Compare
Criteria
Datepicker
Daterange
Datetimepicker
Dialog
Dropdown
Fieldset
Inplaceeditor
Label
List
Overlay
Ring
Snackbar
Table
Tooltip

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.

Last update:
()
Message doc(search): new tags and hidden components --skip-ci
Committer: Tamás Bíró
Version history

Default

Copy Jade
Copy HTML
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>

With MediaDB
Copy Jade
Copy HTML
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>

Filedrop
Copy Jade
Copy HTML
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 href="#" class="e-btn e-btn-primary">
        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 href="#" class="e-btn e-btn-primary">Select a File</a></div>
                                    <div class="text-color-shade">Please note: only .csv files can be imported.</div>
                                  </div>
                                </div>
Drag and drop a file here to get started
or
Select a File
Please note: only .csv files can be imported.

Filedrop
Copy Jade
Copy HTML
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 href="#" class="e-btn e-btn-primary">
        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 href="#" class="e-btn e-btn-primary">Select a File</a></div>
                                    <div class="text-color-shade">Please note: only .csv files can be imported.</div>
                                  </div>
                                </div>
Drag and drop a file here to get started
or
Select a File
Please note: only .csv files can be imported.

Overlay
Copy Jade
Copy HTML
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="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="cloud-upload" size="middle"></e-icon>
                                    <div class="text-size-title">Drag and drop a file here to get started</div>
                                  </div>
                                </div>
Show / Hide
Drag and drop a file here to get started

API Reference

Properties

Name Description Type Required Default value
name File input name attribute string
placeholder Text input placeholder attribute string
button "Browse local files" button label string Choose File
mediadb Add Media Database dropdown string From your Media Database
browse "Browse local files" button label if set mediadb string Choose File