diff --git a/resources/js/components/assets/Browser/Browser.vue b/resources/js/components/assets/Browser/Browser.vue
index 49491984c9..775094b79c 100644
--- a/resources/js/components/assets/Browser/Browser.vue
+++ b/resources/js/components/assets/Browser/Browser.vue
@@ -1,10 +1,10 @@
 <template>
     <div ref="browser" class="h-full" @keydown.shift="shiftDown" @keyup="clearShift">
         <Uploader
-            ref="uploader"
+            ref="internalUploader"
             :container="container.id"
             :path="path"
-            :enabled="!preventDragging && canUpload"
+            :enabled="!uploader && !preventDragging && canUpload"
             @updated="uploadsUpdated"
             @upload-complete="uploadCompleted"
             @error="uploadError"
@@ -272,6 +272,10 @@ export default {
             type: Array,
             default: () => [],
         },
+        uploader: {
+            type: Object,
+            default: null,
+        },
     },
 
     setup() {
@@ -476,8 +480,9 @@ export default {
             this.loadAssets();
         },
 
-        path() {
+        path(path) {
             this.loadAssets();
+            this.$emit('path-changed', path);
         },
 
         searchQuery() {
@@ -676,7 +681,7 @@ export default {
         },
 
         openFileBrowser() {
-            this.$refs.uploader.browse();
+            (this.uploader || this.$refs.internalUploader).browse();
         },
 
         selectFolder(path) {
diff --git a/resources/js/components/assets/Selector.vue b/resources/js/components/assets/Selector.vue
index baef4d97f4..ef93aeb5b7 100644
--- a/resources/js/components/assets/Selector.vue
+++ b/resources/js/components/assets/Selector.vue
@@ -1,75 +1,96 @@
 <template>
-    <div class="h-full">
-        <div class="flex h-full min-h-0 flex-col">
-            <div class="flex flex-1 flex-col gap-4 overflow-auto p-4">
-                <AssetBrowser
-                    :container="container"
-                    :initial-per-page="$config.get('paginationSize')"
-                    :initial-columns="columns"
-                    :selected-path="folder"
-                    :selected-assets="browserSelections"
-                    :restrict-folder-navigation="restrictFolderNavigation"
-                    :max-files="maxFiles"
-                    :query-scopes="queryScopes"
-                    :autoselect-uploads="true"
-                    allow-selecting-existing-upload
-                    :allow-bulk-actions="false"
-                    @selections-updated="selectionsUpdated"
-                    @edit-asset="toggleAssetSelection"
-                    @initialized="focusSearchInput"
-                >
-                    <template #initializing>
-                        <div class="flex flex-1">
-                            <div class="absolute inset-0 z-200 flex items-center justify-center text-center">
-                                <Icon name="loading" />
-                            </div>
-                        </div>
-                    </template>
+    <Uploader
+        ref="uploader"
+        :container="container.id"
+        :path="currentPath"
+        :enabled="container.can_upload"
+        @updated="(uploads) => $refs.browser?.uploadsUpdated(uploads)"
+        @upload-complete="(asset) => $refs.browser?.uploadCompleted(asset)"
+        @error="(upload, uploads) => $refs.browser?.uploadError(upload, uploads)"
+        v-slot="{ dragging }"
+    >
+        <div class="relative h-full">
+            <div class="drag-notification" v-show="dragging">
+                <Icon name="upload-cloud-large" class="m-4 size-13" />
+                <span>{{ __('Drop File to Upload') }}</span>
+            </div>
 
-                    <template #header="{ canUpload, openFileBrowser, canCreateFolders, startCreatingFolder, mode, modeChanged }">
-                        <div class="flex items-center gap-2 sm:gap-3 mb-4">
-                            <div class="flex flex-1 items-center gap-2 sm:gap-3">
-                                <Search ref="search" />
+            <div class="flex h-full min-h-0 flex-col">
+                <div class="flex flex-1 flex-col gap-4 overflow-auto p-4">
+                    <AssetBrowser
+                        ref="browser"
+                        :container="container"
+                        :initial-per-page="$config.get('paginationSize')"
+                        :initial-columns="columns"
+                        :selected-path="folder"
+                        :selected-assets="browserSelections"
+                        :restrict-folder-navigation="restrictFolderNavigation"
+                        :max-files="maxFiles"
+                        :query-scopes="queryScopes"
+                        :autoselect-uploads="true"
+                        :uploader="uploaderInstance"
+                        allow-selecting-existing-upload
+                        :allow-bulk-actions="false"
+                        @selections-updated="selectionsUpdated"
+                        @edit-asset="toggleAssetSelection"
+                        @initialized="focusSearchInput"
+                        @path-changed="currentPath = $event"
+                    >
+                        <template #initializing>
+                            <div class="flex flex-1">
+                                <div class="absolute inset-0 z-200 flex items-center justify-center text-center">
+                                    <Icon name="loading" />
+                                </div>
                             </div>
+                        </template>
 
-                            <Button v-if="canUpload" :text="__('Upload')" icon="upload" @click="openFileBrowser" />
-                            <Button v-if="canCreateFolders" :text="__('Create Folder')" icon="folder-add" @click="startCreatingFolder" />
+                        <template #header="{ canUpload, openFileBrowser, canCreateFolders, startCreatingFolder, mode, modeChanged }">
+                            <div class="flex items-center gap-2 sm:gap-3 mb-4">
+                                <div class="flex flex-1 items-center gap-2 sm:gap-3">
+                                    <Search ref="search" />
+                                </div>
 
-                            <ToggleGroup :model-value="mode" @update:model-value="modeChanged">
-                                <ToggleItem icon="layout-grid" value="grid" />
-                                <ToggleItem icon="layout-list" value="table" />
-                            </ToggleGroup>
-                        </div>
-                    </template>
-                </AssetBrowser>
-            </div>
+                                <Button v-if="canUpload" :text="__('Upload')" icon="upload" @click="openFileBrowser" />
+                                <Button v-if="canCreateFolders" :text="__('Create Folder')" icon="folder-add" @click="startCreatingFolder" />
+
+                                <ToggleGroup :model-value="mode" @update:model-value="modeChanged">
+                                    <ToggleItem icon="layout-grid" value="grid" />
+                                    <ToggleItem icon="layout-list" value="table" />
+                                </ToggleGroup>
+                            </div>
+                        </template>
+                    </AssetBrowser>
+                </div>
 
-            <div class="flex items-center justify-between border-t bg-gray-100 dark:bg-gray-850 dark:border-gray-700 px-4 py-2 sm:p-4">
-                <div
-                    class="dark:text-gray-200 text-sm text-gray-700"
-                    v-text="
-                        hasMaxFiles
-                            ? __n(':count/:max selected', browserSelections, { max: maxFiles })
-                            : __n(':count asset selected|:count assets selected', browserSelections)
-                    "
-                />
-
-                <div class="flex items-center space-x-3">
-                    <Button variant="ghost" @click="close">
-                        {{ __('Cancel') }}
-                    </Button>
-
-                    <Button variant="primary" @click="select">
-                        {{ __('Select') }}
-                    </Button>
+                <div class="flex items-center justify-between border-t bg-gray-100 dark:bg-gray-850 dark:border-gray-700 px-4 py-2 sm:p-4">
+                    <div
+                        class="dark:text-gray-200 text-sm text-gray-700"
+                        v-text="
+                            hasMaxFiles
+                                ? __n(':count/:max selected', browserSelections, { max: maxFiles })
+                                : __n(':count asset selected|:count assets selected', browserSelections)
+                        "
+                    />
+
+                    <div class="flex items-center space-x-3">
+                        <Button variant="ghost" @click="close">
+                            {{ __('Cancel') }}
+                        </Button>
+
+                        <Button variant="primary" @click="select">
+                            {{ __('Select') }}
+                        </Button>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
+    </Uploader>
 </template>
 
 <script>
+import { markRaw } from 'vue';
 import AssetBrowser from './Browser/Browser.vue'
+import Uploader from './Uploader.vue'
 import {
     Button,
     ToggleGroup,
@@ -92,6 +113,7 @@ export default {
 
     components: {
         Uploads,
+        Uploader,
         PanelHeader, Grid,
         Slider,
         ListingPagination, Breadcrumbs,
@@ -128,9 +150,15 @@ export default {
             // We only want selection changes to be reflected in the fieldtype once the user is ready to commit
             // them. They should be able to cancel at any time and have their updated selections discarded.
             browserSelections: this.selected,
+            currentPath: this.folder,
+            uploaderInstance: null,
         };
     },
 
+    mounted() {
+        this.uploaderInstance = markRaw(this.$refs.uploader);
+    },
+
     computed: {
         hasMaxFiles() {
             return this.maxFiles === Infinity ? false : Boolean(this.maxFiles);
diff --git a/resources/js/components/assets/Uploader.vue b/resources/js/components/assets/Uploader.vue
index e67e8b2c00..5f40b70064 100644
--- a/resources/js/components/assets/Uploader.vue
+++ b/resources/js/components/assets/Uploader.vue
@@ -14,17 +14,23 @@ export default {
             ref: 'nativeFileField',
         });
 
+        const events = this.enabled
+            ? {
+                  onDragenter: this.dragenter,
+                  onDragover: this.dragover,
+                  onDragleave: this.dragleave,
+                  onDrop: this.drop,
+              }
+            : {};
+
         return h(
             'div',
             {
                 class: 'h-full',
-                onDragenter: this.dragenter,
-                onDragover: this.dragover,
-                onDragleave: this.dragleave,
-                onDrop: this.drop,
+                ...events,
             },
             [
-                h('div', { class: { 'pointer-events-none': this.dragging } }, [
+                h('div', { class: ['h-full', { 'pointer-events-none': this.dragging }] }, [
                     fileField,
                     ...this.$slots.default({ dragging: this.enabled ? this.dragging : false }),
                 ]),