[6.x] Upload drag area improvements (#13361)

JayGeorge · jasonvarga · web-flow · commit 02879f9bdfd0 · 2025-12-19T11:38:26.000-05:00
Co-authored-by: Jason Varga &lt;jason@pixelfear.com&gt;
diff --git a/resources/css/components/assets.css b/resources/css/components/assets.css
@@ -26,7 +26,7 @@
 }
 
 .drag-notification {
-    @apply absolute inset-0 flex items-center justify-center rounded-sm p-1 text-center text-xs leading-tight @sm:text-lg;
+    @apply absolute inset-0 flex items-center justify-center rounded-xl p-1 text-center text-xs leading-tight @sm:text-lg;
     border: 1px dashed var(--color-gray-600);
     pointer-events: none;
     z-index: var(--z-index-draggable);
diff --git a/resources/js/components/assets/Browser/Browser.vue b/resources/js/components/assets/Browser/Browser.vue
@@ -1,5 +1,5 @@
 <template>
-    <div ref="browser" @keydown.shift="shiftDown" @keyup="clearShift">
+    <div ref="browser" class="h-full" @keydown.shift="shiftDown" @keyup="clearShift">
         <Uploader
             ref="uploader"
             :container="container.id"
@@ -12,7 +12,7 @@
         >
             <div>
                 <div class="drag-notification" v-show="dragging">
-                    <Icon name="upload" class="m-4 size-12" />
+                    <Icon name="upload-cloud-large" class="m-4 size-13" />
                     <span>{{ __('Drop File to Upload') }}</span>
                 </div>
 
@@ -146,6 +146,8 @@
                                 <ListingPagination />
                             </PanelFooter>
                         </Panel>
+
+                        <slot name="footer" />
                     </template>
                 </Listing>
             </div>
diff --git a/resources/js/components/assets/Uploader.vue b/resources/js/components/assets/Uploader.vue
@@ -17,6 +17,7 @@ export default {
         return h(
             'div',
             {
+                class: 'h-full',
                 onDragenter: this.dragenter,
                 onDragover: this.dragover,
                 onDragleave: this.dragleave,
diff --git a/resources/js/pages/assets/Browse.vue b/resources/js/pages/assets/Browse.vue
@@ -90,7 +90,7 @@ export default {
 </script>
 
 <template>
-    <div v-cloak>
+    <div class="h-full" v-cloak>
         <Head :title="container.title" />
 
         <asset-browser
@@ -127,10 +127,11 @@ export default {
                     <ui-skeleton class="h-30 w-full" />
                 </div>
             </template>
+            <template #footer>
+                <div class="starting-style-transition starting-style-transition--delay">
+                    <DocsCallout :topic="__('Assets')" url="assets" />
+                </div>
+            </template>
         </asset-browser>
-
-        <div class="starting-style-transition starting-style-transition--delay">
-            <DocsCallout :topic="__('Assets')" url="assets" />
-        </div>
     </div>
 </template>
diff --git a/resources/js/pages/layout/Layout.vue b/resources/js/pages/layout/Layout.vue
@@ -32,7 +32,7 @@ provide('layout', {
         <main id="main" class="flex bg-body-bg dark:border-t dark:border-body-border rounded-t-2xl fixed top-14 inset-x-0 bottom-0 min-h-[calc(100vh-3.5rem)]">
             <Nav />
             <div id="main-content" class="main-content sm:p-2 h-full flex-1 overflow-y-auto rounded-t-2xl">
-                <div id="content-card" class="relative content-card min-h-full">
+                <div id="content-card" class="relative content-card min-h-full h-full">
                     <slot />
                 </div>
             </div>
diff --git a/resources/svg/icons/upload-cloud-large.svg b/resources/svg/icons/upload-cloud-large.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="-0.35 -0.35 14 14" id="Cloud-Upload--Streamline-Flex"><g id="cloud-upload--cloud-server-internet-upload-up-arrow-network"><path id="Subtract" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M2.7163444999999995 8.876714499999999C1.4725095000000001 8.350271999999999 0.475 7.414161 0.475 5.7513475c0 -1.9390165 1.0906949999999997 -3.0297115 3.0297115 -3.0297115l0.037629499999999996 0.00013299999999999998C3.9671429999999996 1.270169 5.149152 0.475 6.94963 0.475c2.1944335 0 3.47016 1.1812205 3.575895 3.2924624999999996 1.47269 0.0256975 2.299475 0.875368 2.299475 2.3680934999999996 0 1.5889985 -0.9782150000000001 2.4394479999999996 -2.178255 2.894137" stroke-width=".7"/><path id="Vector" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4.763423499999999 9.52584c0.6780719999999999 -0.827583 1.0915404999999998 -1.2411275 1.8863295 -1.886282 0.794789 0.6451545 1.208248 1.0586989999999998 1.8863295 1.886282" stroke-width=".7"/><path id="Vector_2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m6.6499619999999995 12.673094999999998 0 -5.023590499999999" stroke-width=".7"/><path id="Vector 2591" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3.4752899999999998 2.723194c1.118739 0 2.1192694999999997 0.73739 2.434888 1.4110824999999998" stroke-width=".7"/></g></svg>

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@`
`26`	`26`	`}`
`27`	`27`
`28`	`28`	`.drag-notification {`
`29`		`- @apply absolute inset-0 flex items-center justify-center rounded-sm p-1 text-center text-xs leading-tight @sm:text-lg;`
	`29`	`+ @apply absolute inset-0 flex items-center justify-center rounded-xl p-1 text-center text-xs leading-tight @sm:text-lg;`
`30`	`30`	`border: 1px dashed var(--color-gray-600);`
`31`	`31`	`pointer-events: none;`
`32`	`32`	`z-index: var(--z-index-draggable);`
Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,7 @@ export default {`
`17`	`17`	`return h(`
`18`	`18`	`'div',`
`19`	`19`	`{`
	`20`	`+ class: 'h-full',`
`20`	`21`	`onDragenter: this.dragenter,`
`21`	`22`	`onDragover: this.dragover,`
`22`	`23`	`onDragleave: this.dragleave,`