added validation of uploaded files

Author: k.haritonov

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "laravel-file-manager",
-  "version": "2.5.4",
+  "version": "2.6.0",
   "description": "File manager for Laravel",
   "keywords": [
     "laravel",
@@ -37,7 +37,7 @@
     "eslint": "^6.8.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-vue": "^6.2.2",
-    "node-sass": "^4.14.1",
+    "sass": "^1.53.0",
     "sass-loader": "^8.0.2",
     "vue-template-compiler": "^2.6.12"
   }

package.json

@@ -19,10 +19,21 @@
                      v-bind:key="index">
                     <div class="w-75 text-truncate">
                         <i class="far" v-bind:class="mimeToIcon(item.type)"/>
-                        {{ item.name }}
+                        <span v-bind:class="[notValidFilesIndexes.includes(index) ? 'text-danger' : '']">
+                          {{ item.name }}
+                        </span>
                     </div>
                     <div class="text-right">
-                        {{ bytesToHuman(item.size) }}
+                        <span v-bind:class="[notValidFilesIndexes.includes(index) ? 'text-danger' : '']">
+                            {{ bytesToHuman(item.size) }}
+                        </span>
+                        <button type="button"
+                                class="close"
+                                aria-label="Delete"
+                                v-on:click="deleteFile(index)"
+                                v-bind:title="lang.btn.deleteFile">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
                     </div>
                 </div>
                 <hr>
@@ -33,7 +44,9 @@
                     </div>
                     <div class="text-right">
                         <strong>{{ lang.modal.upload.size }}</strong>
-                        {{ allFilesSize }}
+                        <span v-bind:class="[!isValidAllFilesSize ? 'text-danger' : '']">
+                          {{ allFilesSize }}
+                        </span>
                     </div>
                 </div>
                 <hr>
@@ -81,11 +94,22 @@
                     </div>
                 </div>
             </div>
+            <div class="alert alert-danger" v-if="countFiles && (notValidFilesIndexes.length || !isValidAllFilesSize)">
+                <p v-if="notValidFilesIndexes.length">
+                    {{ lang.modal.upload.noAllowFileTypes }} - {{ $store.state.fm.settings.allowFileTypes.join(', ') }}
+                </p>
+                <p v-if="notValidFilesIndexes.length">
+                    {{ lang.modal.upload.noMaxUploadFileSize }} - {{ bytesToHuman($store.state.fm.settings.maxUploadFileSize * 1024) }}
+                </p>
+                <p v-if="!isValidAllFilesSize">
+                    {{ lang.modal.upload.noMaxPostSize }} - {{ bytesToHuman($store.state.fm.settings.maxPostSize * 1024) }}
+                </p>
+            </div>
         </div>
         <div class="modal-footer">
             <button class="btn"
-                    v-bind:class="[countFiles ? 'btn-info' : 'btn-light']"
-                    v-bind:disabled="!countFiles"
+                    v-bind:class="[countFiles && !notValidFilesIndexes.length && isValidAllFilesSize ? 'btn-info' : 'btn-light']"
+                    v-bind:disabled="!countFiles || notValidFilesIndexes.length || !isValidAllFilesSize"
                     v-on:click="uploadFiles">{{ lang.btn.submit }}
             </button>
             <button class="btn btn-light" v-on:click="hideModal()">{{ lang.btn.cancel }}</button>
@@ -142,6 +166,38 @@ export default {
       return this.bytesToHuman(size);
     },
 
+    notValidFilesIndexes() {
+      const indexes = [];
+
+      for (let i = 0; i < this.newFiles.length; i += 1) {
+        const ext = this.newFiles[i].name.split('.').pop();
+        if (
+          (
+            this.$store.state.fm.settings.allowFileTypes.length
+            && !this.$store.state.fm.settings.allowFileTypes.includes(ext)
+          )
+          || (
+            this.$store.state.fm.settings.maxUploadFileSize !== null
+            && this.newFiles[i].size > this.$store.state.fm.settings.maxUploadFileSize * 1024
+          )
+        ) {
+          indexes.push(i);
+        }
+      }
+
+      return indexes;
+    },
+
+    isValidAllFilesSize() {
+      let size = 0;
+
+      for (let i = 0; i < this.newFiles.length; i += 1) {
+        size += this.newFiles[i].size;
+      }
+
+      return this.$store.state.fm.settings.maxPostSize === null || size <= this.$store.state.fm.settings.maxPostSize * 1024;
+    },
+
   },
   methods: {
     /**
@@ -178,6 +234,22 @@ export default {
         });
       }
     },
+
+    /**
+     * Delete file
+     * @param index
+     */
+    deleteFile(index) {
+      const dt = new DataTransfer();
+
+      for (let i = 0; i < this.newFiles.length; i += 1) {
+        if (i !== index) {
+          dt.items.add(this.newFiles[i]);
+        }
+      }
+
+      this.newFiles = dt.files;
+    },
   },
 };
 </script>

src/components/modals/views/Upload.vue

