Cross-browser directory and multi-file upload library

uppie is a tiny JavaScript library which helps you with file and directory uploads in browsers. It supports all current implementations of multi-file and directory uploads and provides you with a FormData object you can submit directly to a server through either XMLHttpRequest or fetch. Both the element and drag-and-drop are supported.

Usage

pnpm add uppie

import {uppie} from "uppie";
uppie(document.querySelector("#file"), async (e, formData, files) => {
  await fetch("/upload", {method: "POST", body: formData});
});

Notes

• Empty directories are excluded from the results by all browsers as dictated by the spec.
• Firefox and Safari exclude files and directories starting with a ..

API

uppie(node, [opts], callback)

• node Node, NodeList or Array: One or more DOM nodes. If an is given, uppie will monitor it for change events. Any other element type will be enabled as a dropzone and watched for drop events. If you want to use both on the same element, use a hidden and forward the click event.
• opts Object: An options object which can contain:

• callback Function: callback which is called every time the selected files change or when files are dropped in the dropzone.

• event Event: the original event. Useful for calling event.stopPropagation().
• formData FormData: FormData object to be used for XHR2 uploading.
• files Array: Array of paths for preview purposes.

FormData format

name defaults to "files[]", filename will be the full path to the file, with / used as path separator. Does not include a leading slash. Make sure to sanitize filename on the server before writing it to the disk to prevent exploits involving .. in the path. Example FormData:

------Boundary
Content-Disposition: form-data; name="files[]"; filename="docs/1.txt"
Content-Type: text/plain
[DATA]
------Boundary
Content-Disposition: form-data; name="files[]"; filename="docs/path/2.txt"
Content-Type: text/plain
[DATA]
------Boundary
Content-Disposition: form-data; name="files[]"; filename="docs/path/to/3.txt"
Content-Type: text/plain

Recommended input element attributes

• multiple: allow multiple files or directories to be selected.
• webkitdirectory: enable directory uploads.

PHP example

Below is an example for PHP 7.0 and possibly earlier versions. PHP does not parse the path from the filename field, so it is necessary to submit the path through other means, like as separate FormData fields as done in the example.

import {uppie} from "uppie";

uppie(document.documentElement, (event, formData, files) => {
  files.forEach(path => {
    formData.append("paths[]", path);
  });
const xhr = new XMLHttpRequest();
  xhr.open("POST", "upload.php");
  xhr.send(formData);
});

foreach ($_FILES['files']['name'] as $i => $name) {
  if (strlen($_FILES['files']['name'][$i]) > 1) {
    $fullpath = strip_tags($_POST['paths'][$i]);
    $path = dirname($fullpath);

if (!is_dir('uploads/'.$path)){
      mkdir('uploads/'.$path, 0777, true);
    }
    if (move_uploaded_file($_FILES['files']['tmp_name'][$i], 'uploads/'.$fullpath)) {
        echo '<li>'.$name.'</li>';
    }
  }
}