diff --git a/ipyvuetify/extra/file_input.py b/ipyvuetify/extra/file_input.py
index 30fb52b5..f38fd7eb 100644
--- a/ipyvuetify/extra/file_input.py
+++ b/ipyvuetify/extra/file_input.py
@@ -7,6 +7,8 @@
 import IPython
 import nest_asyncio
 import traitlets
+from ipywidgets import widget_serialization
+from traitlets import Any, Bool, Dict, Float, Int, List, Unicode, Union
 
 import ipyvuetify as v
 
@@ -148,26 +150,177 @@ def readall(self):
 
 
 class FileInput(v.VuetifyTemplate):
-    template = traitlets.Unicode(load_template("file_input.vue")).tag(sync=True)
-    data = traitlets.Unicode("{myfiles: undefined}").tag(sync=True)
-
-    file_info = traitlets.List().tag(sync=True)
-    version = traitlets.Int(0).tag(sync=True)
-    multiple = traitlets.Bool(True).tag(sync=True)
-    disabled = traitlets.Bool(False).tag(sync=True)
-    directory = traitlets.Bool(False).tag(sync=True)
-    accept = traitlets.Unicode().tag(sync=True)
-    total_progress = traitlets.Int(0).tag(sync=True)
-    show_progress = traitlets.Bool(True).tag(sync=True)
-    progress_indeterminate = traitlets.Bool(False).tag(sync=True)
+    append_icon = Unicode(None, allow_none=True).tag(sync=True)
+
+    append_outer_icon = Unicode(None, allow_none=True).tag(sync=True)
+
+    autofocus = Bool(None, allow_none=True).tag(sync=True)
+
+    background_color = Unicode(None, allow_none=True).tag(sync=True)
+
+    chips = Bool(None, allow_none=True).tag(sync=True)
+
+    clear_icon = Unicode(None, allow_none=True).tag(sync=True)
+
+    clearable = Bool(None, allow_none=True).tag(sync=True)
+
+    color = Unicode(None, allow_none=True).tag(sync=True)
+
+    counter = Union([Bool(), Float(), Unicode()], default_value=None, allow_none=True).tag(
+        sync=True
+    )
+
+    counter_size_string = Unicode(None, allow_none=True).tag(sync=True)
+
+    counter_string = Unicode(None, allow_none=True).tag(sync=True)
+
+    dark = Bool(None, allow_none=True).tag(sync=True)
+
+    dense = Bool(None, allow_none=True).tag(sync=True)
+
+    disabled = Bool(None, allow_none=True).tag(sync=True)
+
+    error = Bool(None, allow_none=True).tag(sync=True)
+
+    error_count = Union([Float(), Unicode()], default_value=None, allow_none=True).tag(sync=True)
+
+    error_messages = Union([Unicode(), List(Any())], default_value=None, allow_none=True).tag(
+        sync=True
+    )
+
+    filled = Bool(None, allow_none=True).tag(sync=True)
+
+    flat = Bool(None, allow_none=True).tag(sync=True)
+
+    full_width = Bool(None, allow_none=True).tag(sync=True)
+
+    height = Union([Float(), Unicode()], default_value=None, allow_none=True).tag(sync=True)
+
+    hide_details = Union([Bool(), Unicode()], default_value=None, allow_none=True).tag(sync=True)
+
+    # Missing Vuetify prop: hide-input
+
+    hint = Unicode(None, allow_none=True).tag(sync=True)
+
+    id = Unicode(None, allow_none=True).tag(sync=True)
+
+    label = Unicode(None, allow_none=True).tag(sync=True)
+
+    light = Bool(None, allow_none=True).tag(sync=True)
+
+    loader_height = Union([Float(), Unicode()], default_value=None, allow_none=True).tag(sync=True)
+
+    loading = Union([Bool(), Unicode()], default_value=None, allow_none=True).tag(sync=True)
+
+    messages = Union([Unicode(), List(Any())], default_value=None, allow_none=True).tag(sync=True)
+
+    multiple = Bool(None, allow_none=True).tag(sync=True)
+
+    outlined = Bool(None, allow_none=True).tag(sync=True)
+
+    persistent_hint = Bool(None, allow_none=True).tag(sync=True)
+
+    # Missing Vuetify prop: persistent-placeholder
+
+    placeholder = Unicode(None, allow_none=True).tag(sync=True)
+
+    prefix = Unicode(None, allow_none=True).tag(sync=True)
+
+    prepend_icon = Unicode(None, allow_none=True).tag(sync=True)
+
+    prepend_inner_icon = Unicode(None, allow_none=True).tag(sync=True)
+
+    readonly = Bool(None, allow_none=True).tag(sync=True)
+
+    reverse = Bool(None, allow_none=True).tag(sync=True)
+
+    rounded = Bool(None, allow_none=True).tag(sync=True)
+
+    rules = List(Any(), default_value=None, allow_none=True).tag(sync=True)
+
+    shaped = Bool(None, allow_none=True).tag(sync=True)
+
+    show_size = Union([Bool(), Float()], default_value=None, allow_none=True).tag(sync=True)
+
+    single_line = Bool(None, allow_none=True).tag(sync=True)
+
+    small_chips = Bool(None, allow_none=True).tag(sync=True)
+
+    solo = Bool(None, allow_none=True).tag(sync=True)
+
+    solo_inverted = Bool(None, allow_none=True).tag(sync=True)
+
+    success = Bool(None, allow_none=True).tag(sync=True)
+
+    success_messages = Union([Unicode(), List(Any())], default_value=None, allow_none=True).tag(
+        sync=True
+    )
+
+    suffix = Unicode(None, allow_none=True).tag(sync=True)
+
+    truncate_length = Union([Float(), Unicode()], default_value=None, allow_none=True).tag(
+        sync=True
+    )
+
+    type = Unicode(None, allow_none=True).tag(sync=True)
+
+    validate_on_blur = Bool(None, allow_none=True).tag(sync=True)
+
+    value = Any(None, allow_none=True).tag(sync=True)
+
+    # VueWidget props
+
+    v_model = List(Dict(), allow_none=True)
+
+    style_ = Unicode(None, allow_none=True).tag(sync=True)
+
+    class_ = Unicode(None, allow_none=True).tag(sync=True)
+
+    attributes = Dict(None, allow_none=True).tag(sync=True)
+
+    v_slots = List(Dict()).tag(sync=True, **widget_serialization)
+
+    v_on = Unicode(None, allow_none=True).tag(sync=True)
+
+    # Component-specific props
+
+    template = Unicode(load_template("file_input.vue")).tag(sync=True)
+
+    file_info = List(Dict(), allow_none=True).tag(sync=True)
+
+    version = Int(0).tag(sync=True)
+
+    total_progress = Int(0).tag(sync=True)
+
+    progress_indeterminate = Bool(False).tag(sync=True)
 
     total_progress_inner = 0
     total_size_inner = 0
 
