nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-05 18:23:48 +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
*
@@ -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
>>>>>>>>> Temporary merge branch 2
*
* @param $file
* @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",
"/js/main.js": "/js/main.js?id=3e0d5147116744fbdb7c",
"/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=3ba23e1e53e5d38fb356",
"/css/app.css": "/css/app.css?id=8f6d5dcb7110a726e142",
"/chunks/admin.js": "/chunks/admin.js?id=60df31e17e9a453717dc",
"/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-email.js": "/chunks/app-email.js?id=49806a5c914ca1a14bff",
"/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-settings.js": "/chunks/app-settings.js?id=e23a68dba034c047ff44",
"/chunks/app-setup.js": "/chunks/app-setup.js?id=c1c6fcc091a248b10060",

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

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

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

@@ -1,9 +1,9 @@
<template>
<div v-if="canBePreview" class="preview">
<img v-if="fileInfoDetail[0].type == 'image'" :src="fileInfoDetail[0].thumbnail" :alt="fileInfoDetail[0].name" />
<audio v-else-if="fileInfoDetail[0].type == 'audio'" :src="fileInfoDetail[0].file_url" controlsList="nodownload" controls></audio>
<video v-else-if="fileInfoDetail[0].type == 'video'" controlsList="nodownload" disablePictureInPicture playsinline controls>
<source :src="fileInfoDetail[0].file_url" type="video/mp4">
<img v-if="fileInfoDetail.type == 'image' && fileInfoDetail.thumbnail" :src="fileInfoDetail.thumbnail" :alt="fileInfoDetail.name" />
<audio v-else-if="fileInfoDetail.type == 'audio'" :src="fileInfoDetail.file_url" controlsList="nodownload" controls></audio>
<video v-else-if="fileInfoDetail.type == 'video'" controlsList="nodownload" disablePictureInPicture playsinline controls>
<source :src="fileInfoDetail.file_url" type="video/mp4">
</video>
</div>
</template>
@@ -17,9 +17,9 @@
computed: {
...mapGetters(['fileInfoDetail']),
canBePreview() {
return this.fileInfoDetail[0] && ! includes([
return this.fileInfoDetail && ! includes([
'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 store from './store/index'
import { debounce, includes } from 'lodash'
import { events } from './bus'
import {debounce, includes} from "lodash";
import {events} from './bus'
import axios from 'axios'
import router from '@/router'
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
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.$handleUploading = async function(files, parent_id) {
let fileBuffer = []
// Calculate ceils
let size = this.$store.getters.config.chunkSize,
chunksCeil = Math.ceil(file.size / size);
// Append the file list to fileBuffer array
Array.prototype.push.apply(fileBuffer, files)
// Create chunks
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
store.commit('UPDATE_FILE_COUNT_PROGRESS', {
current: fileSucceed,
total: files.length
})
do {
let isLast = chunks.length === 1,
chunk = chunks.shift(),
attempts = 0
// Reset upload progress to 0
store.commit('UPLOADING_FILE_PROGRESS', 0)
// Set form data
formData.set('file', chunk, filename);
formData.set('parent_id', rootFolder)
formData.set('is_last', isLast);
// Get parent id
let parentFolder = this.$store.getters.currentFolder ? this.$store.getters.currentFolder.unique_id : 0
let rootFolder = parent_id ? parent_id : parentFolder
// Upload chunks
do {
await store.dispatch('uploadFiles', {
form: formData,
fileSize: file.size,
totalUploadedSize: uploadedSize
}).then(() => {
uploadedSize = uploadedSize + chunk.size
}).catch((error) => {
// Upload files
do {
let file = fileBuffer.shift(),
chunks = []
// Count attempts
attempts++
// Calculate ceils
let size = this.$store.getters.config.chunkSize,
chunksCeil = Math.ceil(file.size / size)
// Break uploading proccess
if (error.response.status === 500)
isNotGeneralError = false
// Create chunks
for (let i = 0; i < chunksCeil; i++) {
chunks.push(file.slice(
i * size, Math.min(i * size + size, file.size), file.type
))
}
//Break if mimetype of file is in blacklist or file size exceed upload limit
if(error.response.status === 415 || 413)
isNotGeneralError = false
// 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'
// Show Error
if (attempts === 3)
this.$isSomethingWrong()
})
} while (isNotGeneralError && attempts !== 0 && attempts !== 3)
do {
let isLast = chunks.length === 1,
chunk = chunks.shift(),
attempts = 0
} while (isNotGeneralError && chunks.length !== 0)
// Set form data
formData.set('file', chunk, filename)
formData.set('parent_id', rootFolder)
formData.set('is_last', isLast)
fileSucceed++
// Upload chunks
do {
await store.dispatch('uploadFiles', {
form: formData,
fileSize: file.size,
totalUploadedSize: uploadedSize
}).then(() => {
uploadedSize = uploadedSize + chunk.size
}).catch((error) => {
// Progress file log
store.commit('UPDATE_FILE_COUNT_PROGRESS', {
current: fileSucceed,
total: files.length
})
// Count attempts
attempts++
} while (fileBuffer.length !== 0)
// Break uploading proccess
if (error.response.status === 500)
isNotGeneralError = false
store.commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
}
//Break if mimetype of file is in blacklist
if (error.response.status === 415)
isNotGeneralError = false
Vue.prototype.$uploadFiles = async function (files) {
// Show Error
if (attempts === 3)
this.$isSomethingWrong()
})
} while (isNotGeneralError && attempts !== 0 && attempts !== 3)
if (files.length == 0) return
} 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
store.commit('UPDATE_FILE_COUNT_PROGRESS', {
current: fileSucceed,
total: files.length
})
// Prevent submit empty files
if (event.dataTransfer.items.length == 0) return
} 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
if (event.dataTransfer.items.length == 0) return
Vue.prototype.$isMobile = function () {
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
let files = [...event.dataTransfer.items].map(item => item.getAsFile())
this.$handleUploading(files, parent_id)
}
Vue.prototype.$downloadFile = function(url, filename) {
var anchor = document.createElement('a')
anchor.href = url
anchor.download = filename
document.body.appendChild(anchor)
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
}
}
Vue.prototype.$isMobile = function() {
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)
})
}
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')
}
}
}
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: this.$t('popup_error.title'),
message: this.$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.$checkUploadLimit = function (files) {
let uploadLimit = store.getters.config.uploadLimit
let validate = true
for (let i = 0 ; i<files.length; i++ ) {
if(uploadLimit != 0 && files[i].size > uploadLimit) {
validate = false
events.$emit('alert:open', {
emoji: '😟😟😟',
title: i18n.t('popup_upload_limit.title'),
message: i18n.t('popup_upload_limit.message', {uploadLimit: store.getters.config.uploadLimitFormatted}),
})
break
}
}
return validate
}
}
}
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 router from '@/router'
import { events } from '@/bus'
import { last } from 'lodash'
import {events} from '@/bus'
import {last} from 'lodash'
import axios from 'axios'
import Vue from 'vue'
const defaultState = {
isZippingFiles: false,
}
const actions = {
downloadFiles: ({ commit, getters }) => {
let files = []
moveItem: ({commit, getters, dispatch}, [item_from, to_item]) => {
// get unique_ids of selected files
getters.fileInfoDetail.forEach(file => files.push(file.unique_id))
// Get route
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
let route = getters.sharedDetail && !getters.sharedDetail.protected
? '/api/zip/public/' + router.currentRoute.params.token
: '/api/zip'
axios
.post(route, {
from_type: item_from.type,
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
})
.then(response => {
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 }) => {
})
.catch(() => isSomethingWrong())
},
createFolder: ({commit, getters, dispatch}, folderName) => {
let itemsToMove = []
let items = [noSelectedItem]
// Get route
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
if (!noSelectedItem)
items = getters.fileInfoDetail
axios
.post(route, {
parent_id: getters.currentFolder.unique_id,
name: folderName
})
.then(response => {
commit('ADD_NEW_FOLDER', response.data)
items.forEach(data => itemsToMove.push({
'force_delete': data.deleted_at ? true : false,
'unique_id': data.unique_id,
'type': data.type
}))
events.$emit('scrollTop')
// Remove file preview
if (!noSelectedItem)
commit('CLEAR_FILEINFO_DETAIL')
if ( getters.currentFolder.location !== 'public' ) {
dispatch('getAppData')
}
})
.catch(() => isSomethingWrong())
},
renameItem: ({commit, getters, dispatch}, data) => {
// Get route
let route = getters.sharedDetail && !getters.sharedDetail.protected
? '/api/move/public/' + router.currentRoute.params.token
: '/api/move'
// Updated name in favourites panel
if (getters.permission === 'master' && data.type === 'folder')
commit('UPDATE_NAME_IN_FAVOURITES', data)
axios
.post(route, {
_method: 'post',
to_unique_id: to_item.unique_id,
items: itemsToMove
})
.then(() => {
itemsToMove.forEach(item => {
commit('REMOVE_ITEM', item.unique_id)
commit('INCREASE_FOLDER_ITEM', to_item.unique_id)
// Get route
let route = getters.sharedDetail && ! getters.sharedDetail.protected
? '/api/rename-item/' + data.unique_id + '/public/' + router.currentRoute.params.token
: '/api/rename-item/' + data.unique_id
if (item.type === 'folder')
dispatch('getAppData')
if (getters.currentFolder.location === 'public')
dispatch('getFolderTree')
})
})
.catch(() => Vue.prototype.$isSomethingWrong())
},
createFolder: ({ commit, getters, dispatch }, folderName) => {
axios
.post(route, {
name: data.name,
type: data.type,
_method: 'patch'
})
.then(response => {
commit('CHANGE_ITEM_NAME', response.data)
// Get route
let route = getters.sharedDetail && !getters.sharedDetail.protected
? '/api/create-folder/public/' + router.currentRoute.params.token
: '/api/create-folder'
if (data.type === 'folder' && getters.currentFolder.location !== 'public')
dispatch('getAppData')
})
.catch(() => isSomethingWrong())
},
uploadFiles: ({commit, getters}, {form, fileSize, totalUploadedSize}) => {
return new Promise((resolve, reject) => {
axios
.post(route, {
parent_id: getters.currentFolder.unique_id,
name: folderName
})
.then(response => {
commit('ADD_NEW_FOLDER', response.data)
// Get route
let route = getters.sharedDetail && ! getters.sharedDetail.protected
? '/api/upload/public/' + router.currentRoute.params.token
: '/api/upload'
events.$emit('scrollTop')
axios
.post(route, form, {
headers: {
'Content-Type': 'application/octet-stream'
},
onUploadProgress: event => {
if (getters.currentFolder.location !== 'public')
dispatch('getAppData')
if (getters.currentFolder.location === 'public')
dispatch('getFolderTree')
var percentCompleted = Math.floor(((totalUploadedSize + event.loaded) / fileSize) * 100)
})
.catch(() => Vue.prototype.$isSomethingWrong())
},
renameItem: ({ commit, getters, dispatch }, data) => {
commit('UPLOADING_FILE_PROGRESS', percentCompleted >= 100 ? 100 : percentCompleted)
// Updated name in favourites panel
if (getters.permission === 'master' && data.type === 'folder')
commit('UPDATE_NAME_IN_FAVOURITES', data)
if (percentCompleted >= 100) {
commit('PROCESSING_FILE', true)
}
}
})
.then(response => {
commit('PROCESSING_FILE', false)
// Get route
let route = getters.sharedDetail && !getters.sharedDetail.protected
? '/api/rename-item/' + data.unique_id + '/public/' + router.currentRoute.params.token
: '/api/rename-item/' + data.unique_id
// Check if user is in uploading folder, if yes, than show new file
if (response.data.folder_id == getters.currentFolder.unique_id)
commit('ADD_NEW_ITEMS', response.data)
axios
.post(route, {
name: data.name,
type: data.type,
_method: 'patch'
})
.then(response => {
commit('CHANGE_ITEM_NAME', response.data)
resolve(response)
})
.catch(error => {
commit('PROCESSING_FILE', false)
if (data.type === 'folder' && getters.currentFolder.location !== 'public')
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) => {
reject(error)
// Get route
let route = getters.sharedDetail && !getters.sharedDetail.protected
? '/api/upload/public/' + router.currentRoute.params.token
: '/api/upload'
switch (error.response.status) {
case 423:
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_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
const CancelToken = axios.CancelToken
const source = CancelToken.source()
// Reset uploader
commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
})
})
},
restoreItem: ({commit, getters}, item) => {
axios
.post(route, form, {
cancelToken: source.token,
headers: {
'Content-Type': 'application/octet-stream'
},
onUploadProgress: event => {
let restoreToHome = false
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) {
commit('PROCESSING_FILE', true)
}
}
})
.then(response => {
commit('PROCESSING_FILE', false)
// Remove file preview
commit('CLEAR_FILEINFO_DETAIL')
// Check if user is in uploading folder, if yes, than show new file
if (response.data.folder_id == getters.currentFolder.unique_id)
commit('ADD_NEW_ITEMS', response.data)
axios
.post(getters.api + '/restore-item/' + item.unique_id, {
type: item.type,
to_home: restoreToHome,
_method: 'patch'
})
.catch(() => isSomethingWrong())
},
deleteItem: ({commit, getters, dispatch}, data) => {
resolve(response)
})
.catch(error => {
commit('PROCESSING_FILE', false)
// Remove file
commit('REMOVE_ITEM', data.unique_id)
reject(error)
// Remove item from sidebar
if (getters.permission === 'master') {
switch (error.response.status) {
case 423:
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
}
if (data.type === 'folder')
commit('REMOVE_ITEM_FROM_FAVOURITES', data)
}
// Reset uploader
commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
})
// Remove file preview
commit('CLEAR_FILEINFO_DETAIL')
// Cancel the upload request
events.$on('cancel-upload', () => {
source.cancel()
// Get route
let route = getters.sharedDetail && ! getters.sharedDetail.protected
? '/api/remove-item/' + data.unique_id + '/public/' + router.currentRoute.params.token
: '/api/remove-item/' + data.unique_id
// Hide upload progress bar
commit('PROCESSING_FILE', false)
commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
})
})
},
restoreItem: ({ commit, getters }, item) => {
axios
.post(route, {
_method: 'delete',
data: {
type: data.type,
force_delete: data.deleted_at ? true : false,
},
})
.then(() => {
let restoreToHome = false
// If is folder, update app data
if (data.type === 'folder') {
// Check if file can be restored to home directory
if (getters.currentFolder.location === 'trash')
restoreToHome = true
if (data.unique_id === getters.currentFolder.unique_id) {
// Remove file
commit('REMOVE_ITEM', item.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}])
}
}
// Remove file preview
commit('CLEAR_FILEINFO_DETAIL')
if ( getters.currentFolder.location !== 'public' )
dispatch('getAppData')
}
})
.catch(() => isSomethingWrong())
},
emptyTrash: ({commit, getters}) => {
axios
.post(getters.api + '/restore-item/' + item.unique_id, {
type: item.type,
to_home: restoreToHome,
_method: 'patch'
})
.catch(() => Vue.prototype.$isSomethingWrong())
},
deleteItem: ({ commit, getters, dispatch }, noSelectedItem) => {
// Clear file browser
commit('LOADING_STATE', {loading: true, data: []})
let itemsToDelete = []
let items = [noSelectedItem]
axios
.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
if (!noSelectedItem)
items = getters.fileInfoDetail
// Remove file preview
commit('CLEAR_FILEINFO_DETAIL')
items.forEach(data => {
itemsToDelete.push({
'force_delete': data.deleted_at ? true : false,
'type': data.type,
'unique_id': data.unique_id
})
// 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())
}
// Show success message
events.$emit('success:open', {
title: i18n.t('popup_trashed.title'),
message: i18n.t('popup_trashed.message'),
})
})
.catch(() => isSomethingWrong())
},
}
const mutations = {
ZIPPING_FILE_STATUS(state, status) {
state.isZippingFiles = status
}
}
const getters = {
isZippingFiles: state => state.isZippingFiles
// Show error message
function isSomethingWrong() {
events.$emit('alert:open', {
title: i18n.t('popup_error.title'),
message: i18n.t('popup_error.message'),
})
}
export default {
state: defaultState,
mutations,
actions,
getters
actions,
}