feature: added multiple file drop support

tomorrowcities/components/file_drop.py

@@ -0,0 +1,139 @@
+import threading
+import typing
+from typing import Callable, List, Optional, Union, cast
+
+import traitlets
+from ipyvue import Template
+from ipyvuetify.extra import FileInput
+from ipywidgets import widget_serialization
+from typing_extensions import TypedDict
+
+import solara
+import solara.hooks as hooks
+
+
+class FileInfo(TypedDict):
+    name: str
+    size: int
+    file_obj: typing.BinaryIO
+    data: Optional[bytes]
+
+
+class FileDropZone(FileInput):
+    # override to narrow traitlet of FileInput
+    template = traitlets.Instance(Template).tag(sync=True, **widget_serialization)
+    template_file = (__file__, "file_drop.vue")
+    items = traitlets.List(default_value=[]).tag(sync=True)
+    label = traitlets.Unicode().tag(sync=True)
+    multiple = traitlets.Bool(True).tag(sync=True)
+
+
+@solara.component
+def _FileDrop(
+    label="Drop file(s) here",
+    on_total_progress: Optional[Callable[[float], None]] = None,
+    on_file: Optional[Callable[[Union[FileInfo, List[FileInfo]]], None]] = None,
+    lazy: bool = True,
+    multiple: bool = False,
+):
+    """Generic implementation used by FileDrop and FileDropMultiple.
+
+    If multiple=True, multiple files can be uploaded.
+    """
+
+    file_info, set_file_info = solara.use_state(None)
+    wired_files, set_wired_files = solara.use_state(cast(Optional[typing.List[FileInfo]], None))
+
+    file_drop = FileDropZone.element(label=label, on_total_progress=on_total_progress, on_file_info=set_file_info, multiple=multiple)  # type: ignore
+
+    def wire_files():
+        if not file_info:
+            return
+
+        real = cast(FileDropZone, solara.get_widget(file_drop))
+
+        # workaround for @observe being cleared
+        real.version += 1
+        real.reset_stats()
+
+        set_wired_files(cast(typing.List[FileInfo], real.get_files()))
+
+    solara.use_side_effect(wire_files, [file_info])
+
+    def handle_file(cancel: threading.Event):
+        if not wired_files:
+            return
+        if on_file:
+            for i in range(len(wired_files)):
+                if not lazy:
+                    wired_files[i]["data"] = wired_files[i]["file_obj"].read()
+                else:
+                    wired_files[i]["data"] = None
+            if multiple:
+                on_file(wired_files)
+            else:
+                on_file(wired_files[0])
+
+    result: solara.Result = hooks.use_thread(handle_file, [wired_files])
+    if result.error:
+        raise result.error
+
+    return file_drop
+
+
+@solara.component
+def FileDrop(
+    label="Drop file here",
+    on_total_progress: Optional[Callable[[float], None]] = None,
+    on_file: Optional[Callable[[FileInfo], None]] = None,
+    lazy: bool = True,
+):
+    """Region a user can drop a file into for file uploading.
+
+    If lazy=True, no file content will be loaded into memory,
+    nor will any data be transferred by default.
+    If lazy=False, file content will be loaded into memory and passed to the `on_file` callback via the `FileInfo.data` attribute.
+
+
+    A file object is of the following argument type:
+    ```python
+    class FileInfo(typing.TypedDict):
+        name: str  # file name
+        size: int  # file size in bytes
+        file_obj: typing.BinaryIO
+        data: Optional[bytes]: bytes  # only present if lazy=False
+    ```
+
+
+    ## Arguments
+     * `on_total_progress`: Will be called with the progress in % of the file upload.
+     * `on_file`: Will be called with a `FileInfo` object, which contains the file `.name`, `.length` and a `.file_obj` object.
+     * `lazy`: Whether to load the file contents into memory or not. If `False`,
+        the file contents will be loaded into memory via the `.data` attribute of file object(s).
+
+    """
+
+    return _FileDrop(label=label, on_total_progress=on_total_progress, on_file=on_file, lazy=lazy, multiple=False)
+
+
+@solara.component
+def FileDropMultiple(
+    label="Drop files here",
+    on_total_progress: Optional[Callable[[float], None]] = None,
+    on_file: Optional[Callable[[List[FileInfo]], None]] = None,
+    lazy: bool = True,
+):
+    """Region a user can drop multiple files into for file uploading.
+
+    Almost identical to `FileDrop` except that multiple files can be dropped and `on_file` is called
+    with a list of `FileInfo` objects.
+
+    ## Arguments
+     * `on_total_progress`: Will be called with the progress in % of the file(s) upload.
+     * `on_file`: Will be called with a `List[FileInfo]`.
+        Each `FileInfo` contains the file `.name`, `.length`, `.file_obj` object, and `.data` attributes.
+     * `lazy`: Whether to load the file contents into memory or not.
+
+    """
+
+    return _FileDrop(label=label, on_total_progress=on_total_progress, on_file=on_file, lazy=lazy, multiple=True)