-    def __init__(self, **kwargs):
+    def __init__(self, *args, **kwargs):
         self.chunk_listeners = {}
         self.stats = []
-        super().__init__(**kwargs)
+
+        # Keep default behaviour
+        kwargs.setdefault("multiple", True)
+        kwargs.setdefault("clearable", True)
+
+        attributes = kwargs.setdefault("attributes", {})
+        if "accept" in kwargs:
+            attributes["accept"] = kwargs["accept"]
+            del kwargs["accept"]
+        if "directory" in kwargs:
+            attributes["directory"] = kwargs["directory"]
+            del kwargs["directory"]
+        if "show_progress" in kwargs:
+            kwargs.setdefault("loading", kwargs["show_progress"])
+            del kwargs["show_progress"]
+        if "file_info" in kwargs:
+            del kwargs["file_info"]
+        if "v_model" in kwargs:
+            del kwargs["v_model"]
+
+        super().__init__(*args, **kwargs)
 
         if not hasattr(IPython.get_ipython(), "kernel"):
             return
@@ -175,10 +328,41 @@ def __init__(self, **kwargs):
         if kernel.implementation == "ipython":
             nest_asyncio.apply()
 
+    @property
+    def accept(self):
+        if "accept" in self.attributes:
+            return self.attributes["accept"]
+        return ""
+
+    @accept.setter
+    def accept(self, value):
+        self.attributes = {**self.attributes, "accept": value}
+
+    @property
+    def directory(self):
+        if "directory" in self.attributes:
+            return self.attributes["directory"]
+        return False
+
+    @directory.setter
+    def directory(self, value):
+        self.attributes = {**self.attributes, "directory": value}
+
+    @property
+    def show_progress(self):
+        if self.loading is not None:
+            return self.loading
+        return True
+
+    @show_progress.setter
+    def show_progress(self, value):
+        self.loading = value
+
     @traitlets.observe("file_info")
     def _file_info_changed(self, _):
         self.version += 1
         self.reset_stats()
