1

Is it possible to have a upload box on a site where a user can drag in a folder of files but instead of the entire folder being uploaded you can just grab the file names and metadata?

Jacob
  • 750
  • 5
  • 19

1 Answers1

1

Not complete, but probably a good start...

This would be possible with dropzone.js, by setting the autoProcessQueue option to false. Then you can drop files/folders via the GUI, without them actually uploading, but still access the file object in javascript to get the metadata.

See this answer for more information on how to add a manual button to eventually start processing this queue if you wish. Regardless of whether you process that queue or not, you can use the addedfile event to manually inspect the file objects.

A really basic example, with the scripts loaded from a CDN, would look like:

<html>
<head>
  <title> Dropzone</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/dropzone.css" integrity="sha256-0Z6mOrdLEtgqvj7tidYQnCYWG3G2GAIpatAWKhDx+VM=" crossorigin="anonymous" />
</head>
<body>
  <div>
      <form method='POST'
        enctype="multipart/form-data"
        class="dropzone"
        id="my-awesome-dropzone"></form>
   </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/dropzone.js" integrity="sha256-NLit4Z57jz8npRHkopjfr68hSZY1x/ruN0T8kf68xq4=" crossorigin="anonymous"></script>

<script type='text/javascript'>

Dropzone.autoDiscover = false;

var myDropzone = new Dropzone("form#my-awesome-dropzone",
{ url: "/upload",
  autoProcessQueue: false,
});

myDropzone.on("addedfile", function(file) {
  // runs for every file dropped
  console.log(file.name, file.fullPath, file.lastModified, file.size);
});

</script>
</body>
</html>

Dropping a single file with the above code outputs something like:

 views.py undefined 1567770276854 1604

You can drop an entire folder, and every file recursively will appear, including file.fullPath for each:

models.py stack/models.py 1566159281216 1974
serializers.py stack/serializers.py 1565978398499 309
...

You could instead console.log(file) to inspect that object further (in your browser's dev tools console) to see the other available metadata.

To get this data to the backend you could use the fetch API or a similar AJAX post function. You may wish to add all the info to an array, then post this to the backend at once using another event handler tied to an "Upload metadata!" button.

v25
  • 7,096
  • 2
  • 20
  • 36