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

app/Http/Helpers/helpers.php

@@ -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
  *
@@ -495,6 +514,7 @@ function get_file_type($file_mimetype)
     }
 }
 
+
 /**
  * Get file type from mimetype
  *
@@ -529,187 +549,9 @@ function get_pretty_name($basename, $name, $mimetype)
     return $name . '.' . $mimetype;
 }
 
-/**
- * Get exif data from jpeg image
- *
- * @param $file
- * @return array
- */
 function get_image_meta_data($file)
 {
     if(get_file_type_from_mimetype($file->getMimeType()) === 'jpeg') {
        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;
-}

app/Http/Tools/Editor.php

@@ -328,8 +328,20 @@ class Editor
         $disk_file_name = basename('chunks/' . $file->getClientOriginalName(), '.part');
         $temp_filename = $file->getClientOriginalName();
 
+        // File Path
+        $file_path = config('filesystems.disks.local.root') . '/chunks/' . $temp_filename;\
+
         // 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 ($request->boolean('is_last')) {

resources/js/components/FilesView/FileItemGrid.vue

@@ -15,15 +15,15 @@
                 </div>
 
                 <!--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 }}
                 </span>
 
                 <!--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-->
-                <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-->
                 <FontAwesomeIcon v-if="isFolder" :class="{'is-deleted': isDeleted}" class="folder-icon" icon="folder"/>

resources/js/components/FilesView/FileItemList.vue

@@ -1,30 +1,30 @@
 <template>
 	<div class="file-wrapper" @click.stop="clickedItem" @dblclick="goToItem" spellcheck="false">
 		<!--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" class="file-icon-text">
+				<span v-if="isFile || (isImage && !data.thumbnail)" class="file-icon-text">
 					{{ data.mimetype | limitCharacters }}
 				</span>
 
 				<!--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-->
-                <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-->
 				<FontAwesomeIcon v-if="isFolder" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder" />
@@ -32,7 +32,8 @@
 
 			<!--Name-->
 			<div class="item-name">
-                <b ref="name" @input="renameItem" @keydown.delete.stop :contenteditable="canEditName" class="name">
+				<!--Name-->
+				<b ref="name" @input="renameItem" :contenteditable="canEditName" class="name">
 					{{ itemName }}
 				</b>
 
@@ -55,20 +56,18 @@
 				</div>
 			</div>
 
-            <!--Show item actions-->
+			<!--Go Next icon-->
-            <transition name="slide-from-right">
+			<div class="actions" v-if="$isMobile() && !($checkPermission('visitor') && isFolder)">
-                <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>
 </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'
