upload-limit v0.1

resources/js/helpers.js

@@ -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
 
@@ -148,8 +148,8 @@ const Helpers = {
                             if (error.response.status === 500)
                                 isNotGeneralError = false
 
-                            //Break if mimetype of file is in blacklist
-                            if(error.response.status === 415)
+                            //Break if mimetype of file is in blacklist or file size exceed upload limit
+                            if(error.response.status === 415 || 413)
                                 isNotGeneralError = false
 
                             // Show Error
@@ -177,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)
         }
@@ -307,6 +307,27 @@ 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(files[i].size > uploadLimit * 1000000 ) {
+                    validate = false 
+                    events.$emit('alert:open', {
+                        emoji: '😬😬😬',
+                        title: i18n.t('popup_upload_limit.title'),
+                        message: i18n.t('popup_upload_limit.message', {uploadLimit: uploadLimit}),
+                    })
+                    break 
+            }else {
+                validate = true
+                }
+            }
+
+            return validate
+           
+        }
     }
 }
 

resources/js/i18n/lang/cn.json

@@ -208,6 +208,9 @@
 			"username_plac": "输入您的邮件用户名"
 		},
 		"others": {
+			"upload_limit": "Upload Limit",
+			"upload_limit_plac": "Type your upload limit in MB",
+			"upload_limit_help": "If you want make a limit of files size upload add size of you'r limit in MB",
 			"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." ,
@@ -494,6 +497,10 @@
 		},
 		"title": "选择付款方式"
 	},
+	"popup_upload_limit": {
+		"title": "Oh No",
+		"message": "Size of your file upload exceed the upload limit ({uploadLimit} MB)"
+	},
 	"popup_mimetypes_blacklist": {
 		"title": "Oh no",
 		"message": "File of this type ({mimetype}) is not allowed to upload."

resources/js/i18n/lang/en.json

@@ -210,6 +210,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 make a limit of files size upload add size of you'r limit in MB",
 			"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." ,
@@ -496,6 +499,10 @@
 		},
 		"title": "Choose Payment Method"
 	},
+	"popup_upload_limit": {
+		"title": "Oh No",
+		"message": "Size of your file upload exceed the upload limit ({uploadLimit} MB)"
+	},
 	"popup_mimetypes_blacklist": {
 		"title": "Oh No",
 		"message": "File of this type ({mimetype}) is not allowed to upload."

resources/js/i18n/lang/sk.json

@@ -210,6 +210,9 @@
 			"username_plac": "Zadajte svoje používateľské meno pre poštu"
 		},
 		"others": {
+			"upload_limit": "Limit pre velkost nahrávaného súbor",
+			"upload_limit_plac": "Pridajte veľkosť limitu v MB",
+			"upload_limit_help": "Ak chcete vytvoriť limit pre nahravane súbory 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." ,
@@ -496,6 +499,10 @@
 		},
 		"title": "Vyberte si metódu platby"
 	},
+	"popup_upload_limit": {
+		"title": "Je nám ľúto",
+		"message": "Veľkosť nahravaneho súboru prekročila limit pre nahravane súbory ({uploadLimit} MB)"
+	},
 	"popup_mimetypes_blacklist": {
 		"title": "Ospravelnujume sa",
 		"message": "Nieje povolené nahrávať tento typ súboru ({mimetype})."

resources/js/store/modules/fileFunctions.js

@@ -132,8 +132,8 @@ const actions = {
                         case 413:
                             events.$emit('alert:open', {
                                 emoji: '😟😟😟',
-                                title: i18n.t('popup_paylod_error.title'),
-                                message: i18n.t('popup_paylod_error.message')
+                                title: i18n.t('popup_upload_limit.title'),
+                                message: i18n.t('popup_upload_limit.message', {uploadLimit: getters.config.uploadLimit})
                             })
                             break;
                         default:

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="Mimetypes Blacklist" 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" :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
                     }
                 })
         }