JavaScript API Examples

Browse the examples below to learn about the DriveUploader JavaScript API.

Also look at the JavaScript API documentation, which describes all the available methods and parameters.

  • Basic example
  • Integration into <form>
  • Custom metadata
  • Filtering files

This example show a basic integration of the DriveUploder into your page. The custom javascript code waits for the upload to complete (status is "done"), displays custom "thank you" message and redirects to a different page after a timeout.

<div id="upload-area" class="driveuploader-fill"></div>
<script>
  var uploadArea = document.getElementById('upload-area');
  function driveUploaderCallback(status) {
    if (status == 'done') {
      uploadArea.innerHTML = 'Thank you for your upload! You will be redirected soon.';
      setTimeout(function() {
        window.location = '#thank-you-page';
      }, 3000);
    }
  }
</script>
<script src="https://driveuploader.com/upload/{uploader key}/embed.js"></script>

You can integrate the DriveUploder component into a standard html form. After the upload is complete the code below puts the list of the uploaded files into a hidden element so you can process it the standard way on your backend after the form is submitted.

<form method="POST" action="/form-submit/">
  Subject: <input type="text" name="subject" /><br />
  Email: <input type="text" name="email" /><br />
  Description: <textarea type="text" name="description"></textarea><br />
  Attach files:
  <input type="hidden" name="uploaded_files" id="uploaded_files" />
  <input type="hidden" name="uploaded_folder_link" id="uploaded_folder_link" />
  <input type="file" id="upload" name="upload" class="driveuploader-replace" /><br />
  <input type="submit" id="sendbtn">
</form>
<script>
  var sendbtn = document.getElementById('sendbtn');
  function driveUploaderCallback(status, result) {
    if (status == 'start') {
      // disable the send button during uploading
      sendbtn.disabled = true;
    } else if (status == 'done') {
      // format the list of files into the hidden form field
      sendbtn.disabled = false;
      var files = '';
      result.files.forEach(function(file) {
        files += '<a href="' + file.link + '">' + file.name + '</a><br>';
        });
      document.getElementById('uploaded_files').value = files;
      document.getElementById('uploaded_folder_link').value = result.folder.link;
    }
  }
</script>
<script src="https://driveuploader.com/upload/{uploader key}/embed.js"></script>

It is also possible to perform some actions (via javascript hook) before the upload starts. In this example, the user is asked for more information (name, email, subject) after selecting the file. The answers are then attached to the upload as metadata - visible in the email and passed to the webhook (if set).

<div id="uploader" style="position:relative;">
  <div class="driveuploader-replace"></div>

  <!-- This div is shown on top of the uploader, asking for additional info -->
  <div id="veil" style="display:none;position:absolute;top:0;left:0;width:100%;height:100%;
                        background:#eee;text-align:center;">
    Name: <input type="text" id="name"><br>
    E-mail: <input type="text" id="email"><br>
    Subject: <input type="text" id="subject"><br>
    <input type="button" id="nextbtn" value="Continue">
  </div>
</div>
<script>
var du_instance;

function onbeforeupload(done, files) {
  var veil = document.getElementById('veil');
  veil.style.display = 'block';

  var nextbtn = document.getElementById('nextbtn');
  nextbtn.onclick = function(e) {
    var name = document.getElementById('name').value,
        email = document.getElementById('email').value,
        subject = document.getElementById('subject').value;

    if (!name.length || !email.length || !subject.length) {
      alert('Please fill all the fields.');
    } else {
      nextbtn.disabled = 'disabled';
      veil.style.display = 'none';
      du_instance.setCustomMetadata('name', name);
      du_instance.setCustomMetadata('email', email);
      du_instance.setCustomMetadata('subject', subject);

      done(); // continue the upload
    }
  };
}

function driveUploaderCallback(status, result, instance) {
  if (status == 'init') {
    du_instance = instance;
    du_instance.setHook('beforeupload', onbeforeupload);
  } else if (status == 'done') {
    document.getElementById('uploader').innerHTML = 'Thank you for your upload!';
  }
}
</script>
<script src="https://driveuploader.com/upload/{uploader key}/embed.js"></script>

It is also possible to filter which files will be uploaded using your custom logic. In the webhook, the list of files is passed as the second argument. You can remove items from this list before calling done.

<div class="driveuploader-replace"></div>
<script>
function onbeforeupload(done, files) {
  var onlyValidFiles = files.filter(function(file) {
    // only use files larger than 100 B and we don't want password.txt
    return file.size > 100 && file.name != "password.txt";
  });
  files.length = 0;
  files.push.apply(onlyValidFiles);
  done();
}

function driveUploaderCallback(status, result, instance) {
  if (status == 'init') {
    instance.setHook('beforeupload', onbeforeupload);
  }
}
</script>
<script src="https://driveuploader.com/upload/{uploader key}/embed.js"></script>