Не завершено, но, вероятно, хорошее начало ...
Это будет возможно с dropzone. js, установив для параметра autoProcessQueue значение false. Затем вы можете перетаскивать файлы / папки через GUI без их фактической загрузки, но по-прежнему обращаться к объекту file в javascript для получения метаданных.
См. этот ответ для получения дополнительной информации о том, как добавить ручную кнопку, чтобы в конечном итоге начать обработку этой очереди, если вы используете sh. Независимо от того, обрабатываете ли вы эту очередь или нет, вы можете использовать событие addedfile для ручной проверки объектов file.
На самом деле базовый пример c со скриптами, загруженными из CDN, будет выглядит так:
<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>
Удаление одного файла с приведенным выше кодом дает что-то вроде:
views.py undefined 1567770276854 1604
Вы можете удалить всю папку, и каждый файл будет рекурсивно отображаться, включая file.fullPath для каждого:
models.py stack/models.py 1566159281216 1974
serializers.py stack/serializers.py 1565978398499 309
...
Вместо этого вы можете console.log(file) изучить этот объект дополнительно (в консоли инструментов разработчика вашего браузера), чтобы увидеть другие доступные метаданные.
Чтобы передать эти данные в бэкэнд вы можете использовать fetch API или аналогичную функцию AJAX post. Вы можете sh добавить всю информацию в массив, а затем сразу же отправить это на бэкэнд, используя другой обработчик событий, привязанный к «Загрузить метаданные!» кнопка.