feat(VFileUpload): add new component (#19667)

Co-authored-by: MajesticPotatoe <[email protected]>

packages/docs/src/data/nav.json

@@ -237,6 +237,10 @@
         "title": "date-inputs",
         "subfolder": "components"
       },
+      {
+        "title": "file-upload",
+        "subfolder": "components"
+      },
       {
         "title": "number-inputs",
         "subfolder": "components"

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

@@ -0,0 +1,48 @@
+<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-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 = ['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,
+      density: model.value,
+      title: title.value || undefined,
+      variant: model.value === 'default' ? undefined : model.value,
+    }
+  })
+
+  const slots = computed(() => {
+    return ``
+  })
+
+  const code = computed(() => {
+    return `<${name}${propsToString(props.value)}>${slots.value}</${name}>`
+  })
+</script>

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

@@ -0,0 +1,99 @@
+---
+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.7.3](/getting-started/release-notes/?version=v3.7.3)
+
+:::
+
+## 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
+
+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 />
+
+## API
+
+| 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
+
+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/iconsets/mdi.ts

@@ -47,6 +47,7 @@ const aliases: IconAliases = {
   treeviewCollapse: 'mdi-menu-down',
   treeviewExpand: 'mdi-menu-right',
   eyeDropper: 'mdi-eyedropper',
+  upload: 'mdi-cloud-upload',
 }
 
 const mdi: IconSet = {

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

@@ -0,0 +1,75 @@
+@use '../../styles/tools'
+@use '../../styles/settings'
+@use './variables' as *
+
+@include tools.layer('components')
+  .v-file-upload
+    padding: $file-upload-padding
+    flex-direction: column
+    justify-content: center
+    align-items: center
+    position: relative
+
+    &.v-sheet
+      display: flex
+      border-radius: 4px
+      border-style: dashed
+      border-width: 2px
+
+    &.v-file-upload--density-compact
+      padding: 32px 0
+      flex-direction: row
+      gap: 1rem
+
+    .v-overlay__scrim
+      pointer-events: none
+
+    &--disabled
+      pointer-events: none
+      opacity: var(--v-disabled-opacity)
+
+    &--dragging
+      > *
+        pointer-events: none
+
+    &--clickable
+      cursor: pointer
+
+    input[type="file"]
+      left: 0
+      opacity: 0
+      position: absolute
+      cursor: pointer
+      top: 0
+      z-index: -1
+
+  .v-file-upload-title
+    font-size: $file-upload-title-font-size
+    font-weight: 600
+
+  .v-file-upload-icon
+    opacity: var(--v-medium-emphasis-opacity)
+    font-size: $file-upload-icon-font-size
+    margin-bottom: $file-upload-icon-margin-bottom
+
+    .v-file-upload--density-comfortable &
+      font-size: $file-upload-icon-font-size - .5rem
+      margin-bottom: $file-upload-icon-margin-bottom - .5rem
+
+    .v-file-upload--density-compact &
+      font-size: $file-upload-icon-font-size - 1rem
+      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
+    margin: $file-upload-items-margin
+
+  .v-file-upload-item
+    &:not(:first-child)
+      margin-top: 8px