+        self.v_model = self.get_files()
 
     def update_stats(self, file_index, bytes_read):
         self.stats[file_index] += bytes_read
@@ -191,7 +375,7 @@ def update_stats(self, file_index, bytes_read):
     def get_files(self, timeout=30):
         files = []
         for index, file in enumerate(self.file_info):
-            file = copy.deepcopy(self.file_info[index])
+            file = copy.deepcopy(file)
             file["file_obj"] = ClientSideFile(self, index, timeout=timeout)
             files.append(file)
         return files
diff --git a/ipyvuetify/extra/file_input.vue b/ipyvuetify/extra/file_input.vue
index 6d8a8401..abb2dd04 100644
--- a/ipyvuetify/extra/file_input.vue
+++ b/ipyvuetify/extra/file_input.vue
@@ -1,40 +1,360 @@
 <template>
-  <div>
-    <v-file-input
-      v-model="myfiles"
-      :disabled="disabled"
-      :multiple="multiple"
-      show-size
-      show-counter
-      clearable
-      chips
-      :counter="multiple"
-      @change="setFiles"
-      :webkitdirectory="directory"
-      :directory="directory"
-      :accept="accept"
-    />
-    <v-progress-linear
-      v-if="(total_progress > 0 || progress_indeterminate) && show_progress"
-      :indeterminate="progress_indeterminate"
-      :value="progress_indeterminate ? 0 : total_progress"
-    />
-  </div>
+  <v-file-input
+    ref="file-input"
+    :class="class_ || []"
+    :style="style_ || {}"
+    v-bind="props"
+    @change="setFiles"
+    @click:clear="clear"
+  >
+    <template v-slot:progress>
+      <v-progress-linear
+        absolute
+        :color="
+          loading === null || loading === true || loading === ''
+            ? color || 'primary'
+            : loading
+        "
+        :height="loader_height || 4"
+        :indeterminate="progress_indeterminate"
+        :value="total_progress"
+      />
+    </template>
+    <template v-for="slot in v_slots" v-slot:[slot.name]>
+      <jupyter-widget :key="slot.name" :widget="slot.children" />
+    </template>
+  </v-file-input>
 </template>
 
 <script>
