XHR Upload Example

SME Uploader recommends using tus resumable file uploads, but if you want you can also use XHRUpload (Multipart Form) uploads

Simple form with a file input, mounted to a fallback <form> container — works even without JavaScript or when something goes wrong (slow connection, JS errors, old browsers):

SME Uploader was not loaded — slow connection, unsupported browser, weird JS error on a page — but the upload still works, because HTML is cool like that
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">

<div class="checkbox">
  <label for="xhr-upload" class="switch">
    <input type="checkbox" id="xhr-upload" disabled checked/>
    <i> </i>
    <span>XHR Upload [installed]</span>
  </label>
</div>

<div class="sme-uploader-form">
  <form action="https://xhr-server.herokuapp.com/upload">
    <h5>SME Uploader was not loaded — slow connection, unsupported browser, weird JS error on a page — but the upload still
      works, because HTML is cool like that</h5>
    <input type="file" name="files[]" multiple="">
    <button type="submit">Fallback Form Upload</button>
  </form>
</div>

<div class="sme-uploader-progress-bar"></div>

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

    Along with this JavaScript: 

    require('es6-promise/auto');
require('whatwg-fetch');
const SmeUploader = require('@sme-uploader/core');
const FileInput = require('@sme-uploader/file-input');
const XHRUpload = require('@sme-uploader/xhr-upload');
const ProgressBar = require('@sme-uploader/progress-bar');

const uploader = new SmeUploader({ debug: true, autoProceed: true });
uploader.use(FileInput, {
  target: '.sme-uploader-form',
  replaceTargetContent: true
});
uploader.use(ProgressBar, {
  target: '.sme-uploader-progress-bar',
  hideAfterFinish: false
});
uploader.use(XHRUpload, {
  endpoint: 'https://xhr-server.herokuapp.com/upload',
  formData: true,
  fieldName: 'files[]'
});

// And display uploaded files
uploader.on('upload-success', (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('.uploaded-files ol').appendChild(li);
});

    Please see documentation for details.

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