Upload

Default
<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 

<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
.e-filedrop

Drag and drop a file here to get started
or
Select a File
Please note: only .csv files can be imported.
<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>

Filedrop
.e-filedrop-over

Drag and drop a file here to get started
or
Select a File
Please note: only .csv files can be imported.
<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>

Overlay
.e-filedrop-overlay

Show / Hide
Drag and drop a file here to get started
<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>

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 refactor(icon): use new component
Date:
()
Committer: David Gyenes
Component history