💄 update icon files uploaded

Author: marcode24

src/app/core/constants/file.constant.ts

@@ -3,6 +3,21 @@ export const ALLOWED_FILE_TYPES = [
   'image/png',
   'image/jpeg',
   'image/jpg',
-  'image/gif',
-  'application/pdf'
+  'application/pdf',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document', // .docx
+];
+
+export const ICONS = {
+  png: 'bxs-file-png',
+  jpg: 'bxs-file-jpg',
+  jpeg: 'bxs-file-image',
+  pdf: 'bxs-file-pdf',
+} as const;
+
+export const ALLOWED_FILE_EXTENSIONS = [
+  'png',
+  'jpg',
+  'jpeg',
+  'pdf',
+  'docx',
 ];

src/app/core/utils/icon-file.util.ts

@@ -0,0 +1,9 @@
+import { ICONS } from "@constants/file.constant";
+
+export const getIconFile = (type: string): string => {
+  const [category, extension] = type.split('/');
+  if (category === 'image') {
+    return ICONS[extension as keyof typeof ICONS] || 'bxs-file-image';
+  }
+  return ICONS[extension as keyof typeof ICONS] || 'bxs-file';
+};

src/app/shared/modals/upload-files/upload-files.component.html

@@ -17,7 +17,7 @@
             <div class="file" *ngFor="let file of files; let i = index">
               <div class="file-info">
                 <div class="file-icon">
-                  <i class="bx bx-file"></i>
+                  <i class="bx" [ngClass]="getIcon(file)"></i>
                 </div>
                 <span class="file-name">{{ file.name }}</span>
                 <span class="file-size">{{ file.size | fileSize }}</span>
@@ -28,9 +28,14 @@
             </div>
           </div>
         </div>
-        <span class="warning">
-          Peso máximo por archivo: 2MB
-        </span>
+        <div class="messages">
+          <span class="message">
+            Peso máximo por archivo: 2MB
+          </span>
+          <span class="message">
+            Formatos permitidos: {{ allowedFormats() }}
+          </span>
+        </div>
         <div class="actions">
           <button class="btn btn-primary" *ngIf="files && files.length > 0" type="file" (click)="selectFiles()">
             Subir más archivos

src/app/shared/modals/upload-files/upload-files.component.scss

@@ -55,7 +55,7 @@
       flex: 1;
 
       & .file-icon {
-        font-size: 1.5rem;
+        @include fs-1;
         color: var(--fc-purple);
       }
 
@@ -92,10 +92,16 @@
   }
 }
 
-.warning {
-  @include fs-6;
-  @include fw-500;
-  color: var(--fc-purple);
+.messages {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  & .message {
+    @include fs-6;
+    @include fw-500;
+    color: var(--fc-purple);
+  }
 }
 
 .actions {

src/app/shared/modals/upload-files/upload-files.component.ts

@@ -5,7 +5,13 @@ import { Subscription } from 'rxjs';
 import { FileService } from '@services/file.service';
 import { ModalService } from '@services/modal.service';
 
-import { ALLOWED_FILE_TYPES, MAX_FILE_SIZE } from '@constants/file.constant';
+import { getIconFile } from '@utils/icon-file.util';
+
+import {
+  ALLOWED_FILE_EXTENSIONS,
+  ALLOWED_FILE_TYPES,
+  MAX_FILE_SIZE
+} from '@constants/file.constant';
 
 @Component({
   selector: 'app-upload-files',
@@ -67,6 +73,14 @@ export class UploadFilesComponent implements OnInit, OnDestroy {
     this.files = [...this.files, ...files];
   }
 
+  getIcon(file: File): string {
+    return getIconFile(file.type);
+  }
+
+  allowedFormats(): string {
+    return ALLOWED_FILE_EXTENSIONS.map((extension) => `.${extension}`).join(' ');
+  }
+
   validateFiles(): boolean {
     return this.files.length > 0 && this.files.every((file) => file.size < MAX_FILE_SIZE
       && ALLOWED_FILE_TYPES.includes(file.type));

src/styles.scss

@@ -391,3 +391,19 @@ input {
     color: var(--fc-primary);
   }
 }
+
+.bx {
+  &.bxs-file-png,
+  &.bxs-file-jpg,
+  &.bxs-file-image {
+    color: $green;
+  }
+
+  &.bxs-file-pdf {
+    color: $red;
+  }
+
+  &.bxs-file {
+    color: $blue;
+  }
+}