@@ -78,15 +77,10 @@ export default {
 	props: ['data'],
 	components: {
 		UserPlusIcon,
-        LinkIcon,
+		LinkIcon
-        CheckIcon
 	},
 	computed: {
-        ...mapGetters(['FilePreviewType', 'fileInfoDetail']),
+		...mapGetters(['FilePreviewType']),
-        ...mapGetters({ allData: 'data' }),
-        isClicked() {
-            return this.fileInfoDetail.some(element => element.unique_id == this.data.unique_id)
-        },
 		isFolder() {
 			return this.data.type === 'folder'
 		},
@@ -133,18 +127,14 @@ export default {
 	},
 	data() {
 		return {
+			isClicked: false,
 			area: false,
-            itemName: undefined,
+			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)
 
 			events.$emit('mobileMenu:show')
@@ -158,47 +148,12 @@ export default {
 			this.area = false
 		},
 		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) {
-                    // Click + Ctrl
-
-                    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 Click + Shift + Ctrl dont remove already selected items
-                    if (!e.ctrlKey && !e.metaKey) {
-                        this.$store.commit('CLEAR_FILEINFO_DETAIL')
-                    }
-
-                    //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)
-                }
-            }
-
-            if (!this.mobileMultiSelect && this.$isMobile()) {
 			// Open in mobile version on first click
 			if (this.$isMobile() && this.isFolder) {
 				// Go to folder
@@ -211,19 +166,12 @@ export default {
 
 			if (this.$isMobile()) {
 				if (this.isImage || this.isVideo || this.isAudio) {
-                        this.$store.commit('GET_FILEINFO_DETAIL', this.data)
 					events.$emit('fileFullPreview:show')
 				}
 			}
-            }
 
-            if (this.mobileMultiSelect && this.$isMobile()) {
+			// Load file info detail
-                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)
-                }
-            }
 
 			// Get target classname
 			let itemClass = e.target.className
@@ -238,10 +186,6 @@ export default {
 				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 {
@@ -263,14 +207,9 @@ export default {
 	created() {
 		this.itemName = this.data.name
 
-        events.$on('mobileSelecting:start', () => {
+		events.$on('fileItem:deselect', () => {
-            this.mobileMultiSelect = true
+			// Deselect file
-            this.$store.commit('CLEAR_FILEINFO_DETAIL')
+			this.isClicked = false
-        })
-
-        events.$on('mobileSelecting:stop', () => {
-            this.mobileMultiSelect = false
-            this.$store.commit('CLEAR_FILEINFO_DETAIL')
 		})
 
 		// Change item name
@@ -285,53 +224,6 @@ 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;
@@ -503,40 +395,19 @@ export default {
 			border-radius: 8px;
 		}
 
-        &.no-clicked {
-            background: white !important;
-
-            .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 {
-
-        .select-box {
-            background-color: lighten($dark_mode_foreground, 10%);
-        }
-
-        .select-box-active {
-            background-color: lighten($dark_mode_foreground, 10%);
-
-            .icon {
-                stroke: $theme;
-            }
-        }
-    }
-
 	.file-wrapper {
 		.icon-item {
 			.file-icon {
@@ -556,33 +427,10 @@ export default {
 		}
 
 		.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;

resources/js/components/FilesView/FilePreview.vue

@@ -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" />
+        <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>
     </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)
             }
         },
     }

resources/js/helpers.js

@@ -1,6 +1,6 @@
 import i18n from '@/i18n/index'
 import store from './store/index'
-import { debounce, includes } from 'lodash'
+import {debounce, includes} from "lodash";
 import {events} from './bus'
 import axios from 'axios'
 import router from '@/router'
@@ -10,7 +10,7 @@ const Helpers = {
 
         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
 
@@ -18,7 +18,7 @@ const Helpers = {
                 .catch(error => {
                     events.$emit('alert:open', {
                         title: this.$t('popup_error.title'),
-						message: this.$t('popup_error.message')
+                        message: this.$t('popup_error.message'),
                     })
                 })
         }, 150)
@@ -35,13 +35,13 @@ const Helpers = {
 
             axios.post(this.$store.getters.api + route, formData, {
                 headers: {
-					'Content-Type': 'multipart/form-data'
+                    'Content-Type': 'multipart/form-data',
                 }
             })
                 .catch(error => {
                     events.$emit('alert:open', {
                         title: this.$t('popup_error.title'),
-						message: this.$t('popup_error.message')
+                        message: this.$t('popup_error.message'),
                     })
                 })
         }
@@ -72,12 +72,16 @@ const Helpers = {
             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)
+            Array.prototype.push.apply(fileBuffer, files);
 
             let fileSucceed = 0
 
@@ -101,13 +105,13 @@ const Helpers = {
 
                 // Calculate ceils
                 let size = this.$store.getters.config.chunkSize,
-					chunksCeil = Math.ceil(file.size / size)
+                    chunksCeil = Math.ceil(file.size / size);
 
                 // Create chunks
                 for (let i = 0; i < chunksCeil; i++) {
                     chunks.push(file.slice(
                         i * size, Math.min(i * size + size, file.size), file.type
-					))
+                    ));
                 }
 
                 // Set Data
@@ -123,9 +127,9 @@ const Helpers = {
                         attempts = 0
 
                     // Set form data
-					formData.set('file', chunk, filename)
+                    formData.set('file', chunk, filename);
                     formData.set('parent_id', rootFolder)
-					formData.set('is_last', isLast)
+                    formData.set('is_last', isLast);
 
                     // Upload chunks
                     do {
@@ -144,8 +148,8 @@ const Helpers = {
                             if (error.response.status === 500)
                                 isNotGeneralError = false
 
-							//Break if mimetype of file is in blacklist
+                            //Break if mimetype of file is in blacklist or file size exceed upload limit
-							if (error.response.status === 415)
+                            if(error.response.status === 415 || 413)
                                 isNotGeneralError = false
 
                             // Show Error
@@ -173,7 +177,7 @@ const Helpers = {
 
             if (files.length == 0) return
 
-			if (!this.$checkFileMimetype(files)) return
+            if (!this.$checkFileMimetype(files) || !this.$checkUploadLimit(files)) return
            
             this.$handleUploading(files, undefined)
         }
@@ -184,7 +188,7 @@ const Helpers = {
             if (event.dataTransfer.items.length == 0) return
 
             // Get files
-			let files = [...event.dataTransfer.items].map(item => item.getAsFile())
+            let files = [...event.dataTransfer.items].map(item => item.getAsFile());
 
             this.$handleUploading(files, parent_id)
         }
@@ -272,9 +276,10 @@ const Helpers = {
         }
 
         Vue.prototype.$isSomethingWrong = function () {
+
             events.$emit('alert:open', {
-				title: i18n.t('popup_error.title'),
+                title: this.$t('popup_error.title'),
-				message: i18n.t('popup_error.message')
+                message: this.$t('popup_error.message'),
             })
         }
         Vue.prototype.$checkFileMimetype = function(files) {
@@ -294,40 +299,28 @@ const Helpers = {
                       events.$emit('alert:open', {
                         emoji: '😬😬😬',
                         title: i18n.t('popup_mimetypes_blacklist.title'),
-						message: i18n.t('popup_mimetypes_blacklist.message', { mimetype: fileType[1] })
+                        message: i18n.t('popup_mimetypes_blacklist.message', {mimetype: fileType[1]}),
                     })
                   }
               }
               return validated
         }
-		Vue.prototype.$getDataByLocation = function() {
+        Vue.prototype.$checkUploadLimit = function (files) {
+            let uploadLimit = store.getters.config.uploadLimit
+            let validate = true
 
-			let folder = store.getters.currentFolder
+            for (let i = 0 ; i<files.length; i++ ) {
-
+                if(uploadLimit != 0 && files[i].size > uploadLimit) {
-			let actions = {
+                    validate = false
-				'base': ['getFolder', [{ folder: folder, back: true, init: false, sorting: true }]],
+                    events.$emit('alert:open', {
-				'public': ['browseShared', [{ folder: folder, back: true, init: false, sorting: true }]],
+                        emoji: '😟😟😟',
-				'trash': ['getFolder', [{ folder: folder, back: true, init: false, sorting: true }]],
+                        title: i18n.t('popup_upload_limit.title'),
-				'participant_uploads': ['getParticipantUploads'],
+                        message: i18n.t('popup_upload_limit.message', {uploadLimit: store.getters.config.uploadLimitFormatted}),
-				'trash-root': ['getTrash'],
+                    })
-				'latest': ['getLatest'],
+                    break
-				'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')
             }
+            return validate
         }
     }
 }

resources/js/i18n/lang/cn.json

@@ -211,6 +211,9 @@
 			"username_plac": "输入您的邮件用户名"
 		},
 		"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_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." ,
@@ -518,8 +521,12 @@
 		},
 		"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": {
-		"title": "Oh no",
+		"title": "You are trying to upload unsupported file type",
 		"message": "File of this type ({mimetype}) is not allowed to upload."
 	},
 	"popup_zipping": {

resources/js/i18n/lang/en.json

@@ -213,6 +213,9 @@
 			"username_plac": "Type your mail username"
 		},
 		"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_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." ,
@@ -520,8 +523,12 @@
 		},
 		"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": {
-		"title": "Oh No",
+		"title": "You are trying to upload unsupported file type",
 		"message": "File of this type ({mimetype}) is not allowed to upload."
 	},
 	"popup_delete_card": {

resources/js/i18n/lang/sk.json

@@ -213,6 +213,9 @@
 			"username_plac": "Zadajte svoje používateľské meno pre poštu"
 		},
 		"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_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." ,
@@ -520,8 +523,12 @@
 		},
 		"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": {
-		"title": "Ospravelnujume sa",
+		"title": "Ospravedlňujeme sa",
 		"message": "Nieje povolené nahrávať tento typ súboru ({mimetype})."
 	},
 	"popup_zipping": {

resources/js/store/modules/fileFunctions.js

@@ -3,81 +3,30 @@ import router from '@/router'
 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 }) => {
+    moveItem: ({commit, getters, dispatch}, [item_from, to_item]) => {
-		let files = []
-
-		// 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/zip/public/' + router.currentRoute.params.token
+            ? '/api/move/' + item_from.unique_id + '/public/' + router.currentRoute.params.token
-			: '/api/zip'
+            : '/api/move/' + item_from.unique_id
-
-		commit('ZIPPING_FILE_STATUS', true)
-
-		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 }) => {
-
-		let itemsToMove = []
-		let items = [noSelectedItem]
-
-		// If coming no selected item dont get items to move from fileInfoDetail
-		if (!noSelectedItem)
-			items = getters.fileInfoDetail
-
-		items.forEach(data => itemsToMove.push({
-			'force_delete': data.deleted_at ? true : false,
-			'unique_id': data.unique_id,
-			'type': data.type
-		}))
-
-		// Remove file preview
-		if (!noSelectedItem)
-			commit('CLEAR_FILEINFO_DETAIL')
-
-		// Get route
-		let route = getters.sharedDetail && !getters.sharedDetail.protected
-			? '/api/move/public/' + router.currentRoute.params.token
-			: '/api/move'
 
         axios
             .post(route, {
-				_method: 'post',
+                from_type: item_from.type,
                 to_unique_id: to_item.unique_id,
-				items: itemsToMove
+                _method: 'patch'
             })
             .then(() => {
-				itemsToMove.forEach(item => {
+                commit('REMOVE_ITEM', item_from.unique_id)
-					commit('REMOVE_ITEM', item.unique_id)
                 commit('INCREASE_FOLDER_ITEM', to_item.unique_id)
 
-					if (item.type === 'folder')
+                if (item_from.type === 'folder' && getters.currentFolder.location !== 'public')
                     dispatch('getAppData')
-					if (getters.currentFolder.location === 'public')
+
-						dispatch('getFolderTree')
             })
-			})
+            .catch(() => isSomethingWrong())
-			.catch(() => Vue.prototype.$isSomethingWrong())
     },
     createFolder: ({commit, getters, dispatch}, folderName) => {
 
@@ -96,13 +45,11 @@ const actions = {
 
                 events.$emit('scrollTop')
 
-				if (getters.currentFolder.location !== 'public')
+                if ( getters.currentFolder.location !== 'public' ) {
                     dispatch('getAppData')
-				if (getters.currentFolder.location === 'public')
+                }
-					dispatch('getFolderTree')
-
             })
-			.catch(() => Vue.prototype.$isSomethingWrong())
+            .catch(() => isSomethingWrong())
     },
     renameItem: ({commit, getters, dispatch}, data) => {
 
@@ -126,10 +73,8 @@ const actions = {
 
                 if (data.type === 'folder' && getters.currentFolder.location !== 'public')
                     dispatch('getAppData')
-				if (data.type === 'folder' && getters.currentFolder.location === 'public')
-					dispatch('getFolderTree')
             })
-			.catch(() => Vue.prototype.$isSomethingWrong())
+            .catch(() => isSomethingWrong())
     },
     uploadFiles: ({commit, getters}, {form, fileSize, totalUploadedSize}) => {
         return new Promise((resolve, reject) => {
@@ -139,13 +84,8 @@ const actions = {
                 ? '/api/upload/public/' + router.currentRoute.params.token
                 : '/api/upload'
 
-			// Create cancel token for axios cancelation
-			const CancelToken = axios.CancelToken
-			const source = CancelToken.source()
-
             axios
                 .post(route, form, {
-					cancelToken: source.token,
                     headers: {
                         'Content-Type': 'application/octet-stream'
                     },
@@ -181,41 +121,32 @@ const actions = {
                                 title: i18n.t('popup_exceed_limit.title'),
                                 message: i18n.t('popup_exceed_limit.message')
                             })
-							break
+                            break;
                             case 415:
                                 events.$emit('alert:open', {
                                     emoji: '😬😬😬',
                                     title: i18n.t('popup_mimetypes_blacklist.title'),
                                     message: i18n.t('popup_mimetypes_blacklist.message')
                                 })
-							break
+                            break;
                         case 413:
                             events.$emit('alert:open', {
                                 emoji: '😟😟😟',
-								title: i18n.t('popup_paylod_error.title'),
+                                title: i18n.t('popup_upload_limit.title'),
-								message: i18n.t('popup_paylod_error.message')
+                                message: i18n.t('popup_upload_limit.message', {uploadLimit: getters.config.uploadLimitFormatted})
                             })
-							break
+                            break;
                         default:
                             events.$emit('alert:open', {
                                 title: i18n.t('popup_error.title'),
-								message: i18n.t('popup_error.message')
+                                message: i18n.t('popup_error.message'),
                             })
-							break
+                            break;
                     }
 
                     // Reset uploader
                     commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
                 })
-
-			// Cancel the upload request
-			events.$on('cancel-upload', () => {
-				source.cancel()
-
-				// Hide upload progress bar
-				commit('PROCESSING_FILE', false)
-				commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
-			})
         })
     },
     restoreItem: ({commit, getters}, item) => {
@@ -238,23 +169,9 @@ const actions = {
                 to_home: restoreToHome,
                 _method: 'patch'
             })
