From a23fd330360407edf33b6f89f3bd00bc928881a3 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Mon, 29 Apr 2024 21:01:57 -0500
Subject: [PATCH] docs(VFileUpload): create docs page

---
 packages/docs/src/data/nav.json               |  4 ++
 .../docs/src/examples/v-file-upload/usage.vue | 44 ++++++++++++++
 .../src/pages/en/components/file-upload.md    | 60 +++++++++++++++++++
 3 files changed, 108 insertions(+)
 create mode 100644 packages/docs/src/examples/v-file-upload/usage.vue
 create mode 100644 packages/docs/src/pages/en/components/file-upload.md

diff --git a/packages/docs/src/data/nav.json b/packages/docs/src/data/nav.json
index 14cacacc52e..eaa11739a8b 100644
--- a/packages/docs/src/data/nav.json
+++ b/packages/docs/src/data/nav.json
@@ -235,6 +235,10 @@
         "title": "empty-states",
         "subfolder": "components"
       },
+      {
+        "title": "file-upload",
+        "subfolder": "components"
+      },
       {
         "title": "floating-action-buttons",
         "subfolder": "components"
diff --git a/packages/docs/src/examples/v-file-upload/usage.vue b/packages/docs/src/examples/v-file-upload/usage.vue
new file mode 100644
index 00000000000..bcc55d496b1
--- /dev/null
+++ b/packages/docs/src/examples/v-file-upload/usage.vue
@@ -0,0 +1,44 @@
+<template>
+  <ExamplesUsageExample
+    v-model="model"
+    :code="code"
+    :name="name"
+    :options="options"
+  >
+    <div>
+      <v-file-upload v-bind="props"></v-file-upload>
+    </div>
+
+    <template v-slot:configuration>
+      <v-checkbox v-model="clear" label="Clearable"></v-checkbox>
+
+      <v-checkbox v-model="disabled" label="Disabled"></v-checkbox>
+    </template>
+  </ExamplesUsageExample>
+</template>
+
+<script setup>
+  const name = 'v-file-upload'
+  const model = ref('default')
+  const options = []
+  const clear = ref(false)
+  const counter = ref(false)
+  const disabled = ref(false)
+  const props = computed(() => {
+    return {
+      clearable: clear.value || undefined,
+      counter: counter.value || undefined,
+      disabled: disabled.value || undefined,
+      label: 'File upload',
+      variant: model.value === 'default' ? undefined : model.value,
+    }
+  })
+
+  const slots = computed(() => {
+    return ``
+  })
+
+  const code = computed(() => {
+    return `<${name}${propsToString(props.value)}>${slots.value}</${name}>`
+  })
+</script>
diff --git a/packages/docs/src/pages/en/components/file-upload.md b/packages/docs/src/pages/en/components/file-upload.md
new file mode 100644
index 00000000000..cb06c39a5d1
--- /dev/null
+++ b/packages/docs/src/pages/en/components/file-upload.md
@@ -0,0 +1,60 @@
+---
+emphasized: true
+meta:
+  title: File upload
+  description: The file upload component is a drag and drop area for uploading files.
+  keywords: file uploading, file upload, file drag and drop, file drop area, file dropzone, file upload component
+related:
+  - /components/buttons/
+  - /components/file-inputs/
+  - /components/sheets/
+features:
+  report: true
+  label: 'C: VFileUpload'
+  github: '/labs/VFileUpload/'
+---
+
+# File upload
+
+
+
+<PageFeatures />
+
+::: warning
+
+This feature requires [v3.6.0](/getting-started/release-notes/?version=v3.6.0)
+
+:::
+
+## Installation
+
+Labs components require a manual import and installation of the component.
+
+```js { resource="src/plugins/vuetify.js" }
+import { VFileUpload } from 'vuetify/labs/VFileUpload'
+
+export default createVuetify({
+  components: {
+    VFileUpload,
+  },
+})
+```
+
+## Usage
+
+<ExamplesUsage name="v-file-upload" />
+
+<PromotedEntry />
+
+## API
+
+| Component | Description |
+| - | - |
+| [v-file-upload](/api/v-file-upload/) | Primary Component |
+| [v-file-input](/api/v-file-input/) | File input component |
+
+<ApiInline hide-links />
+
+## Guide
+
+TODO