JavaScript API Examples

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(files, 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>

This example shows how to create a custom subfolder. The custom javascript code waits for upload start (status is "init"), creates the subfolder and upload files into it.

  <div class="driveuploader-replace"></div>
  <script>
    function driveUploaderCallback(status, result, instance) {
      if (status == 'init') {
        instance.setCustomSubfolderName("MyFolderName");
      }
    }
  </script>
  <script src="https://driveuploader.com/upload/{uploader key}/embed.js"></script>

This example shows how to rename uploaded files.

  <div class="driveuploader-replace"></div>
  <script>
    function onbeforeupload(done, files) {
      var renamed_files = [];
      for (const current_file of files) {
        renamed_files.push(new File([current_file], 'new_name.jpeg', {type: current_file.type}));
      }
      files.length = 0;
      files.push.apply(files, renamed_files);
      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>