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
2026-04-18 16:22:14 +00:00 · 2020-12-21 18:19:37 +01:00
parent 96faf2de0e 30783d0e5d
commit 2f89f6303a
11 changed files with 321 additions and 233 deletions
--- a/app/Http/Helpers/helpers.php
+++ b/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
 *
--- a/app/Http/Tools/Editor.php
+++ b/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')) {
--- a/resources/js/components/FilesView/FileItemGrid.vue
+++ b/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"/>
--- a/resources/js/components/FilesView/FileItemList.vue
+++ b/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"/>
--- a/resources/js/components/FilesView/FilePreview.vue
+++ b/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">
--- a/resources/js/helpers.js
+++ b/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 {
@@ -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)
        }
@@ -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
--- a/resources/js/i18n/lang/cn.json
+++ b/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": {
--- a/resources/js/i18n/lang/en.json
+++ b/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": {
--- a/resources/js/i18n/lang/sk.json
+++ b/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": {
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue
+++ b/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
                    }
                })
        }
--- a/resources/views/index.blade.php
+++ b/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 }},