Merge branch 'upload-limit'

# 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
  *

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

@@ -16,15 +16,15 @@
             <!--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"/>

resources/js/components/FilesView/FilePreview.vue

@@ -1,6 +1,6 @@
 <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[0].type == 'image' && fileInfoDetail[0].thumbnail" :src="fileInfoDetail[0].thumbnail" :alt="fileInfoDetail[0].name" />
         <audio v-else-if="fileInfoDetail[0].type == 'audio'" :src="fileInfoDetail[0].file_url" controlsList="nodownload" controls></audio>
         <video v-else-if="fileInfoDetail[0].type == 'video'" controlsList="nodownload" disablePictureInPicture playsinline controls>
             <source :src="fileInfoDetail[0].file_url" type="video/mp4">

resources/js/helpers.js

@@ -1,29 +1,29 @@
 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 {events} from './bus'
 import axios from 'axios'
 import router from '@/router'
 
 const Helpers = {
     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
 
-			axios.post(this.$store.getters.api + route, { name, value, _method: 'patch' })
+            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')
+                        message: this.$t('popup_error.message'),
                     })
                 })
         }, 150)
 
-		Vue.prototype.$updateImage = function(route, name, image) {
+        Vue.prototype.$updateImage = function (route, name, image) {
 
             // Create form
             let formData = new FormData()
@@ -35,18 +35,18 @@ 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'),
                     })
                 })
         }
 
-		Vue.prototype.$scrollTop = function() {
+        Vue.prototype.$scrollTop = function () {
             var container = document.getElementById('vue-file-manager')
 
             if (container) {
@@ -54,30 +54,34 @@ const Helpers = {
             }
         }
 
-		Vue.prototype.$getImage = function(source) {
+        Vue.prototype.$getImage = function (source) {
             return source ? this.$store.getters.config.host + '/' + source : ''
         }
 
-		Vue.prototype.$getCreditCardBrand = function(brand) {
+        Vue.prototype.$getCreditCardBrand = function (brand) {
             return `/assets/icons/${brand}.svg`
         }
 
-		Vue.prototype.$getInvoiceLink = function(customer, id) {
+        Vue.prototype.$getInvoiceLink = function (customer, id) {
             return '/invoice/' + customer + '/' + id
         }
 
-		Vue.prototype.$openImageOnNewTab = function(source) {
+        Vue.prototype.$openImageOnNewTab = function (source) {
             let win = window.open(source, '_blank')
 
             win.focus()
         }
 
-		Vue.prototype.$handleUploading = async function(files, parent_id) {
+        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 {
@@ -145,7 +149,7 @@ const Helpers = {
                                 isNotGeneralError = false
 
                             //Break if mimetype of file is in blacklist
-							if (error.response.status === 415)
+                            if(error.response.status === 415)
                                 isNotGeneralError = false
 
                             // Show Error
@@ -169,7 +173,7 @@ const Helpers = {
             store.commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
         }
 
-		Vue.prototype.$uploadFiles = async function(files) {
+        Vue.prototype.$uploadFiles = async function (files) {
 
             if (files.length == 0) return
 
@@ -178,18 +182,18 @@ const Helpers = {
             this.$handleUploading(files, undefined)
         }
 
-		Vue.prototype.$uploadExternalFiles = async function(event, parent_id) {
+        Vue.prototype.$uploadExternalFiles = async function (event, parent_id) {
 
             // Prevent submit empty files
             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)
         }
 
-		Vue.prototype.$downloadFile = function(url, filename) {
+        Vue.prototype.$downloadFile = function (url, filename) {
             var anchor = document.createElement('a')
 
             anchor.href = url
@@ -201,16 +205,16 @@ const Helpers = {
             anchor.click()
         }
 
-		Vue.prototype.$closePopup = function() {
+        Vue.prototype.$closePopup = function () {
             events.$emit('popup:close')
         }
 
-		Vue.prototype.$isThisRoute = function(route, locations) {
+        Vue.prototype.$isThisRoute = function (route, locations) {
 
             return includes(locations, route.name)
         }
 
-		Vue.prototype.$isThisLocation = function(location) {
+        Vue.prototype.$isThisLocation = function (location) {
 
             // Get current location
             let currentLocation = store.getters.currentFolder && store.getters.currentFolder.location ? store.getters.currentFolder.location : undefined
@@ -224,7 +228,7 @@ const Helpers = {
             }
         }
 
-		Vue.prototype.$checkPermission = function(type) {
+        Vue.prototype.$checkPermission = function (type) {
 
             let currentPermission = store.getters.permission
 
@@ -237,7 +241,7 @@ const Helpers = {
             }
         }
 
-		Vue.prototype.$isMobile = function() {
+        Vue.prototype.$isMobile = function () {
             const toMatch = [
                 /Android/i,
                 /webOS/i,
@@ -253,19 +257,19 @@ const Helpers = {
             })
         }
 
-		Vue.prototype.$isMinimalScale = function() {
+        Vue.prototype.$isMinimalScale = function () {
             let sizeType = store.getters.filesViewWidth
 
             return sizeType === 'minimal-scale'
         }
 
-		Vue.prototype.$isCompactScale = function() {
+        Vue.prototype.$isCompactScale = function () {
             let sizeType = store.getters.filesViewWidth
 
             return sizeType === 'compact-scale'
         }
 
-		Vue.prototype.$isFullScale = function() {
+        Vue.prototype.$isFullScale = function () {
             let sizeType = store.getters.filesViewWidth
 
             return sizeType === 'full-scale'
@@ -300,6 +304,25 @@ const Helpers = {
 			}
 			return validated
 		}
+
+        Vue.prototype.$checkUploadLimit = function (files) {
+            let uploadLimit = store.getters.config.uploadLimit
+            let validate = true
+
+            for (let i = 0 ; i<files.length; i++ ) {
+                if(uploadLimit != 0 && files[i].size > uploadLimit) {
+                    validate = false
+                    events.$emit('alert:open', {
+                        emoji: '😟😟😟',
+                        title: i18n.t('popup_upload_limit.title'),
+                        message: i18n.t('popup_upload_limit.message', {uploadLimit: store.getters.config.uploadLimitFormatted}),
+                    })
+                    break
+                }
+            }
+            return validate
+        }
+
 		Vue.prototype.$getDataByLocation = function() {
 
 			let folder = store.getters.currentFolder

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/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 }},