-			.catch(() => Vue.prototype.$isSomethingWrong())
+            .catch(() => isSomethingWrong())
     },
-	deleteItem: ({ commit, getters, dispatch }, noSelectedItem) => {
+    deleteItem: ({commit, getters, dispatch}, data) => {
-
-		let itemsToDelete = []
-		let items = [noSelectedItem]
-
-		// If coming no selected item dont get items to move from fileInfoDetail
-		if (!noSelectedItem)
-			items = getters.fileInfoDetail
-
-		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)
@@ -266,36 +183,24 @@ const actions = {
                 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/' + data.unique_id + '/public/' + router.currentRoute.params.token
-			: '/api/remove-item'
+            : '/api/remove-item/' + data.unique_id
 
         axios
             .post(route, {
-				_method: 'post',
+                _method: 'delete',
-				data: itemsToDelete
+                data: {
+                    type: data.type,
+                    force_delete: data.deleted_at ? true : false,
+                },
             })
             .then(() => {
 
-				itemsToDelete.forEach(data => {
-
                 // If is folder, update app data
                 if (data.type === 'folder') {
 
@@ -307,17 +212,12 @@ const actions = {
                             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())
+            .catch(() => isSomethingWrong())
     },
     emptyTrash: ({commit, getters}) => {
 
@@ -334,24 +234,25 @@ const actions = {
 
                 // Remove file preview
                 commit('CLEAR_FILEINFO_DETAIL')
+
+                // Show success message
+                events.$emit('success:open', {
+                    title: i18n.t('popup_trashed.title'),
+                    message: i18n.t('popup_trashed.message'),
                 })
-			.catch(() => Vue.prototype.$isSomethingWrong())
+            })
-	}
+            .catch(() => 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 {
-	state: defaultState,
-	mutations,
     actions,
-	getters
 }

resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue

@@ -89,6 +89,15 @@
                     <small class="input-help" v-html="$t('admin_settings.others.mimetypes_blacklist_help')"></small>
                 </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">
                     {{ $t('admin_settings.others.section_cache') }}
                 </FormLabel>
@@ -163,7 +172,7 @@
         mounted() {
             axios.get('/api/settings', {
                 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 => {
@@ -175,7 +184,8 @@
                         defaultStorage: response.data.storage_default,
                         userRegistration: parseInt(response.data.registration),
                         storageLimitation: parseInt(response.data.storage_limitation),
-                        mimetypesBlacklist : response.data.mimetypes_blacklist
+                        mimetypesBlacklist : response.data.mimetypes_blacklist,
+                        uploadLimit: response.data.upload_limit
                     }
                 })
         }

resources/views/index.blade.php

@@ -56,6 +56,8 @@
             storageDefaultSpace: {{ isset($settings->storage_default) ? $settings->storage_default : 5 }},
             storageDefaultSpaceFormatted: '{{ isset($settings->storage_default) ? format_gigabytes($settings->storage_default) : format_gigabytes(5) }}',
             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 }},
             isSaaS: {{ isset($settings->license) && $settings->license === 'Extended' ? 1 : 0 }},