-modules.export = {
+module.exports = {
+  data() {
+    return {
+      computedLoadingTimeout: null,
+    };
+  },
   created() {
     this.chunk_size = 2 * 1024 * 1024;
   },
+  mounted() {
+    const fileInput = this.$refs["file-input"];
+    const input = fileInput.$refs["input"];
+    const inputSlot = fileInput.$refs["input-slot"];
+
+    // Native drag & drop on input[type=file] seems to be supported in Chrome and Firefox since at least 2011:
+    // - https://bugzilla.mozilla.org/show_bug.cgi?id=50660
+    // - https://bugs.webkit.org/show_bug.cgi?id=58401
+
+    input.classList.add("v-file-input-native-dropzone");
+
+    input.addEventListener("click", (e) => {
+      // Disable click propagation to label
+      e.stopPropagation();
+    });
+
+    inputSlot.addEventListener("dragover", (e) => {
+      // Enable custom drag-and-drop behaviour for any target except input
+      if (e.target !== input) e.preventDefault();
+      e.dataTransfer.dropEffect = "copy";
+    });
+
+    inputSlot.addEventListener("dragenter", (e) => {
+      if (e.target !== input) e.preventDefault();
+      if (!inputSlot.contains(e.relatedTarget)) {
+        inputSlot.classList.add("v-file-input-custom-dropzone");
+      }
+    });
+
+    inputSlot.addEventListener("dragleave", (e) => {
+      if (e.target !== input) e.preventDefault();
+      if (!inputSlot.contains(e.relatedTarget)) {
+        inputSlot.classList.remove("v-file-input-custom-dropzone");
+      }
+    });
+
+    const supportsFileSystemAccessAPI =
+      "getAsFileSystemHandle" in DataTransferItem.prototype;
+
+    const dropHandler = async (e) => {
+      if (e.target !== input) e.preventDefault();
+
+      e.stopPropagation();
+
+      inputSlot.classList.remove("v-file-input-custom-dropzone");
+
+      let files;
+      if (e.dataTransfer.items) {
+        const fileDataTransferItems = [...e.dataTransfer.items].filter(
+          (item) => item.kind === "file" // `file` misleadingly means actual file or directory
+        );
+
+        let getFiles;
+        let hasDirectories;
+        if (supportsFileSystemAccessAPI) {
+          const fileSystemHandles = await Promise.all(
+            fileDataTransferItems.map((item) => item.getAsFileSystemHandle())
+          );
+
+          hasDirectories = fileSystemHandles.some(
+            (handle) => handle.kind === "directory"
+          );
+
+          getFiles = async () => this.getFileList(fileSystemHandles);
+        } else {
+          const fileSystemEntries = fileDataTransferItems.map((item) =>
+            item.webkitGetAsEntry()
+          );
+
+          hasDirectories = fileSystemEntries.some((entry) => entry.isDirectory);
+
+          getFiles = async () => this.getFileList(fileSystemEntries);
+        }
+
+        if (
+          (!this.webkitdirectory && hasDirectories) ||
+          (!this.multiple && hasDirectories) ||
+          (!this.multiple && fileDataTransferItems.length > 1)
+        ) {
+          if (e.target === input) e.preventDefault(); // Skip native drag-and-drop handler
+          return;
+        }
+
+        if (e.target === input) return; // Use native drag-and-drop handler
+
+        if (
+          !hasDirectories &&
+          e.dataTransfer.files &&
+          e.dataTransfer.files.length >= fileDataTransferItems.length
+        ) {
+          files = e.dataTransfer.files;
+        } else {
+          files = await getFiles();
+        }
+      } else {
+        files = e.dataTransfer.files;
+      }
+
+      files = this.filterAcceptedFiles(files);
+
+      input.files = files;
+      input.dispatchEvent(new Event("change"));
+    };
+
+    input.addEventListener("drop", dropHandler);
+    inputSlot.addEventListener("drop", dropHandler);
+  },
+  watch: {
+    total_progress: function (value) {
+      if (this.computedLoadingTimeout !== null) {
+        clearTimeout(this.computedLoadingTimeout);
+        this.computedLoadingTimeout = null;
+      }
+      if (value == 100) {
+        this.computedLoadingTimeout = setTimeout(() => {
+          this.computedLoadingTimeout = null;
+        }, 1000);
+      }
+    },
+  },
+  computed: {
+    webkitdirectory: function () {
+      return "webkitdirectory" in (this.attributes || {});
+    },
+    computedLoadingValue: function () {
+      return (
+        (!this.progress_indeterminate || this.total_progress > 0) &&
+        (this.total_progress < 100 || this.computedLoadingTimeout !== null)
+      );
+    },
+    props: function () {
+      const keys = [
+        "append_icon",
+        "append_outer_icon",
+        "autofocus",
+        "background_color",
+        "chips",
+        "clear_icon",
+        "clearable",
+        "color",
+        "counter",
+        "counter_size_string",
+        "counter_string",
+        "dark",
+        "dense",
+        "disabled",
+        "error",
+        "error_count",
+        "error_messages",
+        "filled",
+        "flat",
+        "full_width",
+        "height",
+        "hide_details",
+        "hide_input",
+        "hint",
+        "id",
+        "label",
+        "light",
+        "loader_height",
+        "loading",
+        "messages",
+        "multiple",
+        "outlined",
+        "persistent_hint",
+        "persistent_placeholder",
+        "placeholder",
+        "prefix",
+        "prepend_icon",
+        "prepend_inner_icon",
+        "readonly",
+        "reverse",
+        "rounded",
+        "rules",
+        "shaped",
+        "show_size",
+        "single_line",
+        "small_chips",
+        "solo",
+        "solo_inverted",
+        "success",
+        "success_messages",
+        "suffix",
+        "truncate_length",
+        "type",
+        "validate_on_blur",
+        "value",
+      ];
+
+      const useAsAttr = (key) =>
+        this.$data[key] !== null &&
+        !key.startsWith("_") &&
+        ![
+          "attributes",
+          "v_slots",
+          "v_on",
+          "layout",
+          "children",
+          "slot",
+          "v_model",
+          "style_",
+          "class_",
+        ].includes(key);
+
+      const props = keys.filter(useAsAttr).reduce(
+        (result, key) => {
+          result[key.replace(/_$/g, "").replace(/_/g, "-")] = this.$data[key];
+          return result;
+        },
+        { ...(this.attributes || {}) }
+      );
+
+      if (!("loading" in props)) {
+        props["loading"] = this.computedLoadingValue;
+      }
+
+      return props;
+    },
+  },
   methods: {
-    setFiles(e) {
-      if (!e) {
-        this.native_file_info = [];
-        this.file_info = [];
+    getFileList: async function (fileEntriesOrHandles) {
+      async function readDirectoryEntry(directoryEntry) {
+        const directoryReader = directoryEntry.createReader();
+        const result = [];
+        let entries;
+        do {
+          try {
+            // readEntries will return only some of the entries in a directory
+            // e.g. Chrome returns at most 100 entries at a time
+            entries = await new Promise((resolve, reject) => {
+              directoryReader.readEntries(resolve, reject);
+            });
+          } catch (error) {
+            console.error(error);
+            entries = [];
+          }
+          result.push(...entries);
+        } while (entries.length > 0);
+        return result;
+      }
+
+      async function readDirectoryHandle(directoryHandle) {
+        const result = [];
+        for await (const handle of directoryHandle.values()) {
+          result.push(handle);
+        }
+        return result;
+      }
+
+      const files = [];
+
+      const queue = [...fileEntriesOrHandles];
+
+      while (queue.length > 0) {
+        let entryOrHandle = queue.shift();
+        if (entryOrHandle.isFile) {
+          const file = await new Promise((resolve, reject) =>
+            entryOrHandle.file(resolve, reject)
+          );
+          files.push(file);
+        } else if (entryOrHandle.isDirectory) {
+          queue.push(...(await readDirectoryEntry(entryOrHandle)));
+        } else if (entryOrHandle.kind === "file") {
+          const file = await entryOrHandle.getFile();
+          if (file !== null) files.push(file);
+        } else if (entryOrHandle.kind === "directory") {
+          queue.push(...(await readDirectoryHandle(entryOrHandle)));
+        }
+      }
+
+      const dt = new DataTransfer();
+      files.forEach((file) => {
+        dt.items.add(file);
+      });
+
+      return dt.files;
+    },
+    isAcceptedFile(file) {
+      if (!this.accept) return true;
+      for (const mime of this.accept.split(/\s*,\s*/)) {
+        if (
+          mime === file.type ||
+          (/^\.[^/\\]+$/.test(mime) && file.name.endsWith(mime)) ||
+          (/^[^/\\]+\/\*$/.test(mime) &&
+            file.type.startsWith(mime.slice(0, -1)))
+        )
+          return true;
+      }
+      return false;
+    },
+    filterAcceptedFiles(files) {
+      const acceptedFiles = [...files].filter(this.isAcceptedFile);
+      if (acceptedFiles.length < files.length) {
+        const dataTransfer = new DataTransfer();
+        for (const file of acceptedFiles) {
+          dataTransfer.items.add(file);
+          if (!this.multiple) break;
+        }
+        return dataTransfer.files;
+      }
+      return files;
+    },
+    change(e) {
+      if (!e.target) return;
+
+      const files = e.target.files || [];
+
+      this.setFiles(this.multiple ? [...files] : files[0]);
+    },
+    clear() {
+      this.native_file_info = [];
+      this.file_info = [];
+    },
+    setFiles(value) {
+      if (!value) {
+        this.clear();
         return;
       }
-      this.native_file_info = e instanceof File ? [e] : e;
+      this.native_file_info = value instanceof File ? [value] : value;
       this.file_info = this.native_file_info.map(
         ({ name, size, lastModified, type }) => ({
           name,
@@ -45,8 +365,7 @@ modules.export = {
       );
     },
     jupyter_clear() {
-      this.myfiles = undefined;
-      this.setFiles(false);
+      this.clear();
     },
     jupyter_read(chunk) {
       const { id, file_index, offset, length } = chunk;
@@ -78,3 +397,25 @@ modules.export = {
   },
 };
 </script>
+
+<style>
+.v-file-input input[type="file"].v-file-input-native-dropzone {
+  position: absolute;
+  max-width: none;
+  max-height: none;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  opacity: 0;
+  pointer-events: auto;
+}
+
+.v-file-input .v-file-input-custom-dropzone {
+  outline-style: dashed;
+}
+</style>