Drag and Drop Example

Here you’ll see a demo of how you might set up Drag and Drop with SME Uploader.

Uploaded files:
    Uploaded files:

      Console output:

      On this page we're using the following HTML snippet: 

      <!-- Basic SME Uploader styles -->
<link rel="stylesheet" href="/sme-uploader/sme-uploader.min.css">

<section class="example-one">
  <div class="checkbox">
    <label for="autoProceedOn" class="switch">
      <input type="checkbox" id="autoProceedOn" disabled checked/>
      <i> </i>
      <span>AutoProceed [On]</span>
    </label>
  </div>

  <!-- Target DOM node #1 -->
  <div class="for-DragDrop"></div>

  <!-- Progress bar #1 -->
  <div class="for-ProgressBar"></div>

  <!-- Uploaded files list #1 -->
  <div class="uploaded-files">
    <h5>Uploaded files:</h5>
    <ol></ol>
  </div>
</section>

<section class="example-two">
  <div class="checkbox">
    <label for="autoProceedOff" class="switch">
      <input type="checkbox" id="autoProceedOff" disabled/>
      <i> </i>
      <span>AutoProceed [Off]</span>
    </label>
  </div>

  <!-- Target DOM node #2 -->
  <div class="for-DragDrop"></div>

  <!-- Progress bar #2 -->
  <div class="for-ProgressBar"></div>

  <button class="button">Upload</button>

  <!-- Uploaded files list #2 -->
  <div class="uploaded-files">
    <h5>Uploaded files:</h5>
    <ol></ol>
  </div>
</section>

      Along with this JavaScript: 

      require('es6-promise/auto');
require('whatwg-fetch');
const SmeUploader = require('@sme-uploader/core');
const DragDrop = require('@sme-uploader/drag-drop');
const ProgressBar = require('@sme-uploader/progress-bar');
const Tus = require('@sme-uploader/tus');

// Function for displaying uploaded files
const onUploadSuccess = (elForUploadedFiles) => (file, response) => {
  const url = response.uploadURL;
  const fileName = file.name;

  const li = document.createElement('li');
  const a = document.createElement('a');
  a.href = url;
  a.target = '_blank';
  a.appendChild(document.createTextNode(fileName));
  li.appendChild(a);

  document.querySelector(elForUploadedFiles).appendChild(li);
};

const uploaderOne = new SmeUploader({ debug: true, autoProceed: true });
uploaderOne
  .use(DragDrop, { target: '.example-one .for-DragDrop' })
  .use(Tus, { endpoint: 'https://master.tus.io/files/' })
  .use(ProgressBar, { target: '.example-one .for-ProgressBar', hideAfterFinish: false })
  .on('upload-success', onUploadSuccess('.example-one .uploaded-files ol'));

const uploaderTwo = new SmeUploader({ debug: true, autoProceed: false });
uploaderTwo
  .use(DragDrop, { target: '.example-two .for-DragDrop' })
  .use(Tus, { endpoint: 'https://master.tus.io/files/' })
  .use(ProgressBar, { target: '.example-two .for-ProgressBar', hideAfterFinish: false })
  .on('upload-success', onUploadSuccess('.example-two .uploaded-files ol'));

const uploadBtn = document.querySelector('.example-two .button');
uploadBtn.addEventListener('click', () => uploaderTwo.upload());

      Please see documentation for details.

      Caught a mistake or want to contribute to the documentation? Edit/fork this page directly on Github