Merge branch 'master' into api

# Conflicts:
#	.env.testing
#	public/mix-manifest.json
#	src/Domain/RemoteUpload/Controllers/UploadFilesRemotelyForUploadRequestController.php

resources/js/App.vue

@@ -131,6 +131,11 @@ export default {
                 this.isLoaded = true
             })
         }
+
+		// Go to sign in page if homepage is disabled
+		if (!this.$root.$data.config.allowHomepage && window.location.pathname === '/') {
+			this.$router.push({ name: 'SignIn' })
+		}
     },
     created() {
         if (this.$isWindows()) {

resources/js/components/EntriesView/FileBrowser.vue

@@ -6,7 +6,7 @@
             'grid-view-sidebar': itemViewType === 'grid' && isVisibleSidebar,
         }"
         class="px-4 lg:h-full lg:w-full lg:overflow-y-auto lg:px-0"
-        @drop.stop.prevent="uploadDroppedItems($event)"
+        @drop.prevent="dragStop($event)"
         @keydown.delete="deleteItems"
         @dragover="dragEnter"
         @dragleave="dragLeave"
@@ -62,9 +62,7 @@ export default {
                 this.$store.dispatch('deleteItem')
             }
         },
-        uploadDroppedItems(event) {
-            this.$uploadDraggedFiles(event, this.currentFolder.data.id)
-
+        dragStop() {
             this.isDragging = false
         },
         dragEnter() {

resources/js/components/Popups/ProcessingPopup.vue

@@ -1,13 +1,27 @@
 <template>
     <transition name="popup">
-        <div class="popup" v-if="processingPopup">
-            <div class="popup-wrapper">
-                <div class="popup-content">
-                    <div class="spinner-wrapper">
-                        <Spinner />
+        <div
+            v-if="processingPopup"
+            class="popup fixed top-0 left-0 right-0 bottom-0 z-50 grid h-full overflow-y-auto p-10 lg:absolute"
+        >
+            <div
+                class="fixed top-0 bottom-0 left-0 right-0 z-10 m-auto w-full bg-white shadow-xl dark:bg-dark-foreground md:relative md:w-[490px] md:rounded-xl"
+            >
+                <div
+                    class="flex h-full -translate-y-7 transform items-center justify-center px-8 text-center md:translate-y-0"
+                >
+                    <div>
+                        <div class="relative pb-16 pt-10">
+                            <Spinner />
+                        </div>
+
+                        <h1 v-if="processingPopup.title" class="mb-2 text-2xl font-bold">
+                            {{ processingPopup.title }}
+                        </h1>
+                        <p v-if="processingPopup.message" class="mb-4 text-sm">
+                            {{ processingPopup.message }}
+                        </p>
                     </div>
-                    <h1 class="title">{{ processingPopup.title }}</h1>
-                    <p class="message">{{ processingPopup.message }}</p>
                 </div>
             </div>
         </div>
@@ -17,10 +31,12 @@
 <script>
 import Spinner from '../UI/Others/Spinner'
 import { mapGetters } from 'vuex'
+import PopupWrapper from './Components/PopupWrapper'
 
 export default {
     name: 'ProcessingPopup',
     components: {
+        PopupWrapper,
         Spinner,
     },
     computed: {
@@ -28,107 +44,3 @@ export default {
     },
 }
 </script>
-
-<style scoped lang="scss">
-@import '../../../sass/vuefilemanager/variables';
-@import '../../../sass/vuefilemanager/mixins';
-
-.spinner-wrapper {
-    padding-bottom: 90px;
-    position: relative;
-}
-
-.popup {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 20;
-    overflow: auto;
-    height: 100%;
-}
-
-.popup-wrapper {
-    z-index: 12;
-    position: absolute;
-    left: 0;
-    right: 0;
-    max-width: 480px;
-    top: 50%;
-    transform: translateY(-50%) scale(1);
-    margin: 0 auto;
-    padding: 20px;
-    box-shadow: $light_mode_popup_shadow;
-    border-radius: 8px;
-    text-align: center;
-    background: white;
-}
-
-.popup-content {
-    .title {
-        @include font-size(22);
-        font-weight: 700;
-        color: $text;
-    }
-
-    .message {
-        @include font-size(16);
-        color: #333;
-        margin-top: 5px;
-    }
-}
-
-@media only screen and (max-width: 690px) {
-    .popup-wrapper {
-        padding: 20px;
-        left: 15px;
-        right: 15px;
-    }
-
-    .popup-content {
-        .title {
-            @include font-size(19);
-        }
-
-        .message {
-            @include font-size(15);
-        }
-    }
-}
-
-.dark {
-    .popup-wrapper {
-        background: $dark_mode_foreground;
-    }
-    .popup-content {
-        .title {
-            color: $dark_mode_text_primary;
-        }
-
-        .message {
-            color: $dark_mode_text_secondary;
-        }
-    }
-}
-
-// Animations
-.popup-enter-active {
-    animation: popup-in 0.35s 0.15s ease both;
-}
-
-.popup-leave-active {
-    animation: popup-in 0.15s ease reverse;
-}
-
-@keyframes popup-in {
-    0% {
-        opacity: 0;
-        transform: scale(0.7);
-    }
-    100% {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-</style>

resources/js/components/Subscription/UserFixedSubscriptionDetail.vue

@@ -63,7 +63,7 @@ export default {
 
                 limitations.push({
                     message: payload.message[key],
-					isVisibleBar: item.total !== -1,
+					isVisibleBar: item.total !== -1 && item.total !== 0,
 					distribution: [
                         {
                             progress: item.percentage,

resources/js/components/UI/Entries/ItemGrid.vue

@@ -4,7 +4,7 @@
             'bg-light-background dark:bg-dark-foreground': isClicked && canHover,
             'dark:hover:bg-dark-foreground lg:hover:bg-light-background': canHover,
         }"
-        class="relative z-0 flex h-48 select-none flex-wrap items-center justify-center rounded-lg border-2 border-dashed border-transparent px-1 pt-2 text-center sm:h-56 lg:h-60"
+        class="relative z-0 flex h-48 select-none flex-wrap items-center justify-center rounded-lg border-2 border-dashed border-transparent px-1 pt-2 text-center sm:h-56 lg:h-60 cursor-pointer"
         :draggable="canDrag"
         spellcheck="false"
     >
@@ -77,7 +77,7 @@
                 <!--Item Title-->
                 <span
                     class="inline-block w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold leading-3 tracking-tight md:px-6"
-                    :class="{ 'hover:underline': canEditName }"
+                    :class="{ 'hover:underline cursor-text': canEditName }"
                     ref="name"
                     @input="renameItem"
                     @keydown.delete.stop

resources/js/components/UI/Entries/ItemList.vue

@@ -4,7 +4,7 @@
             'bg-light-background dark:bg-dark-foreground': isClicked && highlight,
             'hover:bg-light-background dark:hover:bg-dark-foreground': highlight,
         }"
-        class="flex select-none items-center rounded-xl border-2 border-dashed border-transparent px-2.5 py-2"
+        class="flex select-none items-center rounded-xl border-2 border-dashed border-transparent px-2.5 py-2 cursor-pointer"
         :draggable="canDrag"
         spellcheck="false"
     >
@@ -55,7 +55,7 @@
             <!--Item Title-->
             <span
                 class="mb-0.5 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold"
-                :class="{ 'hover:underline': canEditName }"
+                :class="{ 'hover:underline cursor-text': canEditName }"
                 style="max-width: 240px"
                 ref="name"
                 @input="renameItem"

resources/js/components/UI/ProgressChart/ProgressLine.vue

@@ -9,8 +9,6 @@
                 }"
                 class="chart-wrapper"
             >
-                <!--<DotLabel class="label" :class="{'offset-top': chart.progress < 5}" :color="chart.color" :title="chart.value" />-->
-
                 <!--Only singe line-->
                 <span
                     v-if="data.length === 1"

resources/js/helpers/functionHelpers.js

@@ -169,7 +169,7 @@ const FunctionHelpers = {
             })
 
             // Start uploading if uploading process isn't running
-            if (store.getters.filesInQueueTotal == 0) this.$handleUploading(store.getters.fileQueue[0])
+            if (store.getters.filesInQueueTotal === 0) this.$handleUploading(store.getters.fileQueue[0])
 
             // Increase total files in upload bar
             store.commit('INCREASE_FILES_IN_QUEUES_TOTAL', files.length)
@@ -177,7 +177,7 @@ const FunctionHelpers = {
 
         Vue.prototype.$uploadDraggedFiles = async function (event, parent_id) {
             // Show alert message when upload is disabled
-            if (!store.getters.user.data.meta.restrictions.canUpload) {
+            if (store.getters.user && !store.getters.user.data.meta.restrictions.canUpload) {
                 Vue.prototype.$temporarilyDisabledUpload()
 
                 return
@@ -427,6 +427,12 @@ const FunctionHelpers = {
         }
 
         Vue.prototype.$goToFileView = function (id) {
+            // If user is located in trash, then automatically after click on the navigator go to the Files view
+            if (this.$router.currentRoute.name === 'Trash') {
+                this.$router.push({ name: 'Files', params: { id: id } })
+                return
+            }
+
             let locations = {
                 RequestUpload: {name: 'RequestUpload', params: { token: this.$route.params.token, id: id }},
                 Public: {name: 'Public', params: { token: this.$route.params.token, id: id }},

resources/js/routes/routesIndex.js

@@ -23,6 +23,14 @@ const routesIndex = [
             requiresAuth: false,
         },
     },
+    {
+        name: 'Demo',
+        path: '/demo',
+        component: () => import(/* webpackChunkName: "chunks/demo" */ '../views/Demo'),
+        meta: {
+            requiresAuth: false,
+        },
+    },
 ]
 
 export default routesIndex

resources/js/store/modules/fileFunctions.js

@@ -114,7 +114,7 @@ const actions = {
             })
             .catch((error) => {
                 events.$emit('alert:open', {
-                    title: error.response.data.message,
+                    title: error.response.data.message || i18n.t('popup_error.title'),
                     message: i18n.t('popup_error.message'),
                 })
             })
@@ -179,6 +179,8 @@ const actions = {
                     if (response.data.data.id) {
                         commit('PROCESSING_FILE', false)
 
+                        commit('INCREASE_FOLDER_ITEM', response.data.data.attributes.parent_id)
+
                         // Remove first file from file queue
                         commit('SHIFT_FROM_FILE_QUEUE')
 

resources/js/store/modules/userAuth.js

@@ -32,7 +32,7 @@ const actions = {
                 })
         })
     },
-    logOut: ({ commit }) => {
+    logOut: ({ commit, getters }) => {
 
         let popup = setTimeout(() => {
             commit('PROCESSING_POPUP', {
@@ -50,7 +50,11 @@ const actions = {
                 commit('DESTROY_DATA')
                 commit('SET_AUTHORIZED', false)
 
-                router.push({name: 'Homepage'})
+                // Get redirect location
+                let redirectLocation = getters.config.allowHomepage ? 'Homepage' : 'SignIn'
+
+                // Redirect user
+                router.push({name: redirectLocation})
             })
     },
     socialiteRedirect: ({ commit }, provider) => {

resources/js/views/Admin.vue

@@ -15,6 +15,7 @@
 
         <!--ConfirmPopup Popup-->
         <ConfirmPopup />
+		<ProcessingPopup />
 
         <!-- Create language popup -->
         <CreateLanguage />
@@ -88,6 +89,7 @@ import CreateUploadRequestPopup from "../components/UploadRequest/CreateUploadRe
 import CreateTeamFolderPopup from "../components/Teams/CreateTeamFolderPopup";
 import NotificationsPopup from "../components/Notifications/NotificationsPopup";
 import RemoteUploadPopup from "../components/RemoteUpload/RemoteUploadPopup";
+import ProcessingPopup from "../components/Popups/ProcessingPopup";
 
 export default {
     name: 'Admin',
@@ -192,6 +194,7 @@ export default {
         },
     },
     components: {
+		ProcessingPopup,
 		RemoteUploadPopup,
 		NotificationsPopup,
 		CreateTeamFolderPopup,

resources/js/views/Admin/PaymentSettings/PaymentSettingsTab/Payments.vue

@@ -12,7 +12,7 @@
                 :is-last="true"
             >
                 <SwitchInput
-                    @input="$updateText('/admin/settings', 'allowed_payments', allowedPayments)"
+                    @input="updateAllowedPayments"
                     v-model="allowedPayments"
                     :state="allowedPayments"
                 />
@@ -280,6 +280,17 @@
                     <FormLabel v-if="!paystack.isConfigured" icon="shield">
                         {{ $t('configure_your_credentials') }}
                     </FormLabel>
+                    <ValidationProvider tag="div" mode="passive" name="Secret Key" rules="required" v-slot="{ errors }">
+                        <AppInputText :title="$t('admin_settings.payments.stripe_sec_key')" :error="errors[0]">
+                            <input
+                                v-model="paystack.credentials.secret"
+                                :placeholder="$t('admin_settings.payments.stripe_sec_key_plac')"
+                                type="text"
+                                :class="{ '!border-rose-600': errors[0] }"
+                                class="focus-border-theme input-dark"
+                            />
+                        </AppInputText>
+                    </ValidationProvider>
                     <ValidationProvider
                         tag="div"
                         mode="passive"
@@ -297,17 +308,6 @@
                             />
                         </AppInputText>
                     </ValidationProvider>
-                    <ValidationProvider tag="div" mode="passive" name="Secret Key" rules="required" v-slot="{ errors }">
-                        <AppInputText :title="$t('admin_settings.payments.stripe_sec_key')" :error="errors[0]">
-                            <input
-                                v-model="paystack.credentials.secret"
-                                :placeholder="$t('admin_settings.payments.stripe_sec_key_plac')"
-                                type="text"
-                                :class="{ '!border-rose-600': errors[0] }"
-                                class="focus-border-theme input-dark"
-                            />
-                        </AppInputText>
-                    </ValidationProvider>
 
                     <ButtonBase
                         :disabled="isLoading"
@@ -623,16 +623,33 @@ export default {
                     })
                 })
                 .catch((error) => {
-                    if (error.response.status === 500) {
-                        this.isError = true
-                        this.errorMessage = error.response.data.message
-                    }
+					if ([401, 500].includes(error.response.status)) {
+						events.$emit('alert:open', {
+							title: error.response.data.title,
+							message: error.response.data.message,
+						})
+					} else {
+						events.$emit('toaster', {
+							type: 'danger',
+							message: this.$t('popup_error.title'),
+						})
+					}
                 })
                 .finally(() => (this.isLoading = false))
         },
         getWebhookEndpoint(service) {
             return `${this.config.host}/api/subscriptions/${service}/webhooks`
         },
+		updateAllowedPayments(val) {
+			// Update value
+			this.$updateText('/admin/settings', 'allowed_payments', val)
+
+			// Update config value
+			this.$store.commit('REPLACE_CONFIG_VALUE', {
+				key: 'allowed_payments',
+				value: val,
+			})
+		}
     },
     created() {
         // Set payment description

resources/js/views/Admin/Plans.vue

@@ -9,6 +9,9 @@
                         {{ $t('create_plan') }}
                     </MobileActionButton>
                 </router-link>
+				<MobileActionButton @click.native="synchronizePlans" icon="refresh">
+					{{ $t('synchronize_plans') }}
+				</MobileActionButton>
             </div>
 
             <!--Datatable-->
@@ -202,6 +205,7 @@ import ButtonBase from '../../components/UI/Buttons/ButtonBase'
 import ColorLabel from '../../components/UI/Labels/ColorLabel'
 import { Trash2Icon, Edit2Icon } from 'vue-feather-icons'
 import { mapGetters } from 'vuex'
+import {events} from "../../bus";
 
 export default {
     name: 'Plans',
@@ -296,5 +300,36 @@ export default {
             }[this.config.subscriptionType]
         },
     },
+	methods: {
+		synchronizePlans() {
+			let processingPopup = setTimeout(() => {
+				this.$store.commit('PROCESSING_POPUP', {
+					title: this.$t('synchronizing_plans'),
+					message: this.$t('plans_are_synchronizing'),
+				})
+			}, 300)
+
+			axios.get('/api/subscriptions/admin/plans/synchronize')
+				.then(() => {
+					events.$emit('toaster', {
+						type: 'success',
+						message: this.$t('plans_was_synchronized'),
+					})
+				})
+				.catch((error) => {
+					if (error.response.status === 500 && error.response.data.type) {
+						events.$emit('alert:open', {
+							title: error.response.data.title,
+							message: error.response.data.message,
+						})
+					}
+				})
+				.finally(() => {
+					clearTimeout(processingPopup)
+
+					this.$store.commit('PROCESSING_POPUP', undefined)
+				})
+		}
+	}
 }
 </script>

resources/js/views/Admin/Plans/Create/CreateFixedPlan.vue

@@ -134,7 +134,7 @@
                         v-model="plan.features.max_team_members"
                         :placeholder="$t('add_max_team_members')"
                         type="number"
-                        min="1"
+                        min="-1"
                         max="999999999"
                         :class="{ '!border-rose-600': errors[0] }"
                         class="focus-border-theme input-dark"

resources/js/views/Admin/Settings/AppSettingsTabs/SignInUp.vue

@@ -357,6 +357,10 @@ export default {
     },
     methods: {
         getCallbackEndpoint(service) {
+			if (service === 'facebook') {
+            	return `${this.config.host}/socialite/${service}/callback/`
+			}
+
             return `${this.config.host}/socialite/${service}/callback`
         },
         async storeCredentials(service) {

resources/js/views/Auth/SignIn.vue

@@ -1,5 +1,5 @@
 <template>
-    <AuthContentWrapper ref="auth" class="h-screen">
+    <AuthContentWrapper v-if="isVisible" ref="auth" class="h-screen">
         <!--Log In by Email-->
         <AuthContent name="log-in" :visible="true">
             <Headline :title="$t('welcome_back')" :description="$t('page_login.subtitle')" />
@@ -256,6 +256,7 @@ export default {
     },
     data() {
         return {
+			isVisible: false,
             isLoading: false,
             validSignIn: false,
             checkedAccount: undefined,
@@ -443,14 +444,20 @@ export default {
             }
         },
     },
-    created() {
-        this.$scrollTop()
-        this.$store.commit('PROCESSING_POPUP', undefined)
-
+	mounted() {
 		// Redirect if user is authenticated
 		if (this.$root.$data.config.isAuthenticated) {
 			this.$router.push({name: 'Files'})
 		}
+	},
+	created() {
+		// Show the page when user is not authenticated
+		if (! this.$root.$data.config.isAuthenticated) {
+			this.isVisible = true
+		}
+
+        this.$scrollTop()
+        this.$store.commit('PROCESSING_POPUP', undefined)
 
         if (this.config.isDemo || this.config.isDev) {
             this.loginEmail = 'howdy@hi5ve.digital'

resources/js/views/Auth/SignUp.vue

@@ -256,6 +256,12 @@ export default {
                                 'Your New Password': error.response.data.errors['password'],
                             })
                         }
+
+                        if (error.response.data.errors['reCaptcha']) {
+							events.$emit('alert:open', {
+								title: error.response.data.message,
+							})
+                        }
                     }
                 })
 				.finally(() => {

resources/js/views/Demo.vue

@@ -0,0 +1,34 @@
+<template>
+    <AuthContentWrapper ref="auth" class="h-screen">
+        <AuthContent :visible="true">
+            <Headline
+				title="You Are Nearly Here!"
+				description="Just click on the button below."
+			/>
+
+			<a :href="`${$store.getters.config.host}/sign-in`" target="_blank">
+				<AuthButton
+					class="mb-12 w-full justify-center md:w-min"
+					icon="chevron-right"
+					text="Visit Demo"
+				/>
+			</a>
+        </AuthContent>
+    </AuthContentWrapper>
+</template>
+<script>
+import AuthContentWrapper from '../components/Layout/AuthPages/AuthContentWrapper'
+import AuthContent from '../components/Layout/AuthPages/AuthContent'
+import AuthButton from '../components/UI/Buttons/AuthButton'
+import Headline from '../components/UI/Labels/LogoHeadline'
+
+export default {
+    name: 'Demo',
+    components: {
+        AuthContentWrapper,
+        AuthContent,
+        AuthButton,
+        Headline,
+    },
+}
+</script>

resources/js/views/Frontpage/Homepage.vue

@@ -64,8 +64,6 @@ export default {
         }
     },
     mounted() {
-        if (!this.config.allowHomepage) this.$router.push({ name: 'SignIn' })
-
         // Get page content
         axios
             .get('/api/settings', {

resources/js/views/Platform.vue

@@ -46,7 +46,7 @@
             <div v-if="config.allowedAdsense && config.adsenseBanner01" v-html="config.adsenseBanner01" class="mb-5 min-h-[120px]"></div>
 
             <!--File list & info sidebar-->
-            <div class="flex space-x-3 lg:overflow-hidden grow">
+            <div class="flex space-x-3 lg:overflow-hidden grow" @drop.stop.prevent="uploadDroppedItems($event)" @dragenter.prevent @dragover.prevent>
                 <router-view id="file-view" class="relative w-full" :key="$route.fullPath" />
 
                 <InfoSidebar v-if="isVisibleSidebar" />
@@ -110,7 +110,7 @@ export default {
         DragUI,
     },
     computed: {
-        ...mapGetters(['isVisibleSidebar', 'isLimitedUser', 'config']),
+        ...mapGetters(['isVisibleSidebar', 'isLimitedUser', 'config', 'currentFolder']),
     },
     data() {
         return {
@@ -118,6 +118,9 @@ export default {
         }
     },
     methods: {
+		uploadDroppedItems(event) {
+			this.$uploadDraggedFiles(event, this.currentFolder?.data.id)
+		},
         contextMenu(event, item) {
             events.$emit('context-menu:show', event, item)
         },

resources/js/views/SetupWizard/Database.vue

@@ -82,7 +82,7 @@
                         <input
                             v-model="databaseCredentials.name"
                             class="focus-border-theme input-dark"
-                            placeholder="Select your database name"
+                            placeholder="Type your database name"
                             type="text"
                             :class="{ '!border-rose-600': errors[0] }"
                         />
@@ -100,7 +100,7 @@
                         <input
                             v-model="databaseCredentials.username"
                             class="focus-border-theme input-dark"
-                            placeholder="Select your database name"
+                            placeholder="Type your database name"
                             type="text"
                             :class="{ '!border-rose-600': errors[0] }"
                         />
@@ -111,14 +111,13 @@
                     tag="div"
                     mode="passive"
                     name="Database Password"
-                    rules="required"
                     v-slot="{ errors }"
                 >
-                    <AppInputText title="Database Password" :error="errors[0]" :is-last="true">
+                    <AppInputText title="Database Password (optional)" :error="errors[0]" :is-last="true">
                         <input
                             v-model="databaseCredentials.password"
                             class="focus-border-theme input-dark"
-                            placeholder="Select your database password"
+                            placeholder="Type your database password"
                             type="text"
                             :class="{ '!border-rose-600': errors[0] }"
                         />

resources/js/views/SetupWizard/StatusCheck.vue

@@ -15,7 +15,7 @@
 
 			<a href="https://codecanyon.net/item/vue-file-manager-with-laravel-backend/25815986">
 				<AlertBox color="rose" class="text-left">
-					<p class="text-rose-500">Please make sure you have only legal copy of VueFileManager <b class="text-rose-500 underline">purchased from CodeCanyon</b>. Any illegal copy can contain malicious software, bugs and others security issues which exposes your files to abuse.</p>
+					<p class="text-rose-500">Please make sure you have only legal copy of VueFileManager <b class="text-rose-500 underline">purchased from CodeCanyon</b>. Any illegal copy can contain malicious software, bugs and others security issues which exposes your files to data breach.</p>
 				</AlertBox>
 			</a>
 

resources/js/views/Shared.vue

@@ -35,7 +35,7 @@
             <div v-if="config.allowedAdsense && config.adsenseBanner01" v-html="config.adsenseBanner01" class="mb-5 min-h-[120px]"></div>
 
             <!--File list & info sidebar-->
-            <div class="flex space-x-3 lg:overflow-hidden grow">
+            <div class="flex space-x-3 lg:overflow-hidden grow" @drop.stop.prevent="uploadDroppedItems($event)" @dragenter.prevent @dragover.prevent>
                 <router-view id="file-view" class="relative w-full" :key="$route.fullPath" />
 
                 <InfoSidebar v-if="isVisibleSidebar" />
@@ -87,7 +87,7 @@ export default {
         Alert,
     },
     computed: {
-        ...mapGetters(['isVisibleSidebar', 'sharedDetail', 'config']),
+        ...mapGetters(['isVisibleSidebar', 'sharedDetail', 'config', 'currentFolder']),
     },
     data() {
         return {
@@ -95,6 +95,9 @@ export default {
         }
     },
     methods: {
+		uploadDroppedItems(event) {
+			this.$uploadDraggedFiles(event, this.currentFolder?.data.id)
+		},
         contextMenu(event, item) {
             events.$emit('context-menu:show', event, item)
         },

resources/js/views/UploadRequest.vue

@@ -30,7 +30,7 @@
             <div v-if="config.allowedAdsense && config.adsenseBanner01" v-html="config.adsenseBanner01" class="mb-5 min-h-[120px]"></div>
 
             <!--File list & info sidebar-->
-            <div class="flex space-x-3 lg:overflow-hidden grow">
+            <div class="flex space-x-3 lg:overflow-hidden grow" @drop.stop.prevent="uploadDroppedItems($event)" @dragenter.prevent @dragover.prevent>
                 <router-view id="file-view" class="relative w-full" :key="$route.fullPath" />
 
                 <InfoSidebarUploadRequest v-if="canShowUI && isVisibleSidebar" />
@@ -76,7 +76,7 @@ export default {
         DragUI,
     },
     computed: {
-        ...mapGetters(['isVisibleSidebar', 'config', 'uploadRequest', 'fileQueue']),
+        ...mapGetters(['isVisibleSidebar', 'config', 'uploadRequest', 'fileQueue', 'currentFolder']),
 		canShowUI() {
 			return (this.uploadRequest && this.uploadRequest.data.attributes.status === 'filling') || this.fileQueue.length > 0
 		}
@@ -87,6 +87,9 @@ export default {
         }
     },
     methods: {
+		uploadDroppedItems(event) {
+			this.$uploadDraggedFiles(event, this.currentFolder?.data.id)
+		},
         contextMenu(event, item) {
             events.$emit('context-menu:show', event, item)
         },

resources/views/index.blade.php

@@ -1,8 +1,34 @@
 @php
+    use Monolog\Handler\MissingExtensionException;
     use VueFileManager\Subscription\Domain\Plans\Models\Plan;
     use VueFileManager\Subscription\Domain\Transactions\Models\Transaction;
     use VueFileManager\Subscription\Domain\Subscriptions\Models\Subscription;
 
+    try {
+        // Bcmath Extension
+        $storageDefaultSpaceFormatted = isset($settings->default_max_storage_amount)
+            ? format_gigabytes($settings->default_max_storage_amount)
+            : format_gigabytes(5);
+
+        $uploadLimit = isset($settings->upload_limit)
+            ? format_bytes($settings->upload_limit)
+            : 'undefined';
+
+        $chunkSize = isset($settings->chunk_size)
+            ? format_bytes($settings->chunk_size)
+            : format_bytes(64);
+
+        $uploadLimitFormatted = isset($settings->upload_limit)
+            ? format_megabytes($settings->upload_limit)
+            : null;
+
+    } catch (MissingExtensionException $exception) {
+        $storageDefaultSpaceFormatted = '5GB';
+        $uploadLimit = 'undefined';
+        $uploadLimitFormatted = 5;
+        $chunkSize = 64000000;
+    }
+
     try {
         // Subscription
         $isEmptySubscriptions = Subscription::count() === 0;
@@ -98,11 +124,11 @@
 			storageLimit: {{ $settings->storage_limitation ?? 1 }},
 			teamsDefaultMembers: {{ $settings->default_max_team_member ?? 10 }},
 			storageDefaultSpace: {{ $settings->default_max_storage_amount ?? 5 }},
-			storageDefaultSpaceFormatted: '{{ isset($settings->default_max_storage_amount) ? format_gigabytes($settings->default_max_storage_amount) : format_gigabytes(5) }}',
+			storageDefaultSpaceFormatted: '{{ $storageDefaultSpaceFormatted }}',
 			mimetypesBlacklist: '{{ isset($settings->mimetypes_blacklist) ? $settings->mimetypes_blacklist: null}}',
-			uploadLimit: {{ isset($settings->upload_limit) ? format_bytes($settings->upload_limit) : 'undefined' }},
-			uploadLimitFormatted: '{{ isset($settings->upload_limit) ? format_megabytes($settings->upload_limit) : null }}',
-			chunkSize: {{ isset($settings->chunk_size) ? format_bytes($settings->chunk_size) : format_bytes(64) }},
+			uploadLimit: {{ $uploadLimit }},
+			uploadLimitFormatted: '{{ $uploadLimitFormatted }}',
+			chunkSize: {{ $chunkSize }},
 
 			isAuthenticated: {{ $isUser ? 1 : 0 }},
 			isSaaS: {{ $settings && optional($settings)->license === 'extended' ? 1 : 0 }},