nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 08:12:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/bulk-operations'

Browse Source 
# Conflicts:
#	app/Http/Helpers/helpers.php
#	public/chunks/app-others.js
#	public/js/main.js
#	public/mix-manifest.json
#	resources/js/components/FilesView/FileItemList.vue
#	resources/js/components/FilesView/FilePreview.vue
#	resources/js/helpers.js
#	resources/js/store/modules/fileFunctions.js
This commit is contained in:
Peter Papp
2020-12-21 17:17:10 +01:00
parent 6a9edc49c0 2c0cf43802
commit 4b3ca7e34b
9 changed files with 905 additions and 1140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/Http/Helpers/helpers.php
View File

@@ -355,6 +355,25 @@ function format_gigabytes($gigabytes)
} }
} }
/**
* Format string to formated megabytes string
*
* @param $megabytes
* @return string
*/
function format_megabytes($megabytes)
{
if ($megabytes >= 1000) {
return $megabytes / 1000 . 'GB';
}
if ($megabytes >= 1000000) {
return $megabytes / 1000000 . 'TB';
}
return $megabytes . 'MB';
}
/** /**
* Convert megabytes to bytes * Convert megabytes to bytes
* *
@@ -530,7 +549,11 @@ function get_pretty_name($basename, $name, $mimetype)
} }
/** /**
<<<<<<<<< Temporary merge branch 1
* Read exif data from jpeg image file
=========
* Get exif data from jpeg image * Get exif data from jpeg image
>>>>>>>>> Temporary merge branch 2
* *
* @param $file * @param $file
* @return array * @return array

2
public/chunks/app-others.js vendored
View File

File diff suppressed because one or more lines are too long

2
public/chunks/files~chunks/shared-files~chunks/shared-page.js vendored
View File

File diff suppressed because one or more lines are too long

2
public/js/main.js vendored
View File

File diff suppressed because one or more lines are too long

6
public/mix-manifest.json
View File

@@ -1,6 +1,6 @@
{ {
"/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=557306a425c7c0085100", "/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=0c7dde0131eccc4e0f4f",
"/js/main.js": "/js/main.js?id=3e0d5147116744fbdb7c", "/js/main.js": "/js/main.js?id=3ba23e1e53e5d38fb356",
"/css/app.css": "/css/app.css?id=8f6d5dcb7110a726e142", "/css/app.css": "/css/app.css?id=8f6d5dcb7110a726e142",
"/chunks/admin.js": "/chunks/admin.js?id=60df31e17e9a453717dc", "/chunks/admin.js": "/chunks/admin.js?id=60df31e17e9a453717dc",
"/chunks/admin-account.js": "/chunks/admin-account.js?id=ab97f01586b286e0bba2", "/chunks/admin-account.js": "/chunks/admin-account.js?id=ab97f01586b286e0bba2",
@@ -8,7 +8,7 @@
"/chunks/app-billings.js": "/chunks/app-billings.js?id=2a85f4c8ad09b50f4358", "/chunks/app-billings.js": "/chunks/app-billings.js?id=2a85f4c8ad09b50f4358",
"/chunks/app-email.js": "/chunks/app-email.js?id=49806a5c914ca1a14bff", "/chunks/app-email.js": "/chunks/app-email.js?id=49806a5c914ca1a14bff",
"/chunks/app-index.js": "/chunks/app-index.js?id=ff6fb3cb1780d6ea76f2", "/chunks/app-index.js": "/chunks/app-index.js?id=ff6fb3cb1780d6ea76f2",
"/chunks/app-others.js": "/chunks/app-others.js?id=ebc9676ed26d701a599c", "/chunks/app-others.js": "/chunks/app-others.js?id=6eb162d433e0b9b8b7b2",
"/chunks/app-payments.js": "/chunks/app-payments.js?id=ad822a37d1d7c6e99a08", "/chunks/app-payments.js": "/chunks/app-payments.js?id=ad822a37d1d7c6e99a08",
"/chunks/app-settings.js": "/chunks/app-settings.js?id=e23a68dba034c047ff44", "/chunks/app-settings.js": "/chunks/app-settings.js?id=e23a68dba034c047ff44",
"/chunks/app-setup.js": "/chunks/app-setup.js?id=c1c6fcc091a248b10060", "/chunks/app-setup.js": "/chunks/app-setup.js?id=c1c6fcc091a248b10060",

902
resources/js/components/FilesView/FileItemList.vue
View File

@@ -1,283 +1,222 @@
<template> <template>
<div class="file-wrapper" @click.stop="clickedItem" @dblclick="goToItem" spellcheck="false"> <div class="file-wrapper" @click.stop="clickedItem" @dblclick="goToItem" spellcheck="false">
<!--List preview--> <!--List preview-->
<div :draggable="canDrag" @dragstart="$emit('dragstart')" @drop=" <div
drop() :draggable="canDrag"
area = false" @dragleave="dragLeave" @dragover.prevent="dragEnter" class="file-item" :class="{'is-clicked' : isClicked , 'no-clicked' : !isClicked && this.$isMobile(), 'is-dragenter': area }"> @dragstart="$emit('dragstart')"
<!-- MultiSelecting for the mobile version --> @drop="
<transition name="slide-from-left"> $emit('drop')
<div class="check-select" v-if="mobileMultiSelect"> area = false
<div class="select-box" :class="{'select-box-active' : isClicked } "> "
<CheckIcon v-if="isClicked" class="icon" size="17"/> @dragleave="dragLeave"
</div> @dragover.prevent="dragEnter"
</div> class="file-item"
</transition> :class="{ 'is-clicked': isClicked, 'is-dragenter': area }"
>
<!--Thumbnail for item-->
<div class="icon-item">
<!--If is file or image, then link item-->
<span v-if="isFile || (isImage && !data.thumbnail)" class="file-icon-text">
{{ data.mimetype | limitCharacters }}
</span>
<!--Thumbnail for item--> <!--Folder thumbnail-->
<div class="icon-item"> <FontAwesomeIcon v-if="isFile || (isImage && !data.thumbnail)" class="file-icon" icon="file" />
<!--If is file or image, then link item-->
<span v-if="isFile" class="file-icon-text">
{{ data.mimetype | limitCharacters }}
</span>
<!--Folder thumbnail--> <!--Image thumbnail-->
<FontAwesomeIcon v-if="isFile" class="file-icon" icon="file"/> <img loading="lazy" v-if="isImage && data.thumbnail" class="image" :src="data.thumbnail" :alt="data.name" />
<!--Image thumbnail--> <!--Else show only folder icon-->
<img loading="lazy" v-if="isImage" class="image" :src="data.thumbnail" :alt="data.name"/> <FontAwesomeIcon v-if="isFolder" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder" />
</div>
<!--Else show only folder icon--> <!--Name-->
<FontAwesomeIcon v-if="isFolder" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder"/> <div class="item-name">
</div> <!--Name-->
<b ref="name" @input="renameItem" :contenteditable="canEditName" class="name">
{{ itemName }}
</b>
<!--Name--> <div class="item-info">
<div class="item-name"> <!--Shared Icon-->
<b ref="name" @input="renameItem" @keydown.delete.stop :contenteditable="canEditName" class="name"> <div v-if="$checkPermission('master') && data.shared" class="item-shared">
{{ itemName }} <link-icon size="12" class="shared-icon"></link-icon>
</b> </div>
<div class="item-info"> <!--Participant owner Icon-->
<!--Shared Icon--> <div v-if="$checkPermission('master') && data.user_scope !== 'master'" class="item-shared">
<div v-if="$checkPermission('master') && data.shared" class="item-shared"> <user-plus-icon size="12" class="shared-icon"></user-plus-icon>
<link-icon size="12" class="shared-icon"></link-icon> </div>
</div>
<!--Participant owner Icon--> <!--Filesize and timestamp-->
<div v-if="$checkPermission('master') && data.user_scope !== 'master'" class="item-shared"> <span v-if="!isFolder" class="item-size">{{ data.filesize }}, {{ timeStamp }}</span>
<user-plus-icon size="12" class="shared-icon"></user-plus-icon>
</div>
<!--Filesize and timestamp--> <!--Folder item counts-->
<span v-if="!isFolder" class="item-size">{{ data.filesize }}, {{ timeStamp }}</span> <span v-if="isFolder" class="item-length"> {{ folderItems == 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ timeStamp }} </span>
</div>
</div>
<!--Folder item counts--> <!--Go Next icon-->
<span v-if="isFolder" class="item-length"> {{ folderItems == 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ timeStamp }} </span> <div class="actions" v-if="$isMobile() && !($checkPermission('visitor') && isFolder)">
</div> <span @click.stop="showItemActions" class="show-actions">
</div> <FontAwesomeIcon icon="ellipsis-v" class="icon-action"></FontAwesomeIcon>
</span>
<!--Show item actions--> </div>
<transition name="slide-from-right"> </div>
<div class="actions" v-if="$isMobile() && !($checkPermission('visitor') && isFolder || mobileMultiSelect)"> </div>
<span @click.stop="showItemActions" class="show-actions">
<FontAwesomeIcon icon="ellipsis-v" class="icon-action"></FontAwesomeIcon>
</span>
</div>
</transition>
</div>
</div>
</template> </template>
<script> <script>
import { LinkIcon, UserPlusIcon, CheckIcon } from 'vue-feather-icons' import { LinkIcon, UserPlusIcon } from 'vue-feather-icons'
import { debounce } from 'lodash' import { debounce } from 'lodash'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { events } from '@/bus' import { events } from '@/bus'
export default { export default {
name: 'FileItemList', name: 'FileItemList',
props: ['data'], props: ['data'],
components: { components: {
UserPlusIcon, UserPlusIcon,
LinkIcon, LinkIcon
CheckIcon },
}, computed: {
computed: { ...mapGetters(['FilePreviewType']),
...mapGetters(['FilePreviewType', 'fileInfoDetail']), isFolder() {
...mapGetters({ allData: 'data' }), return this.data.type === 'folder'
isClicked() { },
return this.fileInfoDetail.some(element => element.unique_id == this.data.unique_id) isFile() {
}, return this.data.type !== 'folder' && this.data.type !== 'image'
isFolder() { },
return this.data.type === 'folder' isImage() {
}, return this.data.type === 'image'
isFile() { },
return this.data.type !== 'folder' && this.data.type !== 'image' isPdf() {
}, return this.data.mimetype === 'pdf'
isImage() { },
return this.data.type === 'image' isVideo() {
}, return this.data.type === 'video'
isPdf() { },
return this.data.mimetype === 'pdf' isAudio() {
}, let mimetypes = ['mpeg', 'mp3', 'mp4', 'wan', 'flac']
isVideo() { return mimetypes.includes(this.data.mimetype) && this.data.type === 'audio'
return this.data.type === 'video' },
}, canEditName() {
isAudio() { return !this.$isMobile() && !this.$isThisLocation(['trash', 'trash-root']) && !this.$checkPermission('visitor') && !(this.sharedDetail && this.sharedDetail.type === 'file')
let mimetypes = ['mpeg', 'mp3', 'mp4', 'wan', 'flac'] },
return mimetypes.includes(this.data.mimetype) && this.data.type === 'audio' canDrag() {
}, return !this.isDeleted && this.$checkPermission(['master', 'editor'])
canEditName() { },
return !this.$isMobile() && !this.$isThisLocation(['trash', 'trash-root']) && !this.$checkPermission('visitor') && !(this.sharedDetail && this.sharedDetail.type === 'file') timeStamp() {
}, return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', { time: this.data.deleted_at }) : this.data.created_at
canDrag() { },
return !this.isDeleted && this.$checkPermission(['master', 'editor']) folderItems() {
}, return this.data.deleted_at ? this.data.trashed_items : this.data.items
timeStamp() { },
return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', { time: this.data.deleted_at }) : this.data.created_at isDeleted() {
}, return this.data.deleted_at ? true : false
folderItems() { }
return this.data.deleted_at ? this.data.trashed_items : this.data.items },
}, filters: {
isDeleted() { limitCharacters(str) {
return this.data.deleted_at ? true : false if (str.length > 3) {
} return str.substring(0, 3) + '...'
}, } else {
filters: { return str.substring(0, 3)
limitCharacters(str) { }
if (str.length > 3) { }
return str.substring(0, 3) + '...' },
} else { data() {
return str.substring(0, 3) return {
} isClicked: false,
} area: false,
}, itemName: undefined
data() { }
return { },
area: false, methods: {
itemName: undefined, showItemActions() {
mobileMultiSelect: false // Load file info detail
} this.$store.commit('GET_FILEINFO_DETAIL', this.data)
},
methods: {
drop() {
events.$emit('drop')
},
showItemActions() {
// Load file info detail
this.$store.commit('CLEAR_FILEINFO_DETAIL')
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
events.$emit('mobileMenu:show') events.$emit('mobileMenu:show')
}, },
dragEnter() { dragEnter() {
if (this.data.type !== 'folder') return if (this.data.type !== 'folder') return
this.area = true this.area = true
}, },
dragLeave() { dragLeave() {
this.area = false this.area = false
}, },
clickedItem(e) { clickedItem(e) {
events.$emit('unClick') events.$emit('contextMenu:hide')
events.$emit('fileItem:deselect')
if (!this.$isMobile()) { // Set clicked item
this.isClicked = true
if ((e.ctrlKey || e.metaKey) && !e.shiftKey) { // Open in mobile version on first click
// Click + Ctrl if (this.$isMobile() && this.isFolder) {
// Go to folder
if (this.$isThisLocation('public')) {
this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }])
} else {
this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }])
}
}
if (this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) { if (this.$isMobile()) {
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data) if (this.isImage || this.isVideo || this.isAudio) {
} else { events.$emit('fileFullPreview:show')
this.$store.commit('GET_FILEINFO_DETAIL', this.data) }
} }
} else if (e.shiftKey) {
// Click + Shift
let lastItem = this.allData.indexOf(this.fileInfoDetail[this.fileInfoDetail.length - 1])
let clickedItem = this.allData.indexOf(this.data)
// If Click + Shift + Ctrl dont remove already selected items // Load file info detail
if (!e.ctrlKey && !e.metaKey) { this.$store.commit('GET_FILEINFO_DETAIL', this.data)
this.$store.commit('CLEAR_FILEINFO_DETAIL')
}
//Shift selecting from top to bottom // Get target classname
if (lastItem < clickedItem) { let itemClass = e.target.className
for (let i = lastItem; i <= clickedItem; i++) {
this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
}
//Shift selecting from bottom to top
} else {
for (let i = lastItem; i >= clickedItem; i--) {
this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
}
}
} else {
// Click
this.$store.commit('CLEAR_FILEINFO_DETAIL')
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
}
}
if (!this.mobileMultiSelect && this.$isMobile()) { if (['name', 'icon', 'file-link', 'file-icon-text'].includes(itemClass)) return
// Open in mobile version on first click },
if (this.$isMobile() && this.isFolder) { goToItem() {
// Go to folder if (this.isImage || this.isVideo || this.isAudio) {
if (this.$isThisLocation('public')) { events.$emit('fileFullPreview:show')
this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }])
} else {
this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }])
}
}
if (this.$isMobile()) { } else if (this.isFile || !this.isFolder && !this.isPdf && !this.isVideo && !this.isAudio && !this.isImage) {
if (this.isImage || this.isVideo || this.isAudio) { this.$downloadFile(this.data.file_url, this.data.name + '.' + this.data.mimetype)
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
events.$emit('fileFullPreview:show')
}
}
}
if (this.mobileMultiSelect && this.$isMobile()) { } else if (this.isFolder) {
if (this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) { if (this.$isThisLocation('public')) {
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data) this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }])
} else { } else {
this.$store.commit('GET_FILEINFO_DETAIL', this.data) this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }])
} }
} }
},
renameItem: debounce(function(e) {
// Prevent submit empty string
if (e.target.innerText.trim() === '') return
// Get target classname this.$store.dispatch('renameItem', {
let itemClass = e.target.className unique_id: this.data.unique_id,
type: this.data.type,
name: e.target.innerText
})
}, 300)
},
created() {
this.itemName = this.data.name
if (['name', 'icon', 'file-link', 'file-icon-text'].includes(itemClass)) return events.$on('fileItem:deselect', () => {
}, // Deselect file
goToItem() { this.isClicked = false
if (this.isImage || this.isVideo || this.isAudio) { })
events.$emit('fileFullPreview:show')
} else if (this.isFile || !this.isFolder && !this.isPdf && !this.isVideo && !this.isAudio && !this.isImage) { // Change item name
this.$downloadFile(this.data.file_url, this.data.name + '.' + this.data.mimetype) events.$on('change:name', (item) => {
if (this.data.unique_id == item.unique_id) this.itemName = item.name
} else if (this.isFolder) { })
}
//Clear selected items after open another folder
this.$store.commit('CLEAR_FILEINFO_DETAIL')
if (this.$isThisLocation('public')) {
this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }])
} else {
this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }])
}
}
},
renameItem: debounce(function(e) {
// Prevent submit empty string
if (e.target.innerText.trim() === '') return
this.$store.dispatch('renameItem', {
unique_id: this.data.unique_id,
type: this.data.type,
name: e.target.innerText
})
}, 300)
},
created() {
this.itemName = this.data.name
events.$on('mobileSelecting:start', () => {
this.mobileMultiSelect = true
this.$store.commit('CLEAR_FILEINFO_DETAIL')
})
events.$on('mobileSelecting:stop', () => {
this.mobileMultiSelect = false
this.$store.commit('CLEAR_FILEINFO_DETAIL')
})
// Change item name
events.$on('change:name', (item) => {
if (this.data.unique_id == item.unique_id) this.itemName = item.name
})
}
} }
</script> </script>
@@ -285,322 +224,231 @@ export default {
@import '@assets/vue-file-manager/_variables'; @import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins'; @import '@assets/vue-file-manager/_mixins';
.slide-from-left-move {
transition: transform 300s ease;
}
.slide-from-left-enter-active,
.slide-from-right-enter-active,
.slide-from-left-leave-active,
.slide-from-right-leave-active {
transition: all 300ms;
}
.slide-from-left-enter,
.slide-from-left-leave-to {
opacity: 0;
transform: translateX(-100%);
}
.slide-from-right-enter,
.slide-from-right-leave-to {
opacity: 0;
transform: translateX(100%);
}
.check-select {
margin-right: 15px;
margin-left: 6px;
.select-box {
width: 20px;
height: 20px;
background-color: darken($light_background, 5%);
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
}
.select-box-active {
background-color: #f4f5f6;
.icon {
stroke: $text;
}
}
}
.file-wrapper { .file-wrapper {
user-select: none; user-select: none;
position: relative; position: relative;
&:hover { &:hover {
border-color: transparent; border-color: transparent;
} }
.actions { .actions {
text-align: right; text-align: right;
width: 50px; width: 50px;
.show-actions { .show-actions {
cursor: pointer; cursor: pointer;
padding: 12px 6px 12px; padding: 12px 6px 12px;
.icon-action { .icon-action {
@include font-size(14); @include font-size(14);
path { path {
fill: $theme; fill: $theme;
} }
} }
} }
} }
.item-name { .item-name {
display: block; display: block;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
.item-info { .item-info {
display: block; display: block;
line-height: 1; line-height: 1;
} }
.item-shared { .item-shared {
display: inline-block; display: inline-block;
.label { .label {
@include font-size(12); @include font-size(12);
font-weight: 400; font-weight: 400;
color: $theme; color: $theme;
} }
.shared-icon { .shared-icon {
vertical-align: middle; vertical-align: middle;
path, path,
circle, circle,
line { line {
stroke: $theme; stroke: $theme;
} }
} }
} }
.item-size, .item-size,
.item-length { .item-length {
@include font-size(11); @include font-size(11);
font-weight: 400; font-weight: 400;
color: rgba($text, 0.7); color: rgba($text, 0.7);
} }
.name { .name {
white-space: nowrap; white-space: nowrap;
&[contenteditable] { &[contenteditable] {
-webkit-user-select: text; -webkit-user-select: text;
user-select: text; user-select: text;
} }
&[contenteditable='true']:hover { &[contenteditable='true']:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
.name { .name {
color: $text; color: $text;
@include font-size(14); @include font-size(14);
font-weight: 700; font-weight: 700;
max-height: 40px; max-height: 40px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
&.actived { &.actived {
max-height: initial; max-height: initial;
} }
} }
} }
&.selected { &.selected {
.file-item { .file-item {
background: $light_background; background: $light_background;
} }
} }
.icon-item { .icon-item {
text-align: center; text-align: center;
position: relative; position: relative;
flex: 0 0 50px; flex: 0 0 50px;
line-height: 0; line-height: 0;
margin-right: 20px; margin-right: 20px;
.folder-icon { .folder-icon {
@include font-size(52); @include font-size(52);
path { path {
fill: $theme; fill: $theme;
} }
&.is-deleted { &.is-deleted {
path { path {
fill: $dark_background; fill: $dark_background;
} }
} }
} }
.file-icon { .file-icon {
@include font-size(45); @include font-size(45);
path { path {
fill: #fafafc; fill: #fafafc;
stroke: #dfe0e8; stroke: #dfe0e8;
stroke-width: 1; stroke-width: 1;
} }
} }
.file-icon-text { .file-icon-text {
line-height: 1; line-height: 1;
top: 40%; top: 40%;
@include font-size(11); @include font-size(11);
margin: 0 auto; margin: 0 auto;
position: absolute; position: absolute;
text-align: center; text-align: center;
left: 0; left: 0;
right: 0; right: 0;
color: $theme; color: $theme;
font-weight: 600; font-weight: 600;
user-select: none; user-select: none;
max-width: 50px; max-width: 50px;
max-height: 20px; max-height: 20px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.image { .image {
object-fit: cover; object-fit: cover;
user-select: none; user-select: none;
max-width: 100%; max-width: 100%;
border-radius: 5px; border-radius: 5px;
width: 50px; width: 50px;
height: 50px; height: 50px;
pointer-events: none; pointer-events: none;
} }
} }
.file-item { .file-item {
border: 2px dashed transparent; border: 2px dashed transparent;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 7px; padding: 7px;
&.is-dragenter { &.is-dragenter {
border: 2px dashed $theme; border: 2px dashed $theme;
border-radius: 8px; border-radius: 8px;
} }
&.no-clicked { &:hover,
background: white !important; &.is-clicked {
border-radius: 8px;
background: $light_background;
.item-name { .item-name .name {
.name { color: $theme;
color: $text !important; }
} }
} }
}
&:hover,
&.is-clicked {
border-radius: 8px;
background: $light_background;
}
}
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.check-select { .file-wrapper {
.icon-item {
.file-icon {
path {
fill: $dark_mode_foreground;
stroke: #2f3c54;
}
}
.select-box { .folder-icon {
background-color: lighten($dark_mode_foreground, 10%); &.is-deleted {
} path {
fill: lighten($dark_mode_foreground, 5%);
}
}
}
}
.select-box-active { .file-item {
background-color: lighten($dark_mode_foreground, 10%); &:hover,
&.is-clicked {
background: $dark_mode_foreground;
.icon { .file-icon {
stroke: $theme; path {
} fill: $dark_mode_background;
} }
} }
}
}
.file-wrapper { .item-name {
.icon-item { .name {
.file-icon { color: $dark_mode_text_primary;
path { }
fill: $dark_mode_foreground;
stroke: #2f3c54;
}
}
.folder-icon { .item-size,
&.is-deleted { .item-length {
path { color: $dark_mode_text_secondary;
fill: lighten($dark_mode_foreground, 5%); }
} }
} }
}
}
.file-item {
&.no-clicked {
background: $dark_mode_background !important;
.file-icon {
path {
fill: $dark_mode_foreground !important;
stroke: #2F3C54;
}
}
.item-name {
.name {
color: $dark_mode_text_primary !important;
}
}
}
&:hover,
&.is-clicked {
background: $dark_mode_foreground;
.item-name .name {
color: $theme;
}
.file-icon {
path {
fill: $dark_mode_background;
}
}
}
}
.item-name {
.name {
color: $dark_mode_text_primary;
}
.item-size,
.item-length {
color: $dark_mode_text_secondary;
}
}
}
} }
</style> </style>

12
resources/js/components/FilesView/FilePreview.vue
View File

@@ -1,9 +1,9 @@
<template> <template>
<div v-if="canBePreview" class="preview"> <div v-if="canBePreview" class="preview">
<img v-if="fileInfoDetail[0].type == 'image'" :src="fileInfoDetail[0].thumbnail" :alt="fileInfoDetail[0].name" /> <img v-if="fileInfoDetail.type == 'image' && fileInfoDetail.thumbnail" :src="fileInfoDetail.thumbnail" :alt="fileInfoDetail.name" />
<audio v-else-if="fileInfoDetail[0].type == 'audio'" :src="fileInfoDetail[0].file_url" controlsList="nodownload" controls></audio> <audio v-else-if="fileInfoDetail.type == 'audio'" :src="fileInfoDetail.file_url" controlsList="nodownload" controls></audio>
<video v-else-if="fileInfoDetail[0].type == 'video'" controlsList="nodownload" disablePictureInPicture playsinline controls> <video v-else-if="fileInfoDetail.type == 'video'" controlsList="nodownload" disablePictureInPicture playsinline controls>
<source :src="fileInfoDetail[0].file_url" type="video/mp4"> <source :src="fileInfoDetail.file_url" type="video/mp4">
</video> </video>
</div> </div>
</template> </template>
@@ -17,9 +17,9 @@
computed: { computed: {
...mapGetters(['fileInfoDetail']), ...mapGetters(['fileInfoDetail']),
canBePreview() { canBePreview() {
return this.fileInfoDetail[0] && ! includes([ return this.fileInfoDetail && ! includes([
'folder', 'file' 'folder', 'file'
], this.fileInfoDetail[0].type) ], this.fileInfoDetail.type)
} }
}, },
} }

585
resources/js/helpers.js vendored
View File

@@ -1,335 +1,328 @@
import i18n from '@/i18n/index' import i18n from '@/i18n/index'
import store from './store/index' import store from './store/index'
import { debounce, includes } from 'lodash' import {debounce, includes} from "lodash";
import { events } from './bus' import {events} from './bus'
import axios from 'axios' import axios from 'axios'
import router from '@/router' import router from '@/router'
const Helpers = { const Helpers = {
install(Vue) { install(Vue) {
Vue.prototype.$updateText = debounce(function(route, name, value) { Vue.prototype.$updateText = debounce(function (route, name, value) {
let enableEmptyInput = ['mimetypes_blacklist' , 'google_analytics' , 'upload_limit']
if (value === '' && !enableEmptyInput.includes(name)) return
axios.post(this.$store.getters.api + route, {name, value, _method: 'patch'})
.catch(error => {
events.$emit('alert:open', {
title: this.$t('popup_error.title'),
message: this.$t('popup_error.message'),
})
})
}, 150)
Vue.prototype.$updateImage = function (route, name, image) {
// Create form
let formData = new FormData()
// Add image to form
formData.append('name', name)
formData.append(name, image)
formData.append('_method', 'PATCH')
axios.post(this.$store.getters.api + route, formData, {
headers: {
'Content-Type': 'multipart/form-data',
}
})
.catch(error => {
events.$emit('alert:open', {
title: this.$t('popup_error.title'),
message: this.$t('popup_error.message'),
})
})
}
Vue.prototype.$scrollTop = function () {
var container = document.getElementById('vue-file-manager')
if (container) {
container.scrollTop = 0
}
}
Vue.prototype.$getImage = function (source) {
return source ? this.$store.getters.config.host + '/' + source : ''
}
Vue.prototype.$getCreditCardBrand = function (brand) {
return `/assets/icons/${brand}.svg`
}
Vue.prototype.$getInvoiceLink = function (customer, id) {
return '/invoice/' + customer + '/' + id
}
Vue.prototype.$openImageOnNewTab = function (source) {
let win = window.open(source, '_blank')
win.focus()
}
Vue.prototype.$createFolder = function (folderName) {
this.$store.dispatch('createFolder', folderName)
}
Vue.prototype.$handleUploading = async function (files, parent_id) {
let fileBuffer = []
// Append the file list to fileBuffer array
Array.prototype.push.apply(fileBuffer, files);
let fileSucceed = 0
// Update files count in progressbar
store.commit('UPDATE_FILE_COUNT_PROGRESS', {
current: fileSucceed,
total: files.length
})
// Reset upload progress to 0
store.commit('UPLOADING_FILE_PROGRESS', 0)
// Get parent id
let parentFolder = this.$store.getters.currentFolder ? this.$store.getters.currentFolder.unique_id : 0
let rootFolder = parent_id ? parent_id : parentFolder
let enableEmptyInput = ['mimetypes_blacklist', 'google_analytics'] // Upload files
do {
let file = fileBuffer.shift(),
chunks = []
if (value === '' && !enableEmptyInput.includes(name)) return // Calculate ceils
let size = this.$store.getters.config.chunkSize,
axios.post(this.$store.getters.api + route, { name, value, _method: 'patch' }) chunksCeil = Math.ceil(file.size / size);
.catch(error => {
events.$emit('alert:open', {
title: this.$t('popup_error.title'),
message: this.$t('popup_error.message')
})
})
}, 150)
Vue.prototype.$updateImage = function(route, name, image) {
// Create form
let formData = new FormData()
// Add image to form
formData.append('name', name)
formData.append(name, image)
formData.append('_method', 'PATCH')
axios.post(this.$store.getters.api + route, formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.catch(error => {
events.$emit('alert:open', {
title: this.$t('popup_error.title'),
message: this.$t('popup_error.message')
})
})
}
Vue.prototype.$scrollTop = function() {
var container = document.getElementById('vue-file-manager')
if (container) {
container.scrollTop = 0
}
}
Vue.prototype.$getImage = function(source) {
return source ? this.$store.getters.config.host + '/' + source : ''
}
Vue.prototype.$getCreditCardBrand = function(brand) {
return `/assets/icons/${brand}.svg`
}
Vue.prototype.$getInvoiceLink = function(customer, id) {
return '/invoice/' + customer + '/' + id
}
Vue.prototype.$openImageOnNewTab = function(source) {
let win = window.open(source, '_blank')
win.focus()
}
Vue.prototype.$handleUploading = async function(files, parent_id) {
let fileBuffer = []
// Append the file list to fileBuffer array // Create chunks
Array.prototype.push.apply(fileBuffer, files) for (let i = 0; i < chunksCeil; i++) {
chunks.push(file.slice(
i * size, Math.min(i * size + size, file.size), file.type
));
}
let fileSucceed = 0 // Set Data
let formData = new FormData(),
uploadedSize = 0,
isNotGeneralError = true,
striped_name = file.name.replace(/[^A-Za-z 0-9 \.,\?""!@#\$%\^&\*\(\)-_=\+;:<>\/\\\|\}\{\[\]`~]*/g, ''),
filename = Array(16).fill(0).map(x => Math.random().toString(36).charAt(2)).join('') + '-' + striped_name + '.part'
// Update files count in progressbar do {
store.commit('UPDATE_FILE_COUNT_PROGRESS', { let isLast = chunks.length === 1,
current: fileSucceed, chunk = chunks.shift(),
total: files.length attempts = 0
})
// Reset upload progress to 0 // Set form data
store.commit('UPLOADING_FILE_PROGRESS', 0) formData.set('file', chunk, filename);
formData.set('parent_id', rootFolder)
formData.set('is_last', isLast);
// Get parent id // Upload chunks
let parentFolder = this.$store.getters.currentFolder ? this.$store.getters.currentFolder.unique_id : 0 do {
let rootFolder = parent_id ? parent_id : parentFolder await store.dispatch('uploadFiles', {
form: formData,
fileSize: file.size,
totalUploadedSize: uploadedSize
}).then(() => {
uploadedSize = uploadedSize + chunk.size
}).catch((error) => {
// Upload files // Count attempts
do { attempts++
let file = fileBuffer.shift(),
chunks = []
// Calculate ceils // Break uploading proccess
let size = this.$store.getters.config.chunkSize, if (error.response.status === 500)
chunksCeil = Math.ceil(file.size / size) isNotGeneralError = false
// Create chunks //Break if mimetype of file is in blacklist or file size exceed upload limit
for (let i = 0; i < chunksCeil; i++) { if(error.response.status === 415 || 413)
chunks.push(file.slice( isNotGeneralError = false
i * size, Math.min(i * size + size, file.size), file.type
))
}
// Set Data // Show Error
let formData = new FormData(), if (attempts === 3)
uploadedSize = 0, this.$isSomethingWrong()
isNotGeneralError = true, })
striped_name = file.name.replace(/[^A-Za-z 0-9 \.,\?""!@#\$%\^&\*\(\)-_=\+;:<>\/\\\|\}\{\[\]`~]*/g, ''), } while (isNotGeneralError && attempts !== 0 && attempts !== 3)
filename = Array(16).fill(0).map(x => Math.random().toString(36).charAt(2)).join('') + '-' + striped_name + '.part'
do { } while (isNotGeneralError && chunks.length !== 0)
let isLast = chunks.length === 1,
chunk = chunks.shift(),
attempts = 0
// Set form data fileSucceed++
formData.set('file', chunk, filename)
formData.set('parent_id', rootFolder)
formData.set('is_last', isLast)
// Upload chunks // Progress file log
do { store.commit('UPDATE_FILE_COUNT_PROGRESS', {
await store.dispatch('uploadFiles', { current: fileSucceed,
form: formData, total: files.length
fileSize: file.size, })
totalUploadedSize: uploadedSize
}).then(() => {
uploadedSize = uploadedSize + chunk.size
}).catch((error) => {
// Count attempts } while (fileBuffer.length !== 0)
attempts++
// Break uploading proccess store.commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
if (error.response.status === 500) }
isNotGeneralError = false
//Break if mimetype of file is in blacklist Vue.prototype.$uploadFiles = async function (files) {
if (error.response.status === 415)
isNotGeneralError = false
// Show Error if (files.length == 0) return
if (attempts === 3)
this.$isSomethingWrong()
})
} while (isNotGeneralError && attempts !== 0 && attempts !== 3)
} while (isNotGeneralError && chunks.length !== 0) if (!this.$checkFileMimetype(files) || !this.$checkUploadLimit(files)) return
this.$handleUploading(files, undefined)
}
fileSucceed++ Vue.prototype.$uploadExternalFiles = async function (event, parent_id) {
// Progress file log // Prevent submit empty files
store.commit('UPDATE_FILE_COUNT_PROGRESS', { if (event.dataTransfer.items.length == 0) return
current: fileSucceed,
total: files.length
})
} while (fileBuffer.length !== 0) // Get files
let files = [...event.dataTransfer.items].map(item => item.getAsFile());
store.commit('UPDATE_FILE_COUNT_PROGRESS', undefined) this.$handleUploading(files, parent_id)
} }
Vue.prototype.$uploadFiles = async function(files) { Vue.prototype.$downloadFile = function (url, filename) {
var anchor = document.createElement('a')
if (files.length == 0) return anchor.href = url
if (!this.$checkFileMimetype(files)) return anchor.download = filename
this.$handleUploading(files, undefined) document.body.appendChild(anchor)
}
Vue.prototype.$uploadExternalFiles = async function(event, parent_id) { anchor.click()
}
Vue.prototype.$closePopup = function () {
events.$emit('popup:close')
}
Vue.prototype.$isThisRoute = function (route, locations) {
return includes(locations, route.name)
}
Vue.prototype.$isThisLocation = function (location) {
// Get current location
let currentLocation = store.getters.currentFolder && store.getters.currentFolder.location ? store.getters.currentFolder.location : undefined
// Check if type is object
if (typeof location === 'Object' || location instanceof Object) {
return includes(location, currentLocation)
} else {
return currentLocation === location
}
}
Vue.prototype.$checkPermission = function (type) {
let currentPermission = store.getters.permission
// Check if type is object
if (typeof type === 'Object' || type instanceof Object) {
return includes(type, currentPermission)
} else {
return currentPermission === type
}
}
// Prevent submit empty files Vue.prototype.$isMobile = function () {
if (event.dataTransfer.items.length == 0) return const toMatch = [
/Android/i,
/webOS/i,
/iPhone/i,
/iPad/i,
/iPod/i,
/BlackBerry/i,
/Windows Phone/i
]
return toMatch.some(toMatchItem => {
return navigator.userAgent.match(toMatchItem)
})
}
// Get files Vue.prototype.$isMinimalScale = function () {
let files = [...event.dataTransfer.items].map(item => item.getAsFile()) let sizeType = store.getters.filesViewWidth
this.$handleUploading(files, parent_id) return sizeType === 'minimal-scale'
} }
Vue.prototype.$downloadFile = function(url, filename) { Vue.prototype.$isCompactScale = function () {
var anchor = document.createElement('a') let sizeType = store.getters.filesViewWidth
anchor.href = url return sizeType === 'compact-scale'
}
anchor.download = filename
Vue.prototype.$isFullScale = function () {
document.body.appendChild(anchor) let sizeType = store.getters.filesViewWidth
anchor.click() return sizeType === 'full-scale'
} }
Vue.prototype.$closePopup = function() { Vue.prototype.$isSomethingWrong = function () {
events.$emit('popup:close')
} events.$emit('alert:open', {
title: this.$t('popup_error.title'),
Vue.prototype.$isThisRoute = function(route, locations) { message: this.$t('popup_error.message'),
})
return includes(locations, route.name) }
} Vue.prototype.$checkFileMimetype = function(files) {
let validated = true
Vue.prototype.$isThisLocation = function(location) { let mimetypesBlacklist = store.getters.config.mimetypesBlacklist
// Get current location for (let i = 0 ; i<files.length; i++ ) {
let currentLocation = store.getters.currentFolder && store.getters.currentFolder.location ? store.getters.currentFolder.location : undefined let fileType = files[i].type.split('/')
// Check if type is object if(!fileType[0]) {
if (typeof location === 'Object' || location instanceof Object) { fileType[1] = _.last(files[i].name.split('.'))
return includes(location, currentLocation) }
} else { if(mimetypesBlacklist.includes(fileType[1])) {
return currentLocation === location validated = false
}
} events.$emit('alert:open', {
emoji: '😬😬😬',
Vue.prototype.$checkPermission = function(type) { title: i18n.t('popup_mimetypes_blacklist.title'),
message: i18n.t('popup_mimetypes_blacklist.message', {mimetype: fileType[1]}),
let currentPermission = store.getters.permission })
}
// Check if type is object }
if (typeof type === 'Object' || type instanceof Object) { return validated
return includes(type, currentPermission) }
Vue.prototype.$checkUploadLimit = function (files) {
} else { let uploadLimit = store.getters.config.uploadLimit
return currentPermission === type let validate = true
}
} for (let i = 0 ; i<files.length; i++ ) {
if(uploadLimit != 0 && files[i].size > uploadLimit) {
Vue.prototype.$isMobile = function() { validate = false
const toMatch = [ events.$emit('alert:open', {
/Android/i, emoji: '😟😟😟',
/webOS/i, title: i18n.t('popup_upload_limit.title'),
/iPhone/i, message: i18n.t('popup_upload_limit.message', {uploadLimit: store.getters.config.uploadLimitFormatted}),
/iPad/i, })
/iPod/i, break
/BlackBerry/i, }
/Windows Phone/i }
] return validate
}
return toMatch.some(toMatchItem => { }
return navigator.userAgent.match(toMatchItem)
})
}
Vue.prototype.$isMinimalScale = function() {
let sizeType = store.getters.filesViewWidth
return sizeType === 'minimal-scale'
}
Vue.prototype.$isCompactScale = function() {
let sizeType = store.getters.filesViewWidth
return sizeType === 'compact-scale'
}
Vue.prototype.$isFullScale = function() {
let sizeType = store.getters.filesViewWidth
return sizeType === 'full-scale'
}
Vue.prototype.$isSomethingWrong = function() {
events.$emit('alert:open', {
title: i18n.t('popup_error.title'),
message: i18n.t('popup_error.message')
})
}
Vue.prototype.$checkFileMimetype = function(files) {
let validated = true
let mimetypesBlacklist = store.getters.config.mimetypesBlacklist
for (let i = 0; i < files.length; i++) {
let fileType = files[i].type.split('/')
if (!fileType[0]) {
fileType[1] = _.last(files[i].name.split('.'))
}
if (mimetypesBlacklist.includes(fileType[1])) {
validated = false
events.$emit('alert:open', {
emoji: '😬😬😬',
title: i18n.t('popup_mimetypes_blacklist.title'),
message: i18n.t('popup_mimetypes_blacklist.message', { mimetype: fileType[1] })
})
}
}
return validated
}
Vue.prototype.$getDataByLocation = function() {
let folder = store.getters.currentFolder
let actions = {
'base': ['getFolder', [{ folder: folder, back: true, init: false, sorting: true }]],
'public': ['browseShared', [{ folder: folder, back: true, init: false, sorting: true }]],
'trash': ['getFolder', [{ folder: folder, back: true, init: false, sorting: true }]],
'participant_uploads': ['getParticipantUploads'],
'trash-root': ['getTrash'],
'latest': ['getLatest'],
'shared': ['getShared']
}
this.$store.dispatch(...actions[folder.location])
// Get dara of user with favourites tree
this.$store.dispatch('getAppData')
// Get data of Navigator tree
this.$store.dispatch('getFolderTree')
}
Vue.prototype.$checkOS = function() {
// Handle styled scrollbar for Windows
if (navigator.userAgent.indexOf('Windows') != -1) {
let body = document.body
body.classList.add('windows')
}
}
}
} }
export default Helpers export default Helpers