@@ -24,6 +24,7 @@ const ar = {
     upload: 'رفع',
     uploadSelect: 'اختر الملفات',
     hidden: 'الملفات المخفية',
+    deleteFile: 'Delete file',
   },
   clipboard: {
     actionType: 'نوع',
@@ -123,6 +124,9 @@ const ar = {
       size: 'الحجم:',
       skip: 'تخطي',
       title: 'رفع الملفات',
+      noAllowFileTypes: 'The file extension is not on the list of allowed uploads',
+      noMaxUploadFileSize: 'The maximum file upload size has been exceeded',
+      noMaxPostSize: 'The maximum size of uploaded files has been exceeded',
     },
     editor: {
       title: 'محرر',

src/lang/ar.js

@@ -25,6 +25,7 @@ const cs = {
     upload: 'Nahrát',
     uploadSelect: 'Vybrat soubory',
     hidden: ' Skryté soubory',
+    deleteFile: 'Delete file',
   },
   clipboard: {
     actionType: 'Typ',
@@ -124,6 +125,9 @@ const cs = {
       size: 'Velikost:',
       skip: 'Přeskočit',
       title: 'Nahrát soubory',
+      noAllowFileTypes: 'The file extension is not on the list of allowed uploads',
+      noMaxUploadFileSize: 'The maximum file upload size has been exceeded',
+      noMaxPostSize: 'The maximum size of uploaded files has been exceeded',
     },
     editor: {
       title: 'Editor',

src/lang/cs.js

@@ -24,6 +24,7 @@ const de = {
     upload: 'Hochladen',
     uploadSelect: 'Auswählen',
     hidden: ' Versteckte Dateien',
+    deleteFile: 'Delete file',
   },
   clipboard: {
     actionType: 'Type',
@@ -123,6 +124,9 @@ const de = {
       size: 'Größe:',
       skip: 'Überspringen',
       title: 'Hochladen von Dateien',
+      noAllowFileTypes: 'The file extension is not on the list of allowed uploads',
+      noMaxUploadFileSize: 'The maximum file upload size has been exceeded',
+      noMaxPostSize: 'The maximum size of uploaded files has been exceeded',
     },
     editor: {
       title: 'Editor',

src/lang/de.js

@@ -24,6 +24,7 @@ const en = {
     upload: 'Upload',
     uploadSelect: 'Select files',
     hidden: ' Hidden files',
+    deleteFile: 'Delete file',
   },
   clipboard: {
     actionType: 'Type',
@@ -123,6 +124,9 @@ const en = {
       size: 'Size:',
       skip: 'Skip',
       title: 'Upload files',
+      noAllowFileTypes: 'The file extension is not on the list of allowed uploads',
+      noMaxUploadFileSize: 'The maximum file upload size has been exceeded',
+      noMaxPostSize: 'The maximum size of uploaded files has been exceeded',
     },
     editor: {
       title: 'Editor',

src/lang/en.js

@@ -25,6 +25,7 @@ const es = {
     upload: 'Subir',
     uploadSelect: 'Seleccionar archivos',
     hidden: ' Archivos ocultos',
+    deleteFile: 'Delete file',
   },
   clipboard: {
     actionType: 'Tipo',
@@ -124,6 +125,9 @@ const es = {
       size: 'Size:',
       skip: 'Omitir',
       title: 'Subir archivos',
+      noAllowFileTypes: 'The file extension is not on the list of allowed uploads',
+      noMaxUploadFileSize: 'The maximum file upload size has been exceeded',
+      noMaxPostSize: 'The maximum size of uploaded files has been exceeded',
     },
     editor: {
       title: 'Editor',

src/lang/es.js

@@ -25,6 +25,7 @@ const fa = {
     upload: 'بارگذاری',
     uploadSelect: 'انتخاب فایل',
     hidden: ' فایل های مخفی',
+    deleteFile: 'Delete file',
   },
   clipboard: {
     actionType: 'نوع',
@@ -124,6 +125,9 @@ const fa = {
       size: 'اندازه:',
       skip: 'رد شدن',
       title: 'بارگزاری فایل ها',
+      noAllowFileTypes: 'The file extension is not on the list of allowed uploads',
+      noMaxUploadFileSize: 'The maximum file upload size has been exceeded',
+      noMaxPostSize: 'The maximum size of uploaded files has been exceeded',
     },
     editor: {
       title: 'ویرایشگر',

src/lang/fa.js

@@ -24,6 +24,7 @@ const fr = {
     upload: 'Télécharger',
     uploadSelect: 'Sélectionner fichiers',
     hidden: ' Masquer fichiers',
+    deleteFile: 'Delete file',
   },
   clipboard: {
     actionType: 'Type',
@@ -123,6 +124,9 @@ const fr = {
       size: 'Taille:',
       skip: 'Passer',
       title: 'Télécharger fichiers',
+      noAllowFileTypes: 'The file extension is not on the list of allowed uploads',
+      noMaxUploadFileSize: 'The maximum file upload size has been exceeded',
+      noMaxPostSize: 'The maximum size of uploaded files has been exceeded',
     },
     editor: {
       title: 'Editeur',

src/lang/fr.js

@@ -25,6 +25,7 @@ const it = {
     upload: 'Upload',
     uploadSelect: 'Seleziona files',
     hidden: ' Files Nascosti',
+    deleteFile: 'Delete file',
   },
   clipboard: {
     actionType: 'Tipo',
@@ -124,6 +125,9 @@ const it = {
       size: 'Dim.:',
       skip: 'Salta',
       title: 'Carica files',
+      noAllowFileTypes: 'The file extension is not on the list of allowed uploads',
+      noMaxUploadFileSize: 'The maximum file upload size has been exceeded',
+      noMaxPostSize: 'The maximum size of uploaded files has been exceeded',
     },
     editor: {
       title: 'Editor',

src/lang/it.js

@@ -26,6 +26,7 @@ const nl = {
     upload: 'Upload',
     uploadSelect: 'Select files',
     hidden: ' Verborgen bestanden',
+    deleteFile: 'Delete file',
   },
   clipboard: {
     actionType: 'Type',
@@ -125,6 +126,9 @@ const nl = {
       size: 'Size:',
       skip: 'Skip',
       title: 'Upload files',
+      noAllowFileTypes: 'The file extension is not on the list of allowed uploads',
+      noMaxUploadFileSize: 'The maximum file upload size has been exceeded',
+      noMaxPostSize: 'The maximum size of uploaded files has been exceeded',
     },
     editor: {
       title: 'Editor',

src/lang/nl.js

@@ -24,6 +24,7 @@ const pl = {
     upload: 'Wyślij plik',
     uploadSelect: 'Wybierz pliki',
     hidden: 'Ukryte pliki',
+    deleteFile: 'Delete file',
   },
   clipboard: {
     actionType: 'Rodzaj',
@@ -123,6 +124,9 @@ const pl = {
       size: 'Rozmiar:',
       skip: 'Pomiń',
       title: 'Prześlij pliki',
+      noAllowFileTypes: 'The file extension is not on the list of allowed uploads',
+      noMaxUploadFileSize: 'The maximum file upload size has been exceeded',
+      noMaxPostSize: 'The maximum size of uploaded files has been exceeded',
     },
     editor: {
       title: 'Edytor',

src/lang/pl.js

@@ -25,6 +25,7 @@ const pt_BR = {
     upload: 'Upload',
     uploadSelect: 'Selecionar arquivos',
     hidden: ' Arquivos ocultos',
+    deleteFile: 'Delete file',
   },
   clipboard: {
     actionType: 'Formato',
@@ -124,6 +125,9 @@ const pt_BR = {
       size: 'Tamanho:',
       skip: 'Pular',
       title: 'Upload de arquivos',
+      noAllowFileTypes: 'The file extension is not on the list of allowed uploads',
+      noMaxUploadFileSize: 'The maximum file upload size has been exceeded',
+      noMaxPostSize: 'The maximum size of uploaded files has been exceeded',
     },
     editor: {
       title: 'Editor',

src/lang/pt_BR.js

@@ -24,6 +24,7 @@ const ru = {
     upload: 'Загрузить',
     uploadSelect: 'Выбрать файлы',
     hidden: 'Скрытые файлы',
+    deleteFile: 'Удалить файл',
   },
   clipboard: {
     actionType: 'Тип операции',
@@ -123,6 +124,9 @@ const ru = {
       size: 'Размер:',
       skip: 'Пропустить',
       title: 'Загрузить файлы',
+      noAllowFileTypes: 'Расширение файла не входит в список разрешенных для загрузки',
+      noMaxUploadFileSize: 'Превышен максимальный размер загружаемого файла',
+      noMaxPostSize: 'Превышен максимальный размер загружаемых файлов',
     },
     editor: {
       title: 'Редактор',

src/lang/ru.js

@@ -25,6 +25,7 @@ const sr = {
     upload: 'Upload',
     uploadSelect: 'Izaberi datoteke',
     hidden: ' Skrivene datoteke',
+    deleteFile: 'Delete file',
   },
   clipboard: {
     actionType: 'Tip operacije',
@@ -124,6 +125,9 @@ const sr = {
       size: 'Veličina:',
       skip: 'Preskoči',
       title: 'DOdaj fajlove',
+      noAllowFileTypes: 'The file extension is not on the list of allowed uploads',
+      noMaxUploadFileSize: 'The maximum file upload size has been exceeded',
+      noMaxPostSize: 'The maximum size of uploaded files has been exceeded',
     },
     editor: {
       title: 'Editor',

src/lang/sr.js

@@ -24,6 +24,7 @@ const tr = {
     upload: 'Yükle',
     uploadSelect: 'Dosyaları seç',
     hidden: ' Gizli dosyalar',
+    deleteFile: 'Delete file',
   },
   clipboard: {
     actionType: 'İşlem türü',
@@ -123,6 +124,9 @@ const tr = {
       size: 'Boyut:',
       skip: 'Atla',
       title: 'Dosyaları yükle',
+      noAllowFileTypes: 'The file extension is not on the list of allowed uploads',
+      noMaxUploadFileSize: 'The maximum file upload size has been exceeded',
+      noMaxPostSize: 'The maximum size of uploaded files has been exceeded',
     },
     editor: {
       title: 'Editör',