remote upload popup frontend

This commit is contained in:
Čarodej
2022-04-14 15:16:43 +02:00
parent 50eb67ac79
commit 6c3e7801da
16 changed files with 223 additions and 23 deletions

View File

@@ -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...',
],
];

View File

@@ -1,7 +1,7 @@
{
"/js/main.js": "/js/main.js",
"/chunks/request.js": "/chunks/request.js?id=6770484e564115b3",
"/chunks/request-upload.js": "/chunks/request-upload.js?id=501663f9e43072f8",
"/chunks/request.js": "/chunks/request.js?id=0dad383d43899f08",
"/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/browser.js": "/chunks/shared/browser.js?id=b8c1f7904c027f05",
"/chunks/shared.js": "/chunks/shared.js?id=af0396de02d1e02f",
"/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/files.js": "/chunks/files.js?id=59bd6469922431e4",
"/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=f7f85cc9ce14c054",
"/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=5afd3b2bcc62f265",
"/chunks/trash.js": "/chunks/trash.js?id=4ad4825cf154937b",
"/chunks/team-folders.js": "/chunks/team-folders.js?id=8d851b9dce2f819d",
"/chunks/shared-with-me.js": "/chunks/shared-with-me.js?id=49838b3807bb7797",
"/chunks/platform.js": "/chunks/platform.js?id=1fb4ee8ee38bcaeb",
"/chunks/files.js": "/chunks/files.js?id=aaea9173f7697d6e",
"/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=4bab41df721a6fc6",
"/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=c62bc3eb07de20df",
"/chunks/trash.js": "/chunks/trash.js?id=31e826373e0d01f8",
"/chunks/team-folders.js": "/chunks/team-folders.js?id=4babe7db8a9a3a16",
"/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"

View File

@@ -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>

View File

@@ -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 }"

View File

@@ -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,

View File

@@ -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,

View File

@@ -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>

View File

@@ -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()

View File

@@ -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"

View File

@@ -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'})
}
},
}

View File

@@ -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')"

View File

@@ -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>

View File

@@ -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>

View File

@@ -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')"

View File

@@ -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,

View File

@@ -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,