mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-05-13 08:45:01 +00:00
Merge branch 'upload-limit' into bulk-operations
# Conflicts: # app/Http/Helpers/helpers.php # config/vuefilemanager.php # public/chunks/app-others.js # public/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.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
+22
-180
@@ -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
|
||||||
*
|
*
|
||||||
@@ -495,6 +514,7 @@ function get_file_type($file_mimetype)
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get file type from mimetype
|
* Get file type from mimetype
|
||||||
*
|
*
|
||||||
@@ -529,187 +549,9 @@ function get_pretty_name($basename, $name, $mimetype)
|
|||||||
return $name . '.' . $mimetype;
|
return $name . '.' . $mimetype;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Get exif data from jpeg image
|
|
||||||
*
|
|
||||||
* @param $file
|
|
||||||
* @return array
|
|
||||||
*/
|
|
||||||
function get_image_meta_data($file)
|
function get_image_meta_data($file)
|
||||||
{
|
{
|
||||||
if (get_file_type_from_mimetype($file->getMimeType()) === 'jpeg') {
|
if(get_file_type_from_mimetype($file->getMimeType()) === 'jpeg') {
|
||||||
return exif_read_data($file);
|
return exif_read_data($file);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Check if app is in dev mode
|
|
||||||
*
|
|
||||||
* @return bool
|
|
||||||
*/
|
|
||||||
function is_dev()
|
|
||||||
{
|
|
||||||
return env('APP_ENV') === 'local' ? true : false;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param $str
|
|
||||||
* @return bool
|
|
||||||
*/
|
|
||||||
function seems_utf8($str)
|
|
||||||
{
|
|
||||||
$length = strlen($str);
|
|
||||||
for ($i=0; $i < $length; $i++) {
|
|
||||||
$c = ord($str[$i]);
|
|
||||||
if ($c < 0x80) $n = 0; # 0bbbbbbb
|
|
||||||
elseif (($c & 0xE0) == 0xC0) $n=1; # 110bbbbb
|
|
||||||
elseif (($c & 0xF0) == 0xE0) $n=2; # 1110bbbb
|
|
||||||
elseif (($c & 0xF8) == 0xF0) $n=3; # 11110bbb
|
|
||||||
elseif (($c & 0xFC) == 0xF8) $n=4; # 111110bb
|
|
||||||
elseif (($c & 0xFE) == 0xFC) $n=5; # 1111110b
|
|
||||||
else return false; # Does not match any model
|
|
||||||
for ($j=0; $j<$n; $j++) { # n bytes matching 10bbbbbb follow ?
|
|
||||||
if ((++$i == $length) || ((ord($str[$i]) & 0xC0) != 0x80))
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Converts all accent characters to ASCII characters.
|
|
||||||
*
|
|
||||||
* If there are no accent characters, then the string given is just returned.
|
|
||||||
*
|
|
||||||
* @param string $string Text that might have accent characters
|
|
||||||
* @return string Filtered string with replaced "nice" characters.
|
|
||||||
*/
|
|
||||||
function remove_accents($string) {
|
|
||||||
if ( !preg_match('/[\x80-\xff]/', $string) )
|
|
||||||
return $string;
|
|
||||||
|
|
||||||
if (seems_utf8($string)) {
|
|
||||||
$chars = array(
|
|
||||||
// Decompositions for Latin-1 Supplement
|
|
||||||
chr(195).chr(128) => 'A', chr(195).chr(129) => 'A',
|
|
||||||
chr(195).chr(130) => 'A', chr(195).chr(131) => 'A',
|
|
||||||
chr(195).chr(132) => 'A', chr(195).chr(133) => 'A',
|
|
||||||
chr(195).chr(135) => 'C', chr(195).chr(136) => 'E',
|
|
||||||
chr(195).chr(137) => 'E', chr(195).chr(138) => 'E',
|
|
||||||
chr(195).chr(139) => 'E', chr(195).chr(140) => 'I',
|
|
||||||
chr(195).chr(141) => 'I', chr(195).chr(142) => 'I',
|
|
||||||
chr(195).chr(143) => 'I', chr(195).chr(145) => 'N',
|
|
||||||
chr(195).chr(146) => 'O', chr(195).chr(147) => 'O',
|
|
||||||
chr(195).chr(148) => 'O', chr(195).chr(149) => 'O',
|
|
||||||
chr(195).chr(150) => 'O', chr(195).chr(153) => 'U',
|
|
||||||
chr(195).chr(154) => 'U', chr(195).chr(155) => 'U',
|
|
||||||
chr(195).chr(156) => 'U', chr(195).chr(157) => 'Y',
|
|
||||||
chr(195).chr(159) => 's', chr(195).chr(160) => 'a',
|
|
||||||
chr(195).chr(161) => 'a', chr(195).chr(162) => 'a',
|
|
||||||
chr(195).chr(163) => 'a', chr(195).chr(164) => 'a',
|
|
||||||
chr(195).chr(165) => 'a', chr(195).chr(167) => 'c',
|
|
||||||
chr(195).chr(168) => 'e', chr(195).chr(169) => 'e',
|
|
||||||
chr(195).chr(170) => 'e', chr(195).chr(171) => 'e',
|
|
||||||
chr(195).chr(172) => 'i', chr(195).chr(173) => 'i',
|
|
||||||
chr(195).chr(174) => 'i', chr(195).chr(175) => 'i',
|
|
||||||
chr(195).chr(177) => 'n', chr(195).chr(178) => 'o',
|
|
||||||
chr(195).chr(179) => 'o', chr(195).chr(180) => 'o',
|
|
||||||
chr(195).chr(181) => 'o', chr(195).chr(182) => 'o',
|
|
||||||
chr(195).chr(182) => 'o', chr(195).chr(185) => 'u',
|
|
||||||
chr(195).chr(186) => 'u', chr(195).chr(187) => 'u',
|
|
||||||
chr(195).chr(188) => 'u', chr(195).chr(189) => 'y',
|
|
||||||
chr(195).chr(191) => 'y',
|
|
||||||
// Decompositions for Latin Extended-A
|
|
||||||
chr(196).chr(128) => 'A', chr(196).chr(129) => 'a',
|
|
||||||
chr(196).chr(130) => 'A', chr(196).chr(131) => 'a',
|
|
||||||
chr(196).chr(132) => 'A', chr(196).chr(133) => 'a',
|
|
||||||
chr(196).chr(134) => 'C', chr(196).chr(135) => 'c',
|
|
||||||
chr(196).chr(136) => 'C', chr(196).chr(137) => 'c',
|
|
||||||
chr(196).chr(138) => 'C', chr(196).chr(139) => 'c',
|
|
||||||
chr(196).chr(140) => 'C', chr(196).chr(141) => 'c',
|
|
||||||
chr(196).chr(142) => 'D', chr(196).chr(143) => 'd',
|
|
||||||
chr(196).chr(144) => 'D', chr(196).chr(145) => 'd',
|
|
||||||
chr(196).chr(146) => 'E', chr(196).chr(147) => 'e',
|
|
||||||
chr(196).chr(148) => 'E', chr(196).chr(149) => 'e',
|
|
||||||
chr(196).chr(150) => 'E', chr(196).chr(151) => 'e',
|
|
||||||
chr(196).chr(152) => 'E', chr(196).chr(153) => 'e',
|
|
||||||
chr(196).chr(154) => 'E', chr(196).chr(155) => 'e',
|
|
||||||
chr(196).chr(156) => 'G', chr(196).chr(157) => 'g',
|
|
||||||
chr(196).chr(158) => 'G', chr(196).chr(159) => 'g',
|
|
||||||
chr(196).chr(160) => 'G', chr(196).chr(161) => 'g',
|
|
||||||
chr(196).chr(162) => 'G', chr(196).chr(163) => 'g',
|
|
||||||
chr(196).chr(164) => 'H', chr(196).chr(165) => 'h',
|
|
||||||
chr(196).chr(166) => 'H', chr(196).chr(167) => 'h',
|
|
||||||
chr(196).chr(168) => 'I', chr(196).chr(169) => 'i',
|
|
||||||
chr(196).chr(170) => 'I', chr(196).chr(171) => 'i',
|
|
||||||
chr(196).chr(172) => 'I', chr(196).chr(173) => 'i',
|
|
||||||
chr(196).chr(174) => 'I', chr(196).chr(175) => 'i',
|
|
||||||
chr(196).chr(176) => 'I', chr(196).chr(177) => 'i',
|
|
||||||
chr(196).chr(178) => 'IJ',chr(196).chr(179) => 'ij',
|
|
||||||
chr(196).chr(180) => 'J', chr(196).chr(181) => 'j',
|
|
||||||
chr(196).chr(182) => 'K', chr(196).chr(183) => 'k',
|
|
||||||
chr(196).chr(184) => 'k', chr(196).chr(185) => 'L',
|
|
||||||
chr(196).chr(186) => 'l', chr(196).chr(187) => 'L',
|
|
||||||
chr(196).chr(188) => 'l', chr(196).chr(189) => 'L',
|
|
||||||
chr(196).chr(190) => 'l', chr(196).chr(191) => 'L',
|
|
||||||
chr(197).chr(128) => 'l', chr(197).chr(129) => 'L',
|
|
||||||
chr(197).chr(130) => 'l', chr(197).chr(131) => 'N',
|
|
||||||
chr(197).chr(132) => 'n', chr(197).chr(133) => 'N',
|
|
||||||
chr(197).chr(134) => 'n', chr(197).chr(135) => 'N',
|
|
||||||
chr(197).chr(136) => 'n', chr(197).chr(137) => 'N',
|
|
||||||
chr(197).chr(138) => 'n', chr(197).chr(139) => 'N',
|
|
||||||
chr(197).chr(140) => 'O', chr(197).chr(141) => 'o',
|
|
||||||
chr(197).chr(142) => 'O', chr(197).chr(143) => 'o',
|
|
||||||
chr(197).chr(144) => 'O', chr(197).chr(145) => 'o',
|
|
||||||
chr(197).chr(146) => 'OE',chr(197).chr(147) => 'oe',
|
|
||||||
chr(197).chr(148) => 'R',chr(197).chr(149) => 'r',
|
|
||||||
chr(197).chr(150) => 'R',chr(197).chr(151) => 'r',
|
|
||||||
chr(197).chr(152) => 'R',chr(197).chr(153) => 'r',
|
|
||||||
chr(197).chr(154) => 'S',chr(197).chr(155) => 's',
|
|
||||||
chr(197).chr(156) => 'S',chr(197).chr(157) => 's',
|
|
||||||
chr(197).chr(158) => 'S',chr(197).chr(159) => 's',
|
|
||||||
chr(197).chr(160) => 'S', chr(197).chr(161) => 's',
|
|
||||||
chr(197).chr(162) => 'T', chr(197).chr(163) => 't',
|
|
||||||
chr(197).chr(164) => 'T', chr(197).chr(165) => 't',
|
|
||||||
chr(197).chr(166) => 'T', chr(197).chr(167) => 't',
|
|
||||||
chr(197).chr(168) => 'U', chr(197).chr(169) => 'u',
|
|
||||||
chr(197).chr(170) => 'U', chr(197).chr(171) => 'u',
|
|
||||||
chr(197).chr(172) => 'U', chr(197).chr(173) => 'u',
|
|
||||||
chr(197).chr(174) => 'U', chr(197).chr(175) => 'u',
|
|
||||||
chr(197).chr(176) => 'U', chr(197).chr(177) => 'u',
|
|
||||||
chr(197).chr(178) => 'U', chr(197).chr(179) => 'u',
|
|
||||||
chr(197).chr(180) => 'W', chr(197).chr(181) => 'w',
|
|
||||||
chr(197).chr(182) => 'Y', chr(197).chr(183) => 'y',
|
|
||||||
chr(197).chr(184) => 'Y', chr(197).chr(185) => 'Z',
|
|
||||||
chr(197).chr(186) => 'z', chr(197).chr(187) => 'Z',
|
|
||||||
chr(197).chr(188) => 'z', chr(197).chr(189) => 'Z',
|
|
||||||
chr(197).chr(190) => 'z', chr(197).chr(191) => 's',
|
|
||||||
// Euro Sign
|
|
||||||
chr(226).chr(130).chr(172) => 'E',
|
|
||||||
// GBP (Pound) Sign
|
|
||||||
chr(194).chr(163) => '');
|
|
||||||
|
|
||||||
$string = strtr($string, $chars);
|
|
||||||
} else {
|
|
||||||
// Assume ISO-8859-1 if not UTF-8
|
|
||||||
$chars['in'] = chr(128).chr(131).chr(138).chr(142).chr(154).chr(158)
|
|
||||||
.chr(159).chr(162).chr(165).chr(181).chr(192).chr(193).chr(194)
|
|
||||||
.chr(195).chr(196).chr(197).chr(199).chr(200).chr(201).chr(202)
|
|
||||||
.chr(203).chr(204).chr(205).chr(206).chr(207).chr(209).chr(210)
|
|
||||||
.chr(211).chr(212).chr(213).chr(214).chr(216).chr(217).chr(218)
|
|
||||||
.chr(219).chr(220).chr(221).chr(224).chr(225).chr(226).chr(227)
|
|
||||||
.chr(228).chr(229).chr(231).chr(232).chr(233).chr(234).chr(235)
|
|
||||||
.chr(236).chr(237).chr(238).chr(239).chr(241).chr(242).chr(243)
|
|
||||||
.chr(244).chr(245).chr(246).chr(248).chr(249).chr(250).chr(251)
|
|
||||||
.chr(252).chr(253).chr(255);
|
|
||||||
|
|
||||||
$chars['out'] = "EfSZszYcYuAAAAAACEEEEIIIINOOOOOOUUUUYaaaaaaceeeeiiiinoooooouuuuyy";
|
|
||||||
|
|
||||||
$string = strtr($string, $chars['in'], $chars['out']);
|
|
||||||
$double_chars['in'] = array(chr(140), chr(156), chr(198), chr(208), chr(222), chr(223), chr(230), chr(240), chr(254));
|
|
||||||
$double_chars['out'] = array('OE', 'oe', 'AE', 'DH', 'TH', 'ss', 'ae', 'dh', 'th');
|
|
||||||
$string = str_replace($double_chars['in'], $double_chars['out'], $string);
|
|
||||||
}
|
|
||||||
|
|
||||||
return $string;
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -328,8 +328,20 @@ class Editor
|
|||||||
$disk_file_name = basename('chunks/' . $file->getClientOriginalName(), '.part');
|
$disk_file_name = basename('chunks/' . $file->getClientOriginalName(), '.part');
|
||||||
$temp_filename = $file->getClientOriginalName();
|
$temp_filename = $file->getClientOriginalName();
|
||||||
|
|
||||||
|
// File Path
|
||||||
|
$file_path = config('filesystems.disks.local.root') . '/chunks/' . $temp_filename;\
|
||||||
|
|
||||||
// Generate file
|
// Generate file
|
||||||
File::append(config('filesystems.disks.local.root') . '/chunks/' . $temp_filename, $file->get());
|
File::append($file_path, $file->get());
|
||||||
|
|
||||||
|
// Size of file
|
||||||
|
$file_size = File::size($file_path);
|
||||||
|
|
||||||
|
// Size of limit
|
||||||
|
$limit = get_setting('upload_limit');
|
||||||
|
|
||||||
|
// File size handling
|
||||||
|
if( $limit && $file_size > format_bytes($limit)) abort(413);
|
||||||
|
|
||||||
// If last then process file
|
// If last then process file
|
||||||
if ($request->boolean('is_last')) {
|
if ($request->boolean('is_last')) {
|
||||||
|
|||||||
@@ -15,15 +15,15 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--If is file or image, then link item-->
|
<!--If is file or image, then link item-->
|
||||||
<span v-if="isFile" class="file-icon-text">
|
<span v-if="isFile || (isImage && !data.thumbnail)" class="file-icon-text">
|
||||||
{{ data.mimetype }}
|
{{ data.mimetype }}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<!--Folder thumbnail-->
|
<!--Folder thumbnail-->
|
||||||
<FontAwesomeIcon v-if="isFile" class="file-icon" icon="file"/>
|
<FontAwesomeIcon v-if="isFile || (isImage && !data.thumbnail)" class="file-icon" icon="file"/>
|
||||||
|
|
||||||
<!--Image thumbnail-->
|
<!--Image thumbnail-->
|
||||||
<img loading="lazy" v-if="isImage" class="image" :src="data.thumbnail" :alt="data.name"/>
|
<img loading="lazy" v-if="isImage && data.thumbnail" class="image" :src="data.thumbnail" :alt="data.name"/>
|
||||||
|
|
||||||
<!--Else show only folder icon-->
|
<!--Else show only folder icon-->
|
||||||
<FontAwesomeIcon v-if="isFolder" :class="{'is-deleted': isDeleted}" class="folder-icon" icon="folder"/>
|
<FontAwesomeIcon v-if="isFolder" :class="{'is-deleted': isDeleted}" class="folder-icon" icon="folder"/>
|
||||||
|
|||||||
@@ -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>
|
||||||
@@ -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)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
Vendored
+262
-269
@@ -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']
|
let enableEmptyInput = ['mimetypes_blacklist' , 'google_analytics' , 'upload_limit']
|
||||||
|
|
||||||
if (value === '' && !enableEmptyInput.includes(name)) return
|
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 = []
|
|
||||||
|
|
||||||
// Append the file list to fileBuffer array
|
axios.post(this.$store.getters.api + route, {name, value, _method: 'patch'})
|
||||||
Array.prototype.push.apply(fileBuffer, files)
|
.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 = []
|
||||||
|
|
||||||
let fileSucceed = 0
|
// Append the file list to fileBuffer array
|
||||||
|
Array.prototype.push.apply(fileBuffer, files);
|
||||||
|
|
||||||
// Update files count in progressbar
|
let fileSucceed = 0
|
||||||
store.commit('UPDATE_FILE_COUNT_PROGRESS', {
|
|
||||||
current: fileSucceed,
|
|
||||||
total: files.length
|
|
||||||
})
|
|
||||||
|
|
||||||
// Reset upload progress to 0
|
// Update files count in progressbar
|
||||||
store.commit('UPLOADING_FILE_PROGRESS', 0)
|
store.commit('UPDATE_FILE_COUNT_PROGRESS', {
|
||||||
|
current: fileSucceed,
|
||||||
|
total: files.length
|
||||||
|
})
|
||||||
|
|
||||||
// Get parent id
|
// Reset upload progress to 0
|
||||||
let parentFolder = this.$store.getters.currentFolder ? this.$store.getters.currentFolder.unique_id : 0
|
store.commit('UPLOADING_FILE_PROGRESS', 0)
|
||||||
let rootFolder = parent_id ? parent_id : parentFolder
|
|
||||||
|
|
||||||
// Upload files
|
// Get parent id
|
||||||
do {
|
let parentFolder = this.$store.getters.currentFolder ? this.$store.getters.currentFolder.unique_id : 0
|
||||||
let file = fileBuffer.shift(),
|
let rootFolder = parent_id ? parent_id : parentFolder
|
||||||
chunks = []
|
|
||||||
|
|
||||||
// Calculate ceils
|
// Upload files
|
||||||
let size = this.$store.getters.config.chunkSize,
|
do {
|
||||||
chunksCeil = Math.ceil(file.size / size)
|
let file = fileBuffer.shift(),
|
||||||
|
chunks = []
|
||||||
|
|
||||||
// Create chunks
|
// Calculate ceils
|
||||||
for (let i = 0; i < chunksCeil; i++) {
|
let size = this.$store.getters.config.chunkSize,
|
||||||
chunks.push(file.slice(
|
chunksCeil = Math.ceil(file.size / size);
|
||||||
i * size, Math.min(i * size + size, file.size), file.type
|
|
||||||
))
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set Data
|
// Create chunks
|
||||||
let formData = new FormData(),
|
for (let i = 0; i < chunksCeil; i++) {
|
||||||
uploadedSize = 0,
|
chunks.push(file.slice(
|
||||||
isNotGeneralError = true,
|
i * size, Math.min(i * size + size, file.size), file.type
|
||||||
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'
|
}
|
||||||
|
|
||||||
do {
|
// Set Data
|
||||||
let isLast = chunks.length === 1,
|
let formData = new FormData(),
|
||||||
chunk = chunks.shift(),
|
uploadedSize = 0,
|
||||||
attempts = 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'
|
||||||
|
|
||||||
// Set form data
|
do {
|
||||||
formData.set('file', chunk, filename)
|
let isLast = chunks.length === 1,
|
||||||
formData.set('parent_id', rootFolder)
|
chunk = chunks.shift(),
|
||||||
formData.set('is_last', isLast)
|
attempts = 0
|
||||||
|
|
||||||
// Upload chunks
|
// Set form data
|
||||||
do {
|
formData.set('file', chunk, filename);
|
||||||
await store.dispatch('uploadFiles', {
|
formData.set('parent_id', rootFolder)
|
||||||
form: formData,
|
formData.set('is_last', isLast);
|
||||||
fileSize: file.size,
|
|
||||||
totalUploadedSize: uploadedSize
|
|
||||||
}).then(() => {
|
|
||||||
uploadedSize = uploadedSize + chunk.size
|
|
||||||
}).catch((error) => {
|
|
||||||
|
|
||||||
// Count attempts
|
// Upload chunks
|
||||||
attempts++
|
do {
|
||||||
|
await store.dispatch('uploadFiles', {
|
||||||
|
form: formData,
|
||||||
|
fileSize: file.size,
|
||||||
|
totalUploadedSize: uploadedSize
|
||||||
|
}).then(() => {
|
||||||
|
uploadedSize = uploadedSize + chunk.size
|
||||||
|
}).catch((error) => {
|
||||||
|
|
||||||
// Break uploading proccess
|
// Count attempts
|
||||||
if (error.response.status === 500)
|
attempts++
|
||||||
isNotGeneralError = false
|
|
||||||
|
|
||||||
//Break if mimetype of file is in blacklist
|
// Break uploading proccess
|
||||||
if (error.response.status === 415)
|
if (error.response.status === 500)
|
||||||
isNotGeneralError = false
|
isNotGeneralError = false
|
||||||
|
|
||||||
// Show Error
|
//Break if mimetype of file is in blacklist or file size exceed upload limit
|
||||||
if (attempts === 3)
|
if(error.response.status === 415 || 413)
|
||||||
this.$isSomethingWrong()
|
isNotGeneralError = false
|
||||||
})
|
|
||||||
} while (isNotGeneralError && attempts !== 0 && attempts !== 3)
|
|
||||||
|
|
||||||
} while (isNotGeneralError && chunks.length !== 0)
|
// Show Error
|
||||||
|
if (attempts === 3)
|
||||||
|
this.$isSomethingWrong()
|
||||||
|
})
|
||||||
|
} while (isNotGeneralError && attempts !== 0 && attempts !== 3)
|
||||||
|
|
||||||
fileSucceed++
|
} while (isNotGeneralError && chunks.length !== 0)
|
||||||
|
|
||||||
// Progress file log
|
fileSucceed++
|
||||||
store.commit('UPDATE_FILE_COUNT_PROGRESS', {
|
|
||||||
current: fileSucceed,
|
|
||||||
total: files.length
|
|
||||||
})
|
|
||||||
|
|
||||||
} while (fileBuffer.length !== 0)
|
// Progress file log
|
||||||
|
store.commit('UPDATE_FILE_COUNT_PROGRESS', {
|
||||||
|
current: fileSucceed,
|
||||||
|
total: files.length
|
||||||
|
})
|
||||||
|
|
||||||
store.commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
|
} while (fileBuffer.length !== 0)
|
||||||
}
|
|
||||||
|
|
||||||
Vue.prototype.$uploadFiles = async function(files) {
|
store.commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
|
||||||
|
}
|
||||||
|
|
||||||
if (files.length == 0) return
|
Vue.prototype.$uploadFiles = async function (files) {
|
||||||
|
|
||||||
if (!this.$checkFileMimetype(files)) return
|
if (files.length == 0) return
|
||||||
|
|
||||||
this.$handleUploading(files, undefined)
|
if (!this.$checkFileMimetype(files) || !this.$checkUploadLimit(files)) return
|
||||||
}
|
|
||||||
|
|
||||||
Vue.prototype.$uploadExternalFiles = async function(event, parent_id) {
|
this.$handleUploading(files, undefined)
|
||||||
|
}
|
||||||
|
|
||||||
// Prevent submit empty files
|
Vue.prototype.$uploadExternalFiles = async function (event, parent_id) {
|
||||||
if (event.dataTransfer.items.length == 0) return
|
|
||||||
|
|
||||||
// Get files
|
// Prevent submit empty files
|
||||||
let files = [...event.dataTransfer.items].map(item => item.getAsFile())
|
if (event.dataTransfer.items.length == 0) return
|
||||||
|
|
||||||
this.$handleUploading(files, parent_id)
|
// Get files
|
||||||
}
|
let files = [...event.dataTransfer.items].map(item => item.getAsFile());
|
||||||
|
|
||||||
Vue.prototype.$downloadFile = function(url, filename) {
|
this.$handleUploading(files, parent_id)
|
||||||
var anchor = document.createElement('a')
|
}
|
||||||
|
|
||||||
anchor.href = url
|
Vue.prototype.$downloadFile = function (url, filename) {
|
||||||
|
var anchor = document.createElement('a')
|
||||||
|
|
||||||
anchor.download = filename
|
anchor.href = url
|
||||||
|
|
||||||
document.body.appendChild(anchor)
|
anchor.download = filename
|
||||||
|
|
||||||
anchor.click()
|
document.body.appendChild(anchor)
|
||||||
}
|
|
||||||
|
|
||||||
Vue.prototype.$closePopup = function() {
|
anchor.click()
|
||||||
events.$emit('popup:close')
|
}
|
||||||
}
|
|
||||||
|
|
||||||
Vue.prototype.$isThisRoute = function(route, locations) {
|
Vue.prototype.$closePopup = function () {
|
||||||
|
events.$emit('popup:close')
|
||||||
|
}
|
||||||
|
|
||||||
return includes(locations, route.name)
|
Vue.prototype.$isThisRoute = function (route, locations) {
|
||||||
}
|
|
||||||
|
|
||||||
Vue.prototype.$isThisLocation = function(location) {
|
return includes(locations, route.name)
|
||||||
|
}
|
||||||
|
|
||||||
// Get current location
|
Vue.prototype.$isThisLocation = function (location) {
|
||||||
let currentLocation = store.getters.currentFolder && store.getters.currentFolder.location ? store.getters.currentFolder.location : undefined
|
|
||||||
|
|
||||||
// Check if type is object
|
// Get current location
|
||||||
if (typeof location === 'Object' || location instanceof Object) {
|
let currentLocation = store.getters.currentFolder && store.getters.currentFolder.location ? store.getters.currentFolder.location : undefined
|
||||||
return includes(location, currentLocation)
|
|
||||||
|
|
||||||
} else {
|
// Check if type is object
|
||||||
return currentLocation === location
|
if (typeof location === 'Object' || location instanceof Object) {
|
||||||
}
|
return includes(location, currentLocation)
|
||||||
}
|
|
||||||
|
|
||||||
Vue.prototype.$checkPermission = function(type) {
|
} else {
|
||||||
|
return currentLocation === location
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
let currentPermission = store.getters.permission
|
Vue.prototype.$checkPermission = function (type) {
|
||||||
|
|
||||||
// Check if type is object
|
let currentPermission = store.getters.permission
|
||||||
if (typeof type === 'Object' || type instanceof Object) {
|
|
||||||
return includes(type, currentPermission)
|
|
||||||
|
|
||||||
} else {
|
// Check if type is object
|
||||||
return currentPermission === type
|
if (typeof type === 'Object' || type instanceof Object) {
|
||||||
}
|
return includes(type, currentPermission)
|
||||||
}
|
|
||||||
|
|
||||||
Vue.prototype.$isMobile = function() {
|
} else {
|
||||||
const toMatch = [
|
return currentPermission === type
|
||||||
/Android/i,
|
}
|
||||||
/webOS/i,
|
}
|
||||||
/iPhone/i,
|
|
||||||
/iPad/i,
|
|
||||||
/iPod/i,
|
|
||||||
/BlackBerry/i,
|
|
||||||
/Windows Phone/i
|
|
||||||
]
|
|
||||||
|
|
||||||
return toMatch.some(toMatchItem => {
|
Vue.prototype.$isMobile = function () {
|
||||||
return navigator.userAgent.match(toMatchItem)
|
const toMatch = [
|
||||||
})
|
/Android/i,
|
||||||
}
|
/webOS/i,
|
||||||
|
/iPhone/i,
|
||||||
|
/iPad/i,
|
||||||
|
/iPod/i,
|
||||||
|
/BlackBerry/i,
|
||||||
|
/Windows Phone/i
|
||||||
|
]
|
||||||
|
|
||||||
Vue.prototype.$isMinimalScale = function() {
|
return toMatch.some(toMatchItem => {
|
||||||
let sizeType = store.getters.filesViewWidth
|
return navigator.userAgent.match(toMatchItem)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
return sizeType === 'minimal-scale'
|
Vue.prototype.$isMinimalScale = function () {
|
||||||
}
|
let sizeType = store.getters.filesViewWidth
|
||||||
|
|
||||||
Vue.prototype.$isCompactScale = function() {
|
return sizeType === 'minimal-scale'
|
||||||
let sizeType = store.getters.filesViewWidth
|
}
|
||||||
|
|
||||||
return sizeType === 'compact-scale'
|
Vue.prototype.$isCompactScale = function () {
|
||||||
}
|
let sizeType = store.getters.filesViewWidth
|
||||||
|
|
||||||
Vue.prototype.$isFullScale = function() {
|
return sizeType === 'compact-scale'
|
||||||
let sizeType = store.getters.filesViewWidth
|
}
|
||||||
|
|
||||||
return sizeType === 'full-scale'
|
Vue.prototype.$isFullScale = function () {
|
||||||
}
|
let sizeType = store.getters.filesViewWidth
|
||||||
|
|
||||||
Vue.prototype.$isSomethingWrong = function() {
|
return sizeType === 'full-scale'
|
||||||
events.$emit('alert:open', {
|
}
|
||||||
title: i18n.t('popup_error.title'),
|
|
||||||
message: i18n.t('popup_error.message')
|
Vue.prototype.$isSomethingWrong = function () {
|
||||||
})
|
|
||||||
}
|
events.$emit('alert:open', {
|
||||||
Vue.prototype.$checkFileMimetype = function(files) {
|
title: this.$t('popup_error.title'),
|
||||||
let validated = true
|
message: this.$t('popup_error.message'),
|
||||||
let mimetypesBlacklist = store.getters.config.mimetypesBlacklist
|
})
|
||||||
|
}
|
||||||
for (let i = 0; i < files.length; i++) {
|
Vue.prototype.$checkFileMimetype = function(files) {
|
||||||
let fileType = files[i].type.split('/')
|
let validated = true
|
||||||
|
let mimetypesBlacklist = store.getters.config.mimetypesBlacklist
|
||||||
if (!fileType[0]) {
|
|
||||||
fileType[1] = _.last(files[i].name.split('.'))
|
for (let i = 0 ; i<files.length; i++ ) {
|
||||||
}
|
let fileType = files[i].type.split('/')
|
||||||
|
|
||||||
if (mimetypesBlacklist.includes(fileType[1])) {
|
if(!fileType[0]) {
|
||||||
validated = false
|
fileType[1] = _.last(files[i].name.split('.'))
|
||||||
|
}
|
||||||
events.$emit('alert:open', {
|
|
||||||
emoji: '😬😬😬',
|
if(mimetypesBlacklist.includes(fileType[1])) {
|
||||||
title: i18n.t('popup_mimetypes_blacklist.title'),
|
validated = false
|
||||||
message: i18n.t('popup_mimetypes_blacklist.message', { mimetype: fileType[1] })
|
|
||||||
})
|
events.$emit('alert:open', {
|
||||||
}
|
emoji: '😬😬😬',
|
||||||
}
|
title: i18n.t('popup_mimetypes_blacklist.title'),
|
||||||
return validated
|
message: i18n.t('popup_mimetypes_blacklist.message', {mimetype: fileType[1]}),
|
||||||
}
|
})
|
||||||
Vue.prototype.$getDataByLocation = function() {
|
}
|
||||||
|
}
|
||||||
let folder = store.getters.currentFolder
|
return validated
|
||||||
|
}
|
||||||
let actions = {
|
Vue.prototype.$checkUploadLimit = function (files) {
|
||||||
'base': ['getFolder', [{ folder: folder, back: true, init: false, sorting: true }]],
|
let uploadLimit = store.getters.config.uploadLimit
|
||||||
'public': ['browseShared', [{ folder: folder, back: true, init: false, sorting: true }]],
|
let validate = true
|
||||||
'trash': ['getFolder', [{ folder: folder, back: true, init: false, sorting: true }]],
|
|
||||||
'participant_uploads': ['getParticipantUploads'],
|
for (let i = 0 ; i<files.length; i++ ) {
|
||||||
'trash-root': ['getTrash'],
|
if(uploadLimit != 0 && files[i].size > uploadLimit) {
|
||||||
'latest': ['getLatest'],
|
validate = false
|
||||||
'shared': ['getShared']
|
events.$emit('alert:open', {
|
||||||
}
|
emoji: '😟😟😟',
|
||||||
|
title: i18n.t('popup_upload_limit.title'),
|
||||||
this.$store.dispatch(...actions[folder.location])
|
message: i18n.t('popup_upload_limit.message', {uploadLimit: store.getters.config.uploadLimitFormatted}),
|
||||||
|
})
|
||||||
// Get dara of user with favourites tree
|
break
|
||||||
this.$store.dispatch('getAppData')
|
}
|
||||||
|
}
|
||||||
// Get data of Navigator tree
|
return validate
|
||||||
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
|
||||||
@@ -211,6 +211,9 @@
|
|||||||
"username_plac": "输入您的邮件用户名"
|
"username_plac": "输入您的邮件用户名"
|
||||||
},
|
},
|
||||||
"others": {
|
"others": {
|
||||||
|
"upload_limit": "Upload Limit",
|
||||||
|
"upload_limit_plac": "Type your upload limit in MB",
|
||||||
|
"upload_limit_help": "If you want to set max file size limit on single upload, add size of your limit in MB. E.g. 100 means 100 MB and 2 000 means 2 000 MB limit.",
|
||||||
"mimetypes_blacklist": "Mimetypes Blacklist",
|
"mimetypes_blacklist": "Mimetypes Blacklist",
|
||||||
"mimetypes_blacklist_plac":"Add mimetypes to Blacklist" ,
|
"mimetypes_blacklist_plac":"Add mimetypes to Blacklist" ,
|
||||||
"mimetypes_blacklist_help" :"If you want to prevent upload some type of files, just add them to blacklist like this: x-php,mp3,jpeg <br/> Use a comma between each mimetype. Don't use a dot before mimetypes." ,
|
"mimetypes_blacklist_help" :"If you want to prevent upload some type of files, just add them to blacklist like this: x-php,mp3,jpeg <br/> Use a comma between each mimetype. Don't use a dot before mimetypes." ,
|
||||||
@@ -518,8 +521,12 @@
|
|||||||
},
|
},
|
||||||
"title": "选择付款方式"
|
"title": "选择付款方式"
|
||||||
},
|
},
|
||||||
|
"popup_upload_limit": {
|
||||||
|
"title": "You exceed upload limit on single file",
|
||||||
|
"message": "Size of your uploaded file exceed the upload limit ({uploadLimit})."
|
||||||
|
},
|
||||||
"popup_mimetypes_blacklist": {
|
"popup_mimetypes_blacklist": {
|
||||||
"title": "Oh no",
|
"title": "You are trying to upload unsupported file type",
|
||||||
"message": "File of this type ({mimetype}) is not allowed to upload."
|
"message": "File of this type ({mimetype}) is not allowed to upload."
|
||||||
},
|
},
|
||||||
"popup_zipping": {
|
"popup_zipping": {
|
||||||
|
|||||||
@@ -213,6 +213,9 @@
|
|||||||
"username_plac": "Type your mail username"
|
"username_plac": "Type your mail username"
|
||||||
},
|
},
|
||||||
"others": {
|
"others": {
|
||||||
|
"upload_limit": "Upload Limit",
|
||||||
|
"upload_limit_plac": "Type your upload limit in MB",
|
||||||
|
"upload_limit_help": "If you want to set max file size limit on single upload, add size of your limit in MB. E.g. 100 means 100 MB and 2 000 means 2 000 MB limit.",
|
||||||
"mimetypes_blacklist": "Mimetypes Blacklist",
|
"mimetypes_blacklist": "Mimetypes Blacklist",
|
||||||
"mimetypes_blacklist_plac":"Add mimetypes to Blacklist" ,
|
"mimetypes_blacklist_plac":"Add mimetypes to Blacklist" ,
|
||||||
"mimetypes_blacklist_help" :"If you want to prevent upload some type of files, just add them to blacklist like this: x-php,mp3,jpeg <br/> Use a comma between each mimetype. Don't use a dot before mimetypes." ,
|
"mimetypes_blacklist_help" :"If you want to prevent upload some type of files, just add them to blacklist like this: x-php,mp3,jpeg <br/> Use a comma between each mimetype. Don't use a dot before mimetypes." ,
|
||||||
@@ -520,8 +523,12 @@
|
|||||||
},
|
},
|
||||||
"title": "Choose Payment Method"
|
"title": "Choose Payment Method"
|
||||||
},
|
},
|
||||||
|
"popup_upload_limit": {
|
||||||
|
"title": "You exceed upload limit on single file",
|
||||||
|
"message": "Size of your uploaded file exceed the upload limit ({uploadLimit})."
|
||||||
|
},
|
||||||
"popup_mimetypes_blacklist": {
|
"popup_mimetypes_blacklist": {
|
||||||
"title": "Oh No",
|
"title": "You are trying to upload unsupported file type",
|
||||||
"message": "File of this type ({mimetype}) is not allowed to upload."
|
"message": "File of this type ({mimetype}) is not allowed to upload."
|
||||||
},
|
},
|
||||||
"popup_delete_card": {
|
"popup_delete_card": {
|
||||||
|
|||||||
@@ -213,6 +213,9 @@
|
|||||||
"username_plac": "Zadajte svoje používateľské meno pre poštu"
|
"username_plac": "Zadajte svoje používateľské meno pre poštu"
|
||||||
},
|
},
|
||||||
"others": {
|
"others": {
|
||||||
|
"upload_limit": "Limit nahrávania",
|
||||||
|
"upload_limit_plac": "Pridajte veľkosť limitu v MB",
|
||||||
|
"upload_limit_help": "Ak chcete nastaviť limit pre nahrávane jedneho súboru, pridajte veľkosť vášho limitu v MB.",
|
||||||
"mimetypes_blacklist": "Čierna listina mimetypov",
|
"mimetypes_blacklist": "Čierna listina mimetypov",
|
||||||
"mimetypes_blacklist_plac":"Pridajte mimetypy do Čiernej listiny",
|
"mimetypes_blacklist_plac":"Pridajte mimetypy do Čiernej listiny",
|
||||||
"mimetypes_blacklist_help" :"Ak chcete zakázať nahrávanie niektorých typov súborov, jednoducho ich pridajte na čiernu listinu, príklad: x-php, mp3, jpeg <br/> Medzi mimetypmi použite čiarku. Nevkladajte bodku pred mimetyp." ,
|
"mimetypes_blacklist_help" :"Ak chcete zakázať nahrávanie niektorých typov súborov, jednoducho ich pridajte na čiernu listinu, príklad: x-php, mp3, jpeg <br/> Medzi mimetypmi použite čiarku. Nevkladajte bodku pred mimetyp." ,
|
||||||
@@ -520,8 +523,12 @@
|
|||||||
},
|
},
|
||||||
"title": "Vyberte si metódu platby"
|
"title": "Vyberte si metódu platby"
|
||||||
},
|
},
|
||||||
|
"popup_upload_limit": {
|
||||||
|
"title": "Je nám to ľúto",
|
||||||
|
"message": "Veľkosť nahravaného súboru prekročila limit pre nahraávane súbory ({uploadLimit})"
|
||||||
|
},
|
||||||
"popup_mimetypes_blacklist": {
|
"popup_mimetypes_blacklist": {
|
||||||
"title": "Ospravelnujume sa",
|
"title": "Ospravedlňujeme sa",
|
||||||
"message": "Nieje povolené nahrávať tento typ súboru ({mimetype})."
|
"message": "Nieje povolené nahrávať tento typ súboru ({mimetype})."
|
||||||
},
|
},
|
||||||
"popup_zipping": {
|
"popup_zipping": {
|
||||||
|
|||||||
+206
-305
@@ -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
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -89,6 +89,15 @@
|
|||||||
<small class="input-help" v-html="$t('admin_settings.others.mimetypes_blacklist_help')"></small>
|
<small class="input-help" v-html="$t('admin_settings.others.mimetypes_blacklist_help')"></small>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="block-wrapper">
|
||||||
|
<label>{{ $t('admin_settings.others.upload_limit') }}:</label>
|
||||||
|
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Upload Limit" v-slot="{ errors }">
|
||||||
|
<input @input="$updateText('/settings', 'upload_limit', app.uploadLimit)" v-model="app.uploadLimit" :placeholder="$t('admin_settings.others.upload_limit_plac')" type="number" min="0" step="1" :class="{'is-error': errors[0]}"/>
|
||||||
|
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||||
|
</ValidationProvider>
|
||||||
|
<small class="input-help" v-html="$t('admin_settings.others.upload_limit_help')"></small>
|
||||||
|
</div>
|
||||||
|
|
||||||
<FormLabel class="mt-70">
|
<FormLabel class="mt-70">
|
||||||
{{ $t('admin_settings.others.section_cache') }}
|
{{ $t('admin_settings.others.section_cache') }}
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
@@ -163,7 +172,7 @@
|
|||||||
mounted() {
|
mounted() {
|
||||||
axios.get('/api/settings', {
|
axios.get('/api/settings', {
|
||||||
params: {
|
params: {
|
||||||
column: 'contact_email|google_analytics|storage_default|registration|storage_limitation|mimetypes_blacklist'
|
column: 'contact_email|google_analytics|storage_default|registration|storage_limitation|mimetypes_blacklist|upload_limit'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.then(response => {
|
.then(response => {
|
||||||
@@ -175,7 +184,8 @@
|
|||||||
defaultStorage: response.data.storage_default,
|
defaultStorage: response.data.storage_default,
|
||||||
userRegistration: parseInt(response.data.registration),
|
userRegistration: parseInt(response.data.registration),
|
||||||
storageLimitation: parseInt(response.data.storage_limitation),
|
storageLimitation: parseInt(response.data.storage_limitation),
|
||||||
mimetypesBlacklist : response.data.mimetypes_blacklist
|
mimetypesBlacklist : response.data.mimetypes_blacklist,
|
||||||
|
uploadLimit: response.data.upload_limit
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -56,6 +56,8 @@
|
|||||||
storageDefaultSpace: {{ isset($settings->storage_default) ? $settings->storage_default : 5 }},
|
storageDefaultSpace: {{ isset($settings->storage_default) ? $settings->storage_default : 5 }},
|
||||||
storageDefaultSpaceFormatted: '{{ isset($settings->storage_default) ? format_gigabytes($settings->storage_default) : format_gigabytes(5) }}',
|
storageDefaultSpaceFormatted: '{{ isset($settings->storage_default) ? format_gigabytes($settings->storage_default) : format_gigabytes(5) }}',
|
||||||
mimetypesBlacklist: '{{ isset($settings->mimetypes_blacklist) ? $settings->mimetypes_blacklist: null}}',
|
mimetypesBlacklist: '{{ isset($settings->mimetypes_blacklist) ? $settings->mimetypes_blacklist: null}}',
|
||||||
|
uploadLimit: {{ isset($settings->upload_limit) ? format_bytes($settings->upload_limit) : 'undefined' }},
|
||||||
|
uploadLimitFormatted: '{{ isset($settings->upload_limit) ? format_megabytes($settings->upload_limit) : null }}',
|
||||||
|
|
||||||
hasAuthCookie: {{ Cookie::has('token') ? 1 : 0 }},
|
hasAuthCookie: {{ Cookie::has('token') ? 1 : 0 }},
|
||||||
isSaaS: {{ isset($settings->license) && $settings->license === 'Extended' ? 1 : 0 }},
|
isSaaS: {{ isset($settings->license) && $settings->license === 'Extended' ? 1 : 0 }},
|
||||||
|
|||||||
Reference in New Issue
Block a user