511
resources/js/store/modules/fileFunctions.js vendored
View File

@@ -1,357 +1,258 @@
import i18n from '@/i18n/index' import i18n from '@/i18n/index'
import router from '@/router' import router from '@/router'
import { events } from '@/bus' import {events} from '@/bus'
import { last } from 'lodash' import {last} from 'lodash'
import axios from 'axios' import axios from 'axios'
import Vue from 'vue'
const defaultState = {
isZippingFiles: false,
}
const actions = { const actions = {
downloadFiles: ({ commit, getters }) => { moveItem: ({commit, getters, dispatch}, [item_from, to_item]) => {
let files = []
// get unique_ids of selected files // Get route
getters.fileInfoDetail.forEach(file => files.push(file.unique_id)) let route = getters.sharedDetail && ! getters.sharedDetail.protected
? '/api/move/' + item_from.unique_id + '/public/' + router.currentRoute.params.token
: '/api/move/' + item_from.unique_id
// Get route axios
let route = getters.sharedDetail && !getters.sharedDetail.protected .post(route, {
? '/api/zip/public/' + router.currentRoute.params.token from_type: item_from.type,
: '/api/zip' to_unique_id: to_item.unique_id,
_method: 'patch'
})
.then(() => {
commit('REMOVE_ITEM', item_from.unique_id)
commit('INCREASE_FOLDER_ITEM', to_item.unique_id)
commit('ZIPPING_FILE_STATUS', true) if (item_from.type === 'folder' && getters.currentFolder.location !== 'public')
dispatch('getAppData')
axios.post(route, { })
files: files .catch(() => isSomethingWrong())
}) },
.then(response => { createFolder: ({commit, getters, dispatch}, folderName) => {
Vue.prototype.$downloadFile(response.data.url, response.data.name)
})
.catch(() => {
Vue.prototype.$isSomethingWrong()
})
.finally(() => {
commit('ZIPPING_FILE_STATUS', false)
})
},
moveItem: ({ commit, getters, dispatch }, { to_item, noSelectedItem }) => {
let itemsToMove = [] // Get route
let items = [noSelectedItem] let route = getters.sharedDetail && ! getters.sharedDetail.protected
? '/api/create-folder/public/' + router.currentRoute.params.token
: '/api/create-folder'
// If coming no selected item dont get items to move from fileInfoDetail axios
if (!noSelectedItem) .post(route, {
items = getters.fileInfoDetail parent_id: getters.currentFolder.unique_id,
name: folderName
})
.then(response => {
commit('ADD_NEW_FOLDER', response.data)
items.forEach(data => itemsToMove.push({ events.$emit('scrollTop')
'force_delete': data.deleted_at ? true : false,
'unique_id': data.unique_id,
'type': data.type
}))
// Remove file preview if ( getters.currentFolder.location !== 'public' ) {
if (!noSelectedItem) dispatch('getAppData')
commit('CLEAR_FILEINFO_DETAIL') }
})
.catch(() => isSomethingWrong())
},
renameItem: ({commit, getters, dispatch}, data) => {
// Get route // Updated name in favourites panel
let route = getters.sharedDetail && !getters.sharedDetail.protected if (getters.permission === 'master' && data.type === 'folder')
? '/api/move/public/' + router.currentRoute.params.token commit('UPDATE_NAME_IN_FAVOURITES', data)
: '/api/move'
axios // Get route
.post(route, { let route = getters.sharedDetail && ! getters.sharedDetail.protected
_method: 'post', ? '/api/rename-item/' + data.unique_id + '/public/' + router.currentRoute.params.token
to_unique_id: to_item.unique_id, : '/api/rename-item/' + data.unique_id
items: itemsToMove
})
.then(() => {
itemsToMove.forEach(item => {
commit('REMOVE_ITEM', item.unique_id)
commit('INCREASE_FOLDER_ITEM', to_item.unique_id)
if (item.type === 'folder') axios
dispatch('getAppData') .post(route, {
if (getters.currentFolder.location === 'public') name: data.name,
dispatch('getFolderTree') type: data.type,
}) _method: 'patch'
}) })
.catch(() => Vue.prototype.$isSomethingWrong()) .then(response => {
}, commit('CHANGE_ITEM_NAME', response.data)
createFolder: ({ commit, getters, dispatch }, folderName) => {
// Get route if (data.type === 'folder' && getters.currentFolder.location !== 'public')
let route = getters.sharedDetail && !getters.sharedDetail.protected dispatch('getAppData')
? '/api/create-folder/public/' + router.currentRoute.params.token })
: '/api/create-folder' .catch(() => isSomethingWrong())
},
uploadFiles: ({commit, getters}, {form, fileSize, totalUploadedSize}) => {
return new Promise((resolve, reject) => {
axios // Get route
.post(route, { let route = getters.sharedDetail && ! getters.sharedDetail.protected
parent_id: getters.currentFolder.unique_id, ? '/api/upload/public/' + router.currentRoute.params.token
name: folderName : '/api/upload'
})
.then(response => {
commit('ADD_NEW_FOLDER', response.data)
events.$emit('scrollTop') axios
.post(route, form, {
headers: {
'Content-Type': 'application/octet-stream'
},
onUploadProgress: event => {
if (getters.currentFolder.location !== 'public') var percentCompleted = Math.floor(((totalUploadedSize + event.loaded) / fileSize) * 100)
dispatch('getAppData')
if (getters.currentFolder.location === 'public')
dispatch('getFolderTree')
}) commit('UPLOADING_FILE_PROGRESS', percentCompleted >= 100 ? 100 : percentCompleted)
.catch(() => Vue.prototype.$isSomethingWrong())
},
renameItem: ({ commit, getters, dispatch }, data) => {
// Updated name in favourites panel if (percentCompleted >= 100) {
if (getters.permission === 'master' && data.type === 'folder') commit('PROCESSING_FILE', true)
commit('UPDATE_NAME_IN_FAVOURITES', data) }
}
})
.then(response => {
commit('PROCESSING_FILE', false)
// Get route // Check if user is in uploading folder, if yes, than show new file
let route = getters.sharedDetail && !getters.sharedDetail.protected if (response.data.folder_id == getters.currentFolder.unique_id)
? '/api/rename-item/' + data.unique_id + '/public/' + router.currentRoute.params.token commit('ADD_NEW_ITEMS', response.data)
: '/api/rename-item/' + data.unique_id
axios resolve(response)
.post(route, { })
name: data.name, .catch(error => {
type: data.type, commit('PROCESSING_FILE', false)
_method: 'patch'
})
.then(response => {
commit('CHANGE_ITEM_NAME', response.data)
if (data.type === 'folder' && getters.currentFolder.location !== 'public') reject(error)
dispatch('getAppData')
if (data.type === 'folder' && getters.currentFolder.location === 'public')
dispatch('getFolderTree')
})
.catch(() => Vue.prototype.$isSomethingWrong())
},
uploadFiles: ({ commit, getters }, { form, fileSize, totalUploadedSize }) => {
return new Promise((resolve, reject) => {
// Get route switch (error.response.status) {
let route = getters.sharedDetail && !getters.sharedDetail.protected case 423:
? '/api/upload/public/' + router.currentRoute.params.token events.$emit('alert:open', {
: '/api/upload' emoji: '😬😬😬',
title: i18n.t('popup_exceed_limit.title'),
message: i18n.t('popup_exceed_limit.message')
})
break;
case 415:
events.$emit('alert:open', {
emoji: '😬😬😬',
title: i18n.t('popup_mimetypes_blacklist.title'),
message: i18n.t('popup_mimetypes_blacklist.message')
})
break;
case 413:
events.$emit('alert:open', {
emoji: '😟😟😟',
title: i18n.t('popup_upload_limit.title'),
message: i18n.t('popup_upload_limit.message', {uploadLimit: getters.config.uploadLimitFormatted})
})
break;
default:
events.$emit('alert:open', {
title: i18n.t('popup_error.title'),
message: i18n.t('popup_error.message'),
})
break;
}
// Create cancel token for axios cancelation // Reset uploader
const CancelToken = axios.CancelToken commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
const source = CancelToken.source() })
})
},
restoreItem: ({commit, getters}, item) => {
axios let restoreToHome = false
.post(route, form, {
cancelToken: source.token,
headers: {
'Content-Type': 'application/octet-stream'
},
onUploadProgress: event => {
var percentCompleted = Math.floor(((totalUploadedSize + event.loaded) / fileSize) * 100) // Check if file can be restored to home directory
if (getters.currentFolder.location === 'trash')
restoreToHome = true
commit('UPLOADING_FILE_PROGRESS', percentCompleted >= 100 ? 100 : percentCompleted) // Remove file
commit('REMOVE_ITEM', item.unique_id)
if (percentCompleted >= 100) { // Remove file preview
commit('PROCESSING_FILE', true) commit('CLEAR_FILEINFO_DETAIL')
}
}
})
.then(response => {
commit('PROCESSING_FILE', false)
// Check if user is in uploading folder, if yes, than show new file axios
if (response.data.folder_id == getters.currentFolder.unique_id) .post(getters.api + '/restore-item/' + item.unique_id, {
commit('ADD_NEW_ITEMS', response.data) type: item.type,
to_home: restoreToHome,
_method: 'patch'
})
.catch(() => isSomethingWrong())
},
deleteItem: ({commit, getters, dispatch}, data) => {
resolve(response) // Remove file
}) commit('REMOVE_ITEM', data.unique_id)
.catch(error => {
commit('PROCESSING_FILE', false)
reject(error) // Remove item from sidebar
if (getters.permission === 'master') {
switch (error.response.status) { if (data.type === 'folder')
case 423: commit('REMOVE_ITEM_FROM_FAVOURITES', data)
events.$emit('alert:open', { }
emoji: '😬😬😬',
title: i18n.t('popup_exceed_limit.title'),
message: i18n.t('popup_exceed_limit.message')
})
break
case 415:
events.$emit('alert:open', {
emoji: '😬😬😬',
title: i18n.t('popup_mimetypes_blacklist.title'),
message: i18n.t('popup_mimetypes_blacklist.message')
})
break
case 413:
events.$emit('alert:open', {
emoji: '😟😟😟',
title: i18n.t('popup_paylod_error.title'),
message: i18n.t('popup_paylod_error.message')
})
break
default:
events.$emit('alert:open', {
title: i18n.t('popup_error.title'),
message: i18n.t('popup_error.message')
})
break
}
// Reset uploader // Remove file preview
commit('UPDATE_FILE_COUNT_PROGRESS', undefined) commit('CLEAR_FILEINFO_DETAIL')
})
// Cancel the upload request // Get route
events.$on('cancel-upload', () => { let route = getters.sharedDetail && ! getters.sharedDetail.protected
source.cancel() ? '/api/remove-item/' + data.unique_id + '/public/' + router.currentRoute.params.token
: '/api/remove-item/' + data.unique_id
// Hide upload progress bar axios
commit('PROCESSING_FILE', false) .post(route, {
commit('UPDATE_FILE_COUNT_PROGRESS', undefined) _method: 'delete',
}) data: {
}) type: data.type,
}, force_delete: data.deleted_at ? true : false,
restoreItem: ({ commit, getters }, item) => { },
})
.then(() => {
let restoreToHome = false // If is folder, update app data
if (data.type === 'folder') {
// Check if file can be restored to home directory if (data.unique_id === getters.currentFolder.unique_id) {
if (getters.currentFolder.location === 'trash')
restoreToHome = true
// Remove file if ( getters.currentFolder.location === 'public' ) {
commit('REMOVE_ITEM', item.unique_id) dispatch('browseShared', [{folder: last(getters.browseHistory), back: true, init: false}])
} else {
dispatch('getFolder', [{folder: last(getters.browseHistory), back: true, init: false}])
}
}
// Remove file preview if ( getters.currentFolder.location !== 'public' )
commit('CLEAR_FILEINFO_DETAIL') dispatch('getAppData')
}
})
.catch(() => isSomethingWrong())
},
emptyTrash: ({commit, getters}) => {
axios // Clear file browser
.post(getters.api + '/restore-item/' + item.unique_id, { commit('LOADING_STATE', {loading: true, data: []})
type: item.type,
to_home: restoreToHome,
_method: 'patch'
})
.catch(() => Vue.prototype.$isSomethingWrong())
},
deleteItem: ({ commit, getters, dispatch }, noSelectedItem) => {
let itemsToDelete = [] axios
let items = [noSelectedItem] .post(getters.api + '/empty-trash', {
_method: 'delete'
})
.then(() => {
commit('LOADING_STATE', {loading: false, data: []})
events.$emit('scrollTop')
// If coming no selected item dont get items to move from fileInfoDetail // Remove file preview
if (!noSelectedItem) commit('CLEAR_FILEINFO_DETAIL')
items = getters.fileInfoDetail
items.forEach(data => { // Show success message
itemsToDelete.push({ events.$emit('success:open', {
'force_delete': data.deleted_at ? true : false, title: i18n.t('popup_trashed.title'),
'type': data.type, message: i18n.t('popup_trashed.message'),
'unique_id': data.unique_id })
}) })
.catch(() => isSomethingWrong())
// Remove file },
commit('REMOVE_ITEM', data.unique_id)
// Remove item from sidebar
if (getters.permission === 'master') {
if (data.type === 'folder')
commit('REMOVE_ITEM_FROM_FAVOURITES', data)
}
// Remove file
commit('REMOVE_ITEM', data.unique_id)
// Remove item from sidebar
if (getters.permission === 'master') {
if (data.type === 'folder')
commit('REMOVE_ITEM_FROM_FAVOURITES', data)
}
})
// Remove file preview
if (!noSelectedItem) {
commit('CLEAR_FILEINFO_DETAIL')
}
// Get route
let route = getters.sharedDetail && !getters.sharedDetail.protected
? '/api/remove-item/public/' + router.currentRoute.params.token
: '/api/remove-item'
axios
.post(route, {
_method: 'post',
data: itemsToDelete
})
.then(() => {
itemsToDelete.forEach(data => {
// If is folder, update app data
if (data.type === 'folder') {
if (data.unique_id === getters.currentFolder.unique_id) {
if (getters.currentFolder.location === 'public') {
dispatch('browseShared', [{ folder: last(getters.browseHistory), back: true, init: false }])
} else {
dispatch('getFolder', [{ folder: last(getters.browseHistory), back: true, init: false }])
}
}
}
})
if (getters.currentFolder.location !== 'public')
dispatch('getAppData')
if (getters.currentFolder.location === 'public')
dispatch('getFolderTree')
})
.catch(() => Vue.prototype.$isSomethingWrong())
},
emptyTrash: ({ commit, getters }) => {
// Clear file browser
commit('LOADING_STATE', { loading: true, data: [] })
axios
.post(getters.api + '/empty-trash', {
_method: 'delete'
})
.then(() => {
commit('LOADING_STATE', { loading: false, data: [] })
events.$emit('scrollTop')
// Remove file preview
commit('CLEAR_FILEINFO_DETAIL')
})
.catch(() => Vue.prototype.$isSomethingWrong())
}
} }
const mutations = { // Show error message
ZIPPING_FILE_STATUS(state, status) { function isSomethingWrong() {
state.isZippingFiles = status events.$emit('alert:open', {
} title: i18n.t('popup_error.title'),
} message: i18n.t('popup_error.message'),
})
const getters = {
isZippingFiles: state => state.isZippingFiles
} }
export default { export default {
state: defaultState, actions,
mutations,
actions,
getters
} }