docs(VFileUpload): add documentation

packages/docs/src/examples/v-file-upload/prop-content.vue

@@ -0,0 +1,8 @@
+<template>
+ <v-file-upload
+ browse-text="Local Filesystem"
+ divider-text="or choose locally"
+ icon="mdi-upload"
+ title="Drag and Drop Here"
+ ></v-file-upload>
+</template>

packages/docs/src/examples/v-file-upload/prop-density.vue

@@ -0,0 +1,19 @@
+<template>
+ <div class="text-center pa-2 mb-2">
+ <v-btn-toggle v-model="density" density="comfortable" border divided rounded>
+ <v-btn value="default">Default</v-btn>
+
+ <v-btn value="comfortable">Comfortable</v-btn>
+
+ <v-btn value="compact">Compact</v-btn>
+ </v-btn-toggle>
+ </div>
+
+ <v-file-upload :density="density"></v-file-upload>
+</template>
+
+<script setup>
+ import { shallowRef } from 'vue'
+
+ const density = shallowRef('default')
+</script>

packages/docs/src/examples/v-file-upload/prop-disabled.vue

@@ -0,0 +1,3 @@
+<template>
+ <v-file-upload disabled></v-file-upload>
+</template>

packages/docs/src/examples/v-file-upload/prop-scrim.vue

@@ -0,0 +1,3 @@
+<template>
+ <v-file-upload scrim="primary"></v-file-upload>
+</template>

packages/docs/src/examples/v-file-upload/slot-item.vue

@@ -0,0 +1,26 @@
+<template>
+ <v-file-upload
+ v-model="model"
+ clearable
+ multiple
+ show-size
+ >
+ <template v-slot:item="{ props: itemProps }">
+ <v-file-upload-item v-bind="itemProps" lines="one" nav>
+ <template v-slot:prepend>
+ <v-avatar size="32" rounded></v-avatar>
+ </template>
+
+ <template v-slot:clear="{ props: clearProps }">
+ <v-btn color="primary" v-bind="clearProps"></v-btn>
+ </template>
+ </v-file-upload-item>
+ </template>
+ </v-file-upload>
+</template>
+
+<script setup>
+ import { shallowRef } from 'vue'
+
+ const model = shallowRef(null)
+</script>

packages/docs/src/examples/v-file-upload/usage.vue

@@ -10,26 +10,30 @@
  </div>
 
  <template v-slot:configuration>
- <v-checkbox v-model="clear" label="Clearable"></v-checkbox>
+ <v-text-field v-model="title" label="Title"></v-text-field>
 
  <v-checkbox v-model="disabled" label="Disabled"></v-checkbox>
+
+ <v-checkbox v-model="clear" label="Clearable"></v-checkbox>
  </template>
  </ExamplesUsageExample>
 </template>
 
 <script setup>
  const name = 'v-file-upload'
  const model = ref('default')
- const options = []
+ const options = ['comfortable', 'compact']
  const clear = ref(false)
  const counter = ref(false)
  const disabled = ref(false)
+ const title = ref()
  const props = computed(() => {
  return {
  clearable: clear.value || undefined,
  counter: counter.value || undefined,
  disabled: disabled.value || undefined,
- label: 'File upload',
+ density: model.value,
+ title: title.value || undefined,
  variant: model.value === 'default' ? undefined : model.value,
  }
  })

packages/docs/src/pages/en/components/file-upload.md

@@ -16,13 +16,11 @@ features:
 
 # File upload
 
-
-
 <PageFeatures />
 
 ::: warning
 
-This feature requires [v3.6.0](/getting-started/release-notes/?version=v3.6.0)
+This feature requires [v3.7.3](/getting-started/release-notes/?version=v3.7.3)
 
 :::
 
@@ -42,6 +40,8 @@ export default createVuetify({
 
 ## Usage
 
+The `v-file-upload` component is a drag and drop area for uploading files. It can be customized with slots and has support for density and multiple styles.
+
 <ExamplesUsage name="v-file-upload" />
 
 <PromotedEntry />
@@ -51,10 +51,49 @@ export default createVuetify({
 | Component | Description |
 | - | - |
 | [v-file-upload](/api/v-file-upload/) | Primary Component |
+| [v-file-upload-item](/api/v-file-upload-item/) | Item Component |
 | [v-file-input](/api/v-file-input/) | File input component |
 
 <ApiInline hide-links />
 
 ## Guide
 
-TODO
+The v-file-upload component is a more visual counterpart to the [v-file-input](/components/file-inputs/) component. It provides a drag and drop area for files, and can be customized with slots.
+
+### Props
+
+Utilize various properties to customize the look and feel of the `v-file-upload` component.
+
+#### Density
+
+The **density** prop is used to control the vertical space the upload takes up.
+
+<ExamplesExample file="v-file-upload/prop-density" />
+
+#### Content
+
+Use the **browse-text**, **divider-text**, **icon**, **title**, or **subtitle** props to customize the text displayed in the component.
+
+<ExamplesExample file="v-file-upload/prop-content" />
+
+#### Disabled
+
+The **disabled** property reduces the opacity of the component and prevents interaction.
+
+<ExamplesExample file="v-file-upload/prop-disabled" />
+
+#### Scrim
+
+The **scrim** property allows you to set a colored scrim when hovering over the component with files.
+
+<ExamplesExample file="v-file-upload/prop-scrim" />
+
+### Slots
+
+The `v-file-upload` component has several slots that can be used to customize the component.
+
+#### Item
+
+The **item** slot is used to customize the appearance of the file item.
+
+<ExamplesExample file="v-file-upload/slot-item" />

packages/vuetify/src/labs/VFileUpload/VFileUpload.sass

@@ -61,7 +61,10 @@
  margin-bottom: $file-upload-icon-margin-bottom - 1rem
 
  .v-file-upload-divider
+ align-items: center
+ display: flex
  margin: $file-upload-divider-margin
+ justify-content: center
  width: 100%
 
  .v-file-upload-items