tomorrowcities/components/file_drop.vue

@@ -0,0 +1,83 @@
+<template>
+  <div ref="dropzone" class="solara-file-drop" effectAllowed="move">
+    <template v-if="file_info && file_info.length > 0">
+      <template v-if="multiple">
+        <div v-for="file in file_info">
+          {{ file.name }}
+        </div>
+      </template>
+      <template v-else>
+        {{ file_info[0].name }}
+      </template>
+    </template>
+    <template v-else>
+      {{ label }}
+    </template>
+  </div>
+</template>
+
+<script>
+module.exports = {
+  mounted() {
+    this.chunk_size = 2 * 1024 * 1024;
+    this.$refs.dropzone.addEventListener('dragover', event => {
+      event.preventDefault();
+    });
+
+    this.$refs.dropzone.addEventListener('drop', async event => {
+      event.preventDefault();
+      const items = await Promise.all([...event.dataTransfer.items]);
+      const files = items.map(i => i.webkitGetAsEntry())
+      const fileHolders = files.filter(f => f.isFile)
+      const nativeFilesPromises = fileHolders.map(fileHolder => new Promise((rs, rj) => fileHolder.file(rs, rj)))
+      const nativeFiles = await Promise.all(nativeFilesPromises)
+
+      this.native_file_info = nativeFiles
+      this.file_info = this.native_file_info.map(
+        ({name, size}) => ({
+          name,
+          isFile: true,
+          size,
+        }));
+    });
+  },
+  methods: {
+    jupyter_clear() {
+      this.native_file_info = [];
+      this.file_info = [];
+    },
+    jupyter_read(chunk) {
+      const {id, file_index, offset, length} = chunk;
+      let to_do = length;
+      let sub_offset = offset;
+
+      (async () => {
+        while (to_do > 0) {
+          console.log(this.chunk_size, to_do);
+          const sub_length = Math.min(to_do, this.chunk_size);
+
+          const file = this.native_file_info[file_index];
+          const blob = file.slice(sub_offset, sub_offset + sub_length);
+          const buff = await blob.arrayBuffer();
+
+          const msg = {id, file_index, offset: sub_offset, length: sub_length}
+          this.upload(msg, [buff]);
+
+          to_do -= sub_length
+          sub_offset += sub_length
+        }
+      })();
+    }
+  }
+}
+</script>
+
+<style id="solara-file-drop">
+.solara-file-drop {
+  height: 100px;
+  border: 1px dashed gray;
+  margin: 8px 0;
+  padding: 8px;
+  overflow: auto;
+}
+</style>

tomorrowcities/pages/engine.py

@@ -26,6 +26,7 @@ from .settings import threshold_flood, threshold_flood_distance, threshold_road_
 from ..backend.engine import compute, compute_power_infra, compute_road_infra, calculate_metrics, generate_exposure
 from ..backend.utils import building_preprocess, identity_preprocess, ParameterFile
 from .utilities import S3FileBrowser, extension_list, extension_list_w_dots
+from ..components.file_drop import FileDropMultiple
 from .docs import data_import_help
 import ipywidgets
 import ipydatagrid
@@ -1374,7 +1375,7 @@ def ImportDataZone():
                         the below area. Supported formats are Excel, GeoTIFF, JSON, GeoJSON, and GEM XML.
                         For more information, please refer to [Data Formats](/docs/data).
                         ''')
-        solara.FileDrop(on_total_progress=progress,
+        FileDropMultiple(on_total_progress=progress,
                 on_file=on_file_deneme, 
                 lazy=False)