Fragmented Thought
TwitterGitHub

HTML Drag and Drop File Upload With PHP Backend

By

Published:

Lance Gliser

Heads up! This content is more than six months old. Take some time to verify everything still works as expected.

This one fought me, for hours yesterday. A client wanted drag and drop implemented for file on their server. This can already be done in most modern browsers by simply dropping the files onto the file input, but that's a very awkward UI, likely to cause issues. Most users aren't experienced enough to know they can do that. So you have three reasonable choices:

  • At a minimum, prevent drag and drop on non-registered elements causing the page to load that image. Force them to use the native handling of files dropped onto file inputs.
  • A little more reasonable would be to create a region that makes dragging obvious, and a large target for them to aim for that lights up when they are in place.
  • Or, perhaps the best if you only have a single file input, and it's the most important thing on the page anyway, make the entire page listen for a dropped file and handle it.

My particular scenario yesterday was #3, but #2 would be done in roughly the same way. I'm going to post some slightly more than bare bones code for javascript, and php. I'll leave the css and html up to you. It's still a bit raw, the goal was a functioning prototype for working scenarios.

Javascript

Drag and Drop Event Listeners, FileReaders, and XmlHttpRequest objects. All without an ounce of jQuery.

example.upload = {
  // Support flag, for reuse
  dndSupported: false,
  // Testable initilization flag
  behaviors: false,
  // Pointer to our <progress> element
  progress: null,
  init: function () {
    // Ensure we have drag and drop
    var div = document.createElement("div");
    // Simple test of capability similar to moderizer
    example.upload.dndSupported =
      "draggable" in div || ("ondragstart" in div && "ondrop" in div);

    if (!example.upload.dndSupported) {
      alert("Drag and Drop not supported");
    } else {
      this.bindBehaviors();
    }
  },
  bindBehaviors: function () {
    if (!example.upload.behaviors) {
      // Binding to the entire document
      // You could target anything instead here
      var doc = document.documentElement;
      doc.ondragover = function () {
        this.className = "hover";
        return false;
      };
      doc.ondragend = function () {
        this.className = "";
        return false;
      };
      doc.ondrop = function (event) {
        example.upload.onDrop(event);
      };
      example.upload.progress = document.getElementById("progress");
      example.upload.preview.target = document.getElementById("preview");
      example.upload.behaviors = true;
      example.upload.reset();
    }
  },
  hideFields: function () {
    document.getElementById("fields-wrapper").style.display = "none";
  },
  showFields: function () {
    document.getElementById("fields-wrapper").style.display = "inline-block";
  },
  reset: function () {
    example.upload.showFields();
    example.upload.updateProgress(0);
    example.upload.preview.clear();
  },
  onDrop: function (event) {
    example.upload.hideFields();
    example.upload.preview.clear();
    example.upload.updateProgress(0);
    this.className = "";

    // Preventing default behavior (viewing file directly)
    event.preventDefault && event.preventDefault();

    var files = event.dataTransfer.files;
    if (files.length > 1) {
      alert("Only one file may be uploaded.");
    } else if (files.length == 0) {
      return;
    }
    var file = files[0];
    // Display a preview if applicable
    example.upload.preview.display(file);

    var xhr = new XMLHttpRequest();

    // Put is a little more resilient with large files
    xhr.open("put", "upload-file", true);
    // Some variables to use saving the file
    xhr.setRequestHeader("X-File-Name", file.name);
    xhr.setRequestHeader("X-File-Size", file.size);
    // File upload finished behavior
    xhr.onload = function () {
      // just in case we get stuck around 99%
      example.upload.updateProgress(100);
      console.log(xhr);
      if (xhr.status === 200) {
        console.log("all done: " + xhr.status);
      } else {
        example.upload.reset();
        console.log("Something went terribly wrong...");
      }
    };
    // Progress update behavior
    xhr.upload.onprogress = function (event) {
      if (event.lengthComputable) {
        example.upload.updateProgress(((event.loaded / event.total) * 100) | 0);
      }
    };

    // Send just the file contents
    xhr.send(file);

    return false;
  },
  updateProgress: function (percentComplete) {
    if (percentComplete == 0) {
      example.upload.progress.style.display = "none";
    } else {
      example.upload.progress.style.display = "inline-block";
    }
    example.upload.progress.value = example.upload.progress.innerHTML = percentComplete;
  },
  preview: {
    target: null,
    display: function (file) {
      example.upload.preview.clear();

      // Creating a div with the filename
      nameDiv = document.createElement("div");
      nameDiv.innerHTML = file.name;
      nameDiv.className = "file-name";
      example.upload.preview.target.appendChild(nameDiv);

      // Allow previews of certain file types
      switch (file.type) {
        case "image/png":
        case "image/jpeg":
        case "image/gif":
          // Creates an image on the fly with a generated src
          var reader = new FileReader();
          reader.onload = function (event) {
            var image = new Image();
            image.src = event.target.result;
            image.width = 100; // a fake resize
            example.upload.preview.target.appendChild(image);
          };
          reader.readAsDataURL(file);
          break;
      }
    },
    clear: function () {
      example.upload.preview.target.innerHTML = "";
    },
  },
};

// A document ready call. Build your own as you like
ready(function () {
  example.upload.init();
});

Php File Saving Code

// Read the input directly, there is no post, get, data
$in = fopen('php://input','r');
// Open any file you like for reading
$out = fopen(__DIR__./uploads/' . $_SERVER['HTTP_X_FILE_NAME'], "w+");
// Stream the data out to a file
while($data = fread($in, 1024)) fwrite($out, $data);
// Close handlers
fclose($in);
fclose($out);

Are there security concerns building it this way? Of course! The php code above should scare the hell out of you. But, security is your own pass, outside this example. Please, please make sure you review your own and implement a solution that works for your needs. Remember, no matter what the browser passes you, it's important to validate.