Skip to content
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.

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

feat: allow external drop and add dropzone #40674

Merged
merged 1 commit into from
Oct 10, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
8 changes: 5 additions & 3 deletions apps/files/lib/Controller/ViewController.php
Original file line number Diff line number Diff line change
Expand Up @@ -237,9 +237,11 @@ public function index($dir = '', $view = '', $fileid = null, $fileNotFound = fal
if ($fileid && $dir !== '') {
$baseFolder = $this->rootFolder->getUserFolder($userId);
$nodes = $baseFolder->getById((int) $fileid);
$relativePath = dirname($baseFolder->getRelativePath($nodes[0]->getPath()));
// If the requested path is different from the file path
if (count($nodes) === 1 && $relativePath !== $dir) {
$nodePath = $baseFolder->getRelativePath($nodes[0]->getPath());
$relativePath = $nodePath ? dirname($nodePath) : '';
// If the requested path does not contain the file id
// or if the requested path is not the file id itself
if (count($nodes) === 1 && $relativePath !== $dir && $nodePath !== $dir) {
return $this->redirectToFile((int) $fileid);
}
}
Expand Down
155 changes: 155 additions & 0 deletions apps/files/src/components/DragAndDropNotice.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
<!--
- @copyright Copyright (c) 2023 John Molakvoæ <skjnldsv@protonmail.com>
-
- @author John Molakvoæ <skjnldsv@protonmail.com>
-
- @license GNU AGPL version 3 or any later version
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
-
-->
<template>
<div class="files-list__drag-drop-notice"
:class="{ 'files-list__drag-drop-notice--dragover': dragover }"
@drop="onDrop">
<div class="files-list__drag-drop-notice-wrapper">
<TrayArrowDownIcon :size="48" />
<h3 class="files-list-drag-drop-notice__title">
{{ t('files', 'Drag and drop files here to upload') }}
</h3>
</div>
</div>
</template>

<script lang="ts">
import type { Upload } from '@nextcloud/upload'
import { join } from 'path'
import { showSuccess } from '@nextcloud/dialogs'
import { translate as t } from '@nextcloud/l10n'
import { getUploader } from '@nextcloud/upload'
import Vue from 'vue'

import TrayArrowDownIcon from 'vue-material-design-icons/TrayArrowDown.vue'

import logger from '../logger.js'

export default Vue.extend({
name: 'DragAndDropNotice',

components: {
TrayArrowDownIcon,
},

props: {
currentFolder: {
type: Object,
required: true,
},
dragover: {
type: Boolean,
default: false,
},
},

methods: {
onDrop(event: DragEvent) {
this.$emit('update:dragover', false)

if (this.$el.querySelector('tbody')?.contains(event.target as Node)) {
return
}

event.preventDefault()
event.stopPropagation()

if (event.dataTransfer && event.dataTransfer.files?.length > 0) {
const uploader = getUploader()
uploader.destination = this.currentFolder

// Start upload
logger.debug(`Uploading files to ${this.currentFolder.path}`)
const promises = [...event.dataTransfer.files].map((file: File) => {
return uploader.upload(file.name, file) as Promise<Upload>
})

// Process finished uploads
Promise.all(promises).then((uploads) => {
logger.debug('Upload terminated', { uploads })
showSuccess(t('files', 'Upload successful'))

// Scroll to last upload if terminated
const lastUpload = uploads[uploads.length - 1]
if (lastUpload?.response?.headers?.['oc-fileid']) {
this.$router.push(Object.assign({}, this.$route, {
params: {
// Remove instanceid from header response
fileid: parseInt(lastUpload.response?.headers?.['oc-fileid']),
},
}))
}
})
}
},
t,
},
})
</script>

<style lang="scss" scoped>
.files-list__drag-drop-notice {
position: absolute;
z-index: 9999;
top: 0;
right: 0;
left: 0;
display: none;
align-items: center;
justify-content: center;
width: 100%;
// Breadcrumbs height + row thead height
min-height: calc(58px + 55px);
margin: 0;
user-select: none;
color: var(--color-text-maxcontrast);
background-color: var(--color-main-background);

&--dragover {
display: flex;
border-color: black;
}

h3 {
margin-left: 16px;
color: inherit;
}

&-wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 15vh;
max-height: 70%;
padding: 0 5vw;
border: 2px var(--color-border-dark) dashed;
border-radius: var(--border-radius-large);
}

&__close {
position: absolute !important;
top: 10px;
right: 10px;
}
}

</style>
Loading
Loading