remote upload popup frontend

config/language-translations.php

@@ -942,5 +942,10 @@ return [
         'paste_code_from_2fa_app'                        => 'Paste the latest code from 2fa app...',
         'zero_for_unlimited_members'                     => 'Type -1 to set unlimited team members.',
         'max_team_members'                               => 'Max Team Members',
+        'remote_upload'                                  => 'Remote Upload',
+        'upload_files_remotely'                          => 'Upload Files Remotely',
+        'remote_links'                                   => 'Remote Links',
+        'remote_links_help'                              => 'For every line paste one link',
+        'paste_remote_links_here'                        => 'Paste your remote links here...',
     ],
 ];

public/mix-manifest.json

@@ -1,7 +1,7 @@
 {
     "/js/main.js": "/js/main.js",
-    "/chunks/request.js": "/chunks/request.js?id=6770484e564115b3",
+    "/chunks/request.js": "/chunks/request.js?id=0dad383d43899f08",
-    "/chunks/request-upload.js": "/chunks/request-upload.js?id=501663f9e43072f8",
+    "/chunks/request-upload.js": "/chunks/request-upload.js?id=c456f33bfbfd4038",
     "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=19a0784e59d768ec",
     "/chunks/status-check.js": "/chunks/status-check.js?id=f40938d1fb43820f",
     "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=ba76b9a8adbfdc0b",
@@ -9,13 +9,13 @@
     "/chunks/environment.js": "/chunks/environment.js?id=784c2442268b36dc",
     "/chunks/app-setup.js": "/chunks/app-setup.js?id=cbe7bfed06400736",
     "/chunks/admin-account.js": "/chunks/admin-account.js?id=78d257775f5fc485",
-    "/chunks/shared.js": "/chunks/shared.js?id=c0fa346721760ad2",
+    "/chunks/shared.js": "/chunks/shared.js?id=af0396de02d1e02f",
-    "/chunks/shared/browser.js": "/chunks/shared/browser.js?id=b8c1f7904c027f05",
+    "/chunks/shared/browser.js": "/chunks/shared/browser.js?id=d2fff07a2bc7af3f",
     "/chunks/shared/single-file.js": "/chunks/shared/single-file.js?id=a6063bed9be75a09",
     "/chunks/shared/authenticate.js": "/chunks/shared/authenticate.js?id=b5519d193bce2339",
     "/chunks/not-found.js": "/chunks/not-found.js?id=d31bd699138cf828",
     "/chunks/temporary-unavailable.js": "/chunks/temporary-unavailable.js?id=26798085f527d955",
-    "/chunks/admin.js": "/chunks/admin.js?id=ddcee582d6b9b738",
+    "/chunks/admin.js": "/chunks/admin.js?id=5710bcabdcf37f2c",
     "/chunks/dashboard.js": "/chunks/dashboard.js?id=5ab55a12214433c8",
     "/chunks/invoices.js": "/chunks/invoices.js?id=799928609f57ca10",
     "/chunks/subscriptions.js": "/chunks/subscriptions.js?id=a0c4f59d0ec4aee0",
@@ -57,18 +57,18 @@
     "/chunks/sign-up.js": "/chunks/sign-up.js?id=80da89f329c514fc",
     "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=27cda9364b6593d8",
     "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=2f0401ee2fc148c4",
-    "/chunks/settings.js": "/chunks/settings.js?id=13f38ad770e862c6",
+    "/chunks/settings.js": "/chunks/settings.js?id=25d4749b73a5077f",
     "/chunks/profile.js": "/chunks/profile.js?id=3e24bb5e1f52d4bb",
     "/chunks/settings-password.js": "/chunks/settings-password.js?id=d00bf503d8126dc4",
     "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=092e324aad54656b",
     "/chunks/billing.js": "/chunks/billing.js?id=115c25478cee576d",
-    "/chunks/platform.js": "/chunks/platform.js?id=622fe102512635e6",
+    "/chunks/platform.js": "/chunks/platform.js?id=1fb4ee8ee38bcaeb",
-    "/chunks/files.js": "/chunks/files.js?id=59bd6469922431e4",
+    "/chunks/files.js": "/chunks/files.js?id=aaea9173f7697d6e",
-    "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=f7f85cc9ce14c054",
+    "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=4bab41df721a6fc6",
-    "/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=5afd3b2bcc62f265",
+    "/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=c62bc3eb07de20df",
-    "/chunks/trash.js": "/chunks/trash.js?id=4ad4825cf154937b",
+    "/chunks/trash.js": "/chunks/trash.js?id=31e826373e0d01f8",
-    "/chunks/team-folders.js": "/chunks/team-folders.js?id=8d851b9dce2f819d",
+    "/chunks/team-folders.js": "/chunks/team-folders.js?id=4babe7db8a9a3a16",
-    "/chunks/shared-with-me.js": "/chunks/shared-with-me.js?id=49838b3807bb7797",
+    "/chunks/shared-with-me.js": "/chunks/shared-with-me.js?id=cfb073052d66d07c",
     "/chunks/invitation.js": "/chunks/invitation.js?id=424b2783d9785a09",
     "/css/tailwind.css": "/css/tailwind.css",
     "/css/app.css": "/css/app.css"

resources/js/components/Layout/Toolbars/DesktopSharepageToolbar.vue

@@ -12,17 +12,22 @@
                         :action="$t('create_something')"
                     />
                     <PopoverItem name="desktop-create" side="left">
-                        <OptionGroup :title="$t('upload')">
+                        <OptionGroup :title="$t('frequently_used')">
                             <OptionUpload :title="$t('upload_files')" type="file" />
-                            <OptionUpload :title="$t('upload_folder')" type="folder" />
-                        </OptionGroup>
-                        <OptionGroup :title="$t('create')">
                             <Option
                                 @click.native="$createFolder"
                                 :title="$t('create_folder')"
                                 icon="folder-plus"
                             />
                         </OptionGroup>
+                        <OptionGroup :title="$t('others')">
+                            <OptionUpload :title="$t('upload_folder')" type="folder" />
+							<Option
+								@click.stop.native="$openRemoteUploadPopup"
+								:title="$t('remote_upload')"
+								icon="remote-upload"
+							/>
+                        </OptionGroup>
                     </PopoverItem>
                 </PopoverWrapper>
 

resources/js/components/Layout/Toolbars/DesktopToolbar.vue

@@ -39,6 +39,11 @@
 								:title="$t('upload_folder')"
 								type="folder"
 							/>
+							<Option
+								@click.stop.native="$openRemoteUploadPopup"
+								:title="$t('remote_upload')"
+								icon="remote-upload"
+							/>
                             <Option
                                 @click.stop.native="$createTeamFolder"
                                 :class="{ 'is-inactive': canCreateTeamFolder }"

resources/js/components/Menus/Components/Option.vue

@@ -119,6 +119,12 @@
                     class="vue-feather group-hover-text-theme"
                     :class="{ 'text-theme': isActive }"
                 />
+                <link2-icon
+                    v-if="icon === 'remote-upload'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
                 <users-icon
                     v-if="icon === 'users'"
                     size="17"
@@ -246,6 +252,7 @@
 <script>
 import AlphabetIcon from '../../Icons/AlphabetIcon'
 import {
+	Link2Icon,
     UserMinusIcon,
     UserCheckIcon,
     UserPlusIcon,
@@ -287,6 +294,7 @@ export default {
     name: 'Option',
     props: ['isHoverDisabled', 'isActive', 'title', 'arrow', 'icon'],
     components: {
+		Link2Icon,
         UserMinusIcon,
         UserCheckIcon,
         UserPlusIcon,

resources/js/components/Popups/Components/PopupHeader.vue

@@ -2,6 +2,7 @@
     <div class="flex items-center justify-between px-6 pt-6 pb-6">
         <div class="flex items-center">
             <div class="mr-3">
+                <link2-icon v-if="icon === 'remote-upload'" size="18" class="vue-feather text-theme" />
                 <upload-cloud-icon v-if="icon === 'upload'" size="18" class="vue-feather text-theme" />
                 <corner-down-right-icon v-if="icon === 'move'" size="18" class="vue-feather text-theme" />
                 <share-icon v-if="icon === 'share'" size="18" class="vue-feather text-theme" />
@@ -25,6 +26,7 @@
 
 <script>
 import {
+	Link2Icon,
 	BellIcon,
 	UploadCloudIcon,
     CreditCardIcon,
@@ -43,6 +45,7 @@ export default {
     name: 'PopupHeader',
     props: ['title', 'icon'],
     components: {
+		Link2Icon,
 		BellIcon,
 		UploadCloudIcon,
         CornerDownRightIcon,

resources/js/components/RemoteUpload/RemoteUploadPopup.vue

@@ -0,0 +1,122 @@
+<template>
+    <PopupWrapper name="remote-upload">
+        <PopupHeader :title="$t('upload_files_remotely')" icon="remote-upload" />
+
+        <PopupContent>
+			<ValidationObserver @submit.prevent ref="createForm" v-slot="{ invalid }" tag="form">
+                <ValidationProvider tag="div" mode="passive" name="Remote Links" rules="required" v-slot="{ errors }">
+					<AppInputText
+						:title="$t('remote_links')"
+						:description="$t('remote_links_help')"
+						:error="errors[0]"
+						:is-last="true"
+					>
+						<textarea
+							v-model="links"
+							class="focus-border-theme input-dark whitespace-nowrap"
+							rows="6"
+							:placeholder="$t('paste_remote_links_here')"
+							:class="{ '!border-rose-600': errors[0] }"
+							ref="textarea"
+						>
+						</textarea>
+					</AppInputText>
+                </ValidationProvider>
+            </ValidationObserver>
+        </PopupContent>
+
+        <PopupActions>
+            <ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary">
+                {{ $t('cancel') }}
+            </ButtonBase>
+            <ButtonBase class="w-full" @click.native="upload" button-style="theme" :loading="loading">
+                {{ $t('upload') }}
+            </ButtonBase>
+        </PopupActions>
+    </PopupWrapper>
+</template>
+
+<script>
+import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
+import PopupWrapper from '../Popups/Components/PopupWrapper'
+import PopupContent from '../Popups/Components/PopupContent'
+import PopupActions from '../Popups/Components/PopupActions'
+import PopupHeader from '../Popups/Components/PopupHeader'
+import AppInputText from '../Forms/Layouts/AppInputText'
+import { required } from 'vee-validate/dist/rules'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import { events } from '../../bus'
+
+export default {
+    name: 'RemoteUploadPopup',
+    components: {
+		ValidationProvider,
+		ValidationObserver,
+		required,
+        PopupWrapper,
+        PopupContent,
+        PopupHeader,
+        PopupActions,
+        AppInputText,
+        ButtonBase,
+    },
+    data() {
+        return {
+            links: undefined,
+            loading: false,
+        }
+    },
+    methods: {
+        async upload() {
+			// Validate fields
+			const isValid = await this.$refs.createForm.validate()
+
+			if (!isValid) return
+
+            this.loading = true
+
+			let route = this.$store.getters.sharedDetail
+				? `/api/editor/remote-upload/${this.$router.currentRoute.params.token}`
+				: '/api/remote-upload'
+
+			let parentId = this.$store.getters.currentFolder
+				? this.$store.getters.currentFolder.data.id
+				: undefined
+
+			axios
+				.post(route, {
+					url: this.links.split(/\r?\n/),
+					parent_id: parentId,
+				})
+				.then(() => {
+					events.$emit('toaster', {
+						type: 'success',
+						message: this.$t('remote_download_submitted'),
+					})
+
+					events.$emit('popup:close')
+				})
+				.catch(() => {
+					events.$emit('toaster', {
+						type: 'danger',
+						message: this.$t('popup_error.title'),
+					})
+				})
+				.finally(() => {
+					this.loading = false
+				})
+        },
+    },
+    mounted() {
+        events.$on('popup:open', (args) => {
+            if (args.name !== 'remote-upload') return
+
+            this.links = undefined
+
+            this.$nextTick(() => {
+				setTimeout(() => this.$refs.textarea.focus(), 100)
+            })
+        })
+    },
+}
+</script>

resources/js/components/Spotlight/Spotlight.vue

@@ -139,6 +139,11 @@
                                 size="18"
                                 class="vue-feather text-theme"
                             />
+                            <link2-icon
+                                v-if="result.action.value === 'remote-upload'"
+                                size="18"
+                                class="vue-feather text-theme"
+                            />
                             <upload-cloud-icon
                                 v-if="result.action.value === 'RecentUploads'"
                                 size="18"
@@ -309,6 +314,7 @@ import KeyboardHints from './Components/KeyboardHints'
 import axios from 'axios'
 import { debounce } from 'lodash'
 import {
+	Link2Icon,
     FolderPlusIcon,
     SmileIcon,
     BoxIcon,
@@ -340,6 +346,7 @@ import { mapGetters } from 'vuex'
 export default {
     name: 'Spotlight',
     components: {
+		Link2Icon,
         FolderPlusIcon,
         SmileIcon,
         KeyboardHints,
@@ -598,6 +605,13 @@ export default {
                         value: 'create-file-request',
                     },
                 },
+                {
+                    title: this.$t('remote_upload'),
+                    action: {
+                        type: 'function',
+                        value: 'remote-upload',
+                    },
+                },
             ]
 
             let functionList = [
@@ -813,6 +827,10 @@ export default {
                 if (arg.action.value === 'create-file-request') {
                     this.$createFileRequest()
                 }
+
+                if (arg.action.value === 'remote-upload') {
+                    this.$openRemoteUploadPopup()
+                }
             }
 
             this.exitSpotlight()

resources/js/components/Toaster/ToasterNotifications.vue

@@ -1,7 +1,7 @@
 <template>
     <div
 		v-if="toasters.length || notifications.length"
-		class="fixed bottom-4 right-4 left-4 z-50 sm:w-[360px] sm:left-auto lg:bottom-8 lg:right-8"
+		class="fixed bottom-4 right-4 left-4 z-[55] sm:w-[360px] sm:left-auto lg:bottom-8 lg:right-8"
 	>
         <ToasterWrapper
 			v-for="notification in notifications"

resources/js/helpers/functionHelpers.js

@@ -569,6 +569,10 @@ const FunctionHelpers = {
         Vue.prototype.$changeSubscriptionOptions = function () {
             events.$emit('popup:open', { name: 'change-plan-subscription' })
         }
+
+        Vue.prototype.$openRemoteUploadPopup = function () {
+            events.$emit('popup:open', {name: 'remote-upload'})
+        }
     },
 }
 

resources/js/views/FileView/Files.vue

@@ -46,6 +46,11 @@
                 />
             </OptionGroup>
             <OptionGroup :title="$t('others')">
+				<Option
+					@click.stop.native="$openRemoteUploadPopup"
+					:title="$t('remote_upload')"
+					icon="remote-upload"
+				/>
                 <Option
                     @click.stop.native="$createTeamFolder"
                     :title="$t('create_team_folder')"

resources/js/views/FileView/Public.vue

@@ -37,11 +37,8 @@
         </MobileContextMenu>
 
         <MobileCreateMenu>
-            <OptionGroup :title="$t('upload')">
+            <OptionGroup :title="$t('frequently_used')">
                 <OptionUpload :title="$t('upload_files')" type="file" :is-hover-disabled="true" />
-                <OptionUpload :title="$t('upload_folder')" type="folder" :is-hover-disabled="true" />
-            </OptionGroup>
-            <OptionGroup :title="$t('create')">
                 <Option
                     @click.stop.native="createFolder"
                     :title="$t('create_folder')"
@@ -49,6 +46,15 @@
                     :is-hover-disabled="true"
                 />
             </OptionGroup>
+            <OptionGroup :title="$t('others')">
+                <OptionUpload :title="$t('upload_folder')" type="folder" :is-hover-disabled="true" />
+				<Option
+					@click.stop.native="$openRemoteUploadPopup"
+					:title="$t('remote_upload')"
+					icon="remote-upload"
+					:is-hover-disabled="true"
+				/>
+            </OptionGroup>
         </MobileCreateMenu>
 
         <MobileMultiSelectToolbar>

resources/js/views/FileView/SharedWithMe.vue

@@ -21,6 +21,14 @@
                     :is-hover-disabled="true"
                 />
             </OptionGroup>
+            <OptionGroup :title="$t('others')">
+                <Option
+					@click.stop.native="$openRemoteUploadPopup"
+					:title="$t('remote_upload')"
+					icon="remote-upload"
+					:class="{'is-inactive': isTeamFolderHomepage}"
+				/>
+            </OptionGroup>
         </MobileCreateMenu>
 
         <MobileTeamContextMenu>

resources/js/views/FileView/TeamFolders.vue

@@ -43,6 +43,12 @@
                 />
             </OptionGroup>
             <OptionGroup :title="$t('others')">
+				<Option
+					@click.stop.native="$openRemoteUploadPopup"
+					:title="$t('remote_upload')"
+					icon="remote-upload"
+					:class="{'is-inactive': isTeamFolderHomepage}"
+				/>
                 <Option
                     @click.stop.native="$createTeamFolder"
                     :title="$t('create_team_folder')"

resources/js/views/Platform.vue

@@ -16,6 +16,7 @@
 
         <CreateUploadRequestPopup />
 		<NotificationsPopup />
+		<RemoteUploadPopup />
         <CreateFolderPopup />
         <RenameItemPopup />
         <MoveItemPopup />
@@ -79,10 +80,12 @@ import { events } from '../bus'
 import { mapGetters } from 'vuex'
 import CreateUploadRequestPopup from "../components/UploadRequest/CreateUploadRequestPopup";
 import NotificationsPopup from "../components/Notifications/NotificationsPopup";
+import RemoteUploadPopup from "../components/RemoteUpload/RemoteUploadPopup";
 
 export default {
     name: 'Platform',
     components: {
+		RemoteUploadPopup,
 		NotificationsPopup,
 		CreateUploadRequestPopup,
         CreateTeamFolderPopup,

resources/js/views/Shared.vue

@@ -7,6 +7,7 @@
         <!--Popups-->
         <ProcessingPopup />
 
+		<RemoteUploadPopup />
         <CreateFolderPopup />
         <RenameItemPopup />
         <MoveItemPopup />
@@ -61,12 +62,13 @@ import DragUI from '../components/UI/Others/DragUI'
 import Alert from '../components/Popups/Alert'
 import { mapGetters } from 'vuex'
 import { events } from '../bus'
-import router from '../router'
 import DesktopSharepageToolbar from '../components/Layout/Toolbars/DesktopSharepageToolbar'
+import RemoteUploadPopup from "../components/RemoteUpload/RemoteUploadPopup";
 
 export default {
     name: 'Shared',
     components: {
+		RemoteUploadPopup,
         DesktopSharepageToolbar,
         MobileToolbar,
         InfoSidebar,