Panorama

Build your own Dropbox: FileDropper

The FileDropper 2 now has a successor. It is called AwsmUploader. See the Demo and all the Documentation here. The downloads for the FileDropper and all its belonging files have been removed.

This version of the FileDropper is outdated and has been fully replaced by the FileDropper 2, a highly improved version. Please see this article for all the changes. A download is there available as well. Nevertheless, this article might be good in giving you a basic understanding in what the FileDropper is.

I built my own Dropbox where friends, family members and me easily can drop files. It uses the FileAPI and works at least in Firefox 8 and Chrome 16, IE will may work when it gets to version 10. Latest versions of Safari should also work.

Class: FileDropper

The class FileDropper is a fully-featured, stand-alone class written in JavaScript that allows you to turn a progress bar and a dropping area into an Ajax file upload tool. You only need to supply a simple HTML structure with a few elements to instantiate the FileDropper upon. The FileDropper itself is feature rich and has 12+ callback triggers, where you can bind your very own code to. Also, it has localization support and an english fallback language.

FileDropper: Features

  • Stand-alone class, no external dependencies, no libraries required
  • Uses modern JavaScript and the FileAPI to asynchronously upload your files
  • Rich user experience:
    • Main progress of all dropped files
    • Eta, Quota and size calculations in realtime
    • New: Now the FileDropper features speed meters for current and average speed
    • Shows the image, if dropped file is an image
    • Responsiveness: Continue dropping files whilst uploading other files
    • Responsiveness: A rich state management informs the user about every step in detail (current action and file, size of file, progress)
    • Set a maximum upload size to let the FileDropper skip files before uploading them
  • Pause and resume the upload queue
  • Cancel single uploads in the queue or all files
  • Continue dropping files whilst the FileDropper is working
  • See realtime quota calculations and balance time calculations exact to the second
  • Provide your own language if you want, eight customizable language keys
  • Provide your own rules for files, that are not allowed to upload, shipped with two built-in rules
  • Rich error and response management, bind your own callbacks to that
  • Helper functions for formatting file names and -size strings
  • Many useful methods to access realtime-calculated instance members and check the state of the FileDropper

What you need

Not much, as you see this is the following HTML structure, that is sufficient for doing all the tricks. Though my implementation uses all available callbacks and also features a logon based system, but the following is all you need.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="FileDropper.js"></script>
<title>My FileDropper</title>
</head>

<body>
  <div>
    <div id="drop-zone"></div>
    <progress id="main-progress"></progress>
    <span id="current-file"></span>
    <span id="current-action"></span>
  </div>
  <script type="text/javascript">
  var ge = document.getElementById,
    f = new FileDropper(
      ge('drop-zone'),
      ge('main-progress'),
      ge('current-file'),
      ge('current-action'),
      { /* you ownr language if you want */ }
    );
  
  /*
  Now register all your callbacks if needed, set the maximum allowed
  upload size (not neccessary) and set up quotas if you want. If you
  want the FileDropper to post your files to a different file than
  upload.php, just specify that also. After that, just call:
  */
  
  f.start();
  // the FileDropper is now ready to receive files!
  </script>
</body>
</html>

Try & Download

As mentioned above, I've done a fully featured implementation of the FileDropper with all available callbacks. You can try it out yourself, but you will have to login with user „Anonymous“, the password is empty. I also used jQuery for my customized code, but the FileDropper itself comes without this dependency. You will find the download at the end of this series of articles.

The FileDropper and its belonging files are not available for download anymore. Please head over to the AwsmUploader, its successor.

Comments for this article

Write a comment:
Your email address is not published. I will only use it to send notifications about new comments, if you wish to receive them. If you have an avatar on gravatar.com, it will be shown in your comment using the hash of your email address (main usage of your email address).

For this article there are no comments yet.

Categories: navigation
You can view the directory of this category:
You can navigate to the placed over category. The ancestor is: