Skip to content

[6.x] Upload drag area improvements #13361

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jasonvarga merged 12 commits into from
Dec 19, 2025
+14 −9
Merged

[6.x] Upload drag area improvements #13361

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
84a3be6
Make the upload drop area take up the height on the parent so the dra…
JayGeorge Dec 17, 2025
f68f5f5
Make "drop file to upload" icon consistent
JayGeorge Dec 17, 2025
b2a4dd1
Add large thinned-out upload icon so things feel more consistent
JayGeorge Dec 17, 2025
623cfb4
large thinned-out upload icon - tweak stroke width
JayGeorge Dec 17, 2025
2c4d513
Fix border-radius of dragging to upload
JayGeorge Dec 18, 2025
3f68cb0
Make the upload drop area take up the height on /assets so the drag/d…
JayGeorge Dec 19, 2025
dae1b81
A much simpler solution
JayGeorge Dec 19, 2025
977840e
Nope, we still need this
JayGeorge Dec 19, 2025
2dd83ce
Add a condition for the docs callout so it doesn't appear in the asse…
JayGeorge Dec 19, 2025
0de611d
Merge branch 'master' into upload-drag-area-improvements
jasonvarga Dec 19, 2025
0a20d38
use a slot rather than a condition
jasonvarga Dec 19, 2025
101603f
unused import
jasonvarga Dec 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion resources/css/components/assets.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
6 changes: 4 additions & 2 deletions resources/js/components/assets/Browser/Browser.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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>

Expand Down Expand Up @@ -146,6 +146,8 @@
<ListingPagination />
</PanelFooter>
</Panel>

<slot name="footer" />
</template>
</Listing>
</div>
Expand Down
1 change: 1 addition & 0 deletions resources/js/components/assets/Uploader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export default {
return h(
'div',
{
class: 'h-full',
onDragenter: this.dragenter,
onDragover: this.dragover,
onDragleave: this.dragleave,
Expand Down
11 changes: 6 additions & 5 deletions resources/js/pages/assets/Browse.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ export default {
</script>

<template>
<div v-cloak>
<div class="h-full" v-cloak>
<Head :title="container.title" />

<asset-browser
Expand Down Expand Up @@ -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>
2 changes: 1 addition & 1 deletion resources/js/pages/layout/Layout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions resources/svg/icons/upload-cloud-large.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.