@dropi/ui-components 1.0.0

package/src/components-source/dropi-file-upload/dropi-file-upload.component.ts

@@ -0,0 +1,329 @@
+import { Component, EventEmitter, Input, NgZone, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { DropZoneComponent } from './drop-zone/drop-zone.component';
+import {
+  FILE_TYPE_MAP,
+  FileItem,
+  UploadFileState,
+  UploadParams,
+} from '../../utilities/interfaces/ui/upload.model';
+import { FileListComponent } from './file-list/file-list.component';
+import { UploadFileService } from '@app/services/ui/upload-file.service';
+import { AlertComponent } from '../alert/alert.component';
+
+@Component({
+  selector: 'app-dropi-file-upload',
+  standalone: true,
+  imports: [CommonModule, TranslateModule, DropZoneComponent, FileListComponent, AlertComponent],
+  templateUrl: './dropi-file-upload.component.html',
+  styleUrls: ['./dropi-file-upload.component.scss'],
+})
+export class DropiFileUploadComponent {
+  /**
+   * Parámetros de configuración del uploader.
+   *
+   * Cada campo define:
+   * - `title`: Título que se muestra arriba.
+   * - `label`: Subtituulo para informacion adiicional.
+   * - `previewType`: ‘card’ o ‘grid’ para vista previa de las imágenes.
+   * - `multiple`: Permitir varios archivos.
+   * - `maxFiles`: Límite de archivos.
+   * - `maxFileSizeMB`: Tamaño máximo por archivo (MB).
+   * - `accept`: string[]. Extensiones permitidas separadas por comas, el listado está en `FILE_TYPE_MAP`.
+   * - `compress`: Comprimir imágenes.
+   * - `maxWidth`/`maxHeight`: Dimensiones máximas si se comprimen.
+   * - `path`: Ruta donde el backend guarda las imágenes.
+   *
+   * @type {UploadParams}
+   */
+  @Input() params: UploadParams = {
+    title: '',
+    label: '',
+    previewType: 'card',
+    multiple: false,
+    maxFiles: 1,
+    maxFileSizeMB: 10,
+    accept: [],
+    compress: false,
+    maxHeight: 1000,
+    maxWidth: 1000,
+    path: '',
+    onlyView: false,
+    viewDragAndDrop: false
+  };
+  /**
+   * Emite las URLs de los archivos subidos exitosamente.
+   *
+   * Se dispara cada vez que termina la subida de un archivo.
+   *
+   * @type {EventEmitter<string[]>}
+   */
+  @Output() uploadedUrlsChange = new EventEmitter<string[]>();
+
+  dragOver = false;
+  selectedFiles: FileItem[] = [];
+  error: boolean = false;
+  errorMessage: string = '';
+
+  constructor(
+    private readonly uploadFileService: UploadFileService,
+    private readonly zone: NgZone,
+  ) {}
+
+  /**
+   * Establece imágenes precargadas en el componente a partir de una lista de rutas y una URL base.
+   *
+   * @param paths - Arreglo de rutas relativas de las imágenes a precargar.
+   * @param baseUrl - URL base que se utilizará para construir la URL de previsualización de cada imagen.
+   *
+   * Este método crea una lista de objetos `FileItem` representando las imágenes precargadas,
+   * actualiza la propiedad `selectedFiles` con estos elementos y emite el evento `uploadedUrlsChange`
+   * con las rutas proporcionadas.
+   * Usar con ViewChild
+   */
+  setPrechargedImages(paths: string[], baseUrl: string) {
+    let precharged: FileItem[] = paths.map((path, index) => {
+      return {
+        id: index,
+        file: null,
+        progress: 100,
+        state: 'complete',
+        previewUrl: `${baseUrl}/${path}`,
+        typeView: this.params.previewType,
+        uploadedUrl: path,
+        fileType: path.includes('.pdf') ? 'document' : 'image',
+        isTemp: false,
+      };
+    });
+    this.selectedFiles = [...precharged];
+
+    this.uploadedUrlsChange.emit(paths);
+  }
+
+  confirmDelete(file: FileItem): void {
+    file.state = 'confirm-delete';
+  }
+
+  cancelDelete(file: FileItem): void {
+    file.state = 'complete';
+  }
+
+  deleteFile(file: FileItem): void {
+    this.selectedFiles = this.selectedFiles.filter((f) => f !== file);
+  }
+
+  onFilesAdded($event: any) {
+    this.handleFiles($event);
+  }
+
+  handleFiles(files: File[]): void {
+    this.error = false;
+    if (files.length + this.selectedFiles.length > this.params.maxFiles) {
+      this.showError('exceded max Files');
+
+      return;
+    }
+
+    const acceptedFiles = this.validateAndFilterFiles(files);
+    if (acceptedFiles.length === 0) {
+      if (!this.error) {
+        this.showError('conditions exceeded');
+      }
+      return;
+    }
+
+    let imageFiles = [];
+    let otherFiles = [];
+
+    acceptedFiles.forEach((file) => {
+      if (file.type.startsWith('image/')) {
+        imageFiles.push(file);
+      }
+
+      if (!file.type.startsWith('image/')) {
+        otherFiles.push(file);
+      }
+
+      this.prepareFileItem(file);
+    });
+  }
+
+  private async prepareFileItem(file: File): Promise<void> {
+    const isImage = file.type.startsWith('image/');
+    const isSvg = file.type == 'image/svg+xml';
+    const fileItem: FileItem = {
+      file,
+      id: this.generateId(file),
+      progress: 0,
+      state: 'uploading', // SIEMPRE empezamos en uploading
+      typeView: this.getFileViewType(file),
+      fileType: this.getFileType(file),
+    };
+
+    this.selectedFiles = [...this.selectedFiles, fileItem];
+
+    this.uploadFile(fileItem); // Iniciamos la carga inmediatamente
+
+    if (isImage && !isSvg) {
+      fileItem.previewUrl = await this.generatePreviewUrl(file);
+      this.syncFileItemState(fileItem.id, { previewUrl: fileItem.previewUrl });
+    }
+  }
+
+  private validateAndFilterFiles(files: File[]): File[] {
+    const acceptedTypes = this.acceptedMimeTypes;
+    const allowAllTypes = acceptedTypes.includes('*');
+    const validFiles: File[] = [];
+
+    for (const file of files) {
+      const isTypeAccepted =
+        allowAllTypes ||
+        acceptedTypes.includes(file.type) ||
+        acceptedTypes.includes(`${file.type.split('/')[0]}/*`);
+
+      const isSizeOk = file.size <= this.params.maxFileSizeMB * 1024 * 1024;
+
+      if (!isTypeAccepted) {
+        this.showError(`conditions exceeded`);
+        continue;
+      }
+
+      if (!isSizeOk) {
+        this.showError(`File size exceeded`);
+        continue;
+      }
+
+      validFiles.push(file);
+    }
+
+    return validFiles;
+  }
+
+  private uploadFile(fileItem: FileItem): void {
+    this.uploadFileService
+      .uploadFileWithProgress(fileItem.file, this.params.path, fileItem.fileType)
+      .subscribe({
+        next: (result) => {
+          this.zone.run(() => {
+            this.handleUploadEvent(result, fileItem);
+          });
+        },
+        error: (err) => {
+          this.zone.run(() => {
+            this.deleteFile(fileItem);
+            this.errorMessage = 'upload file error';
+            this.error = true;
+          });
+        },
+      });
+  }
+
+  private handleUploadEvent(result: any, fileItem: FileItem): void {
+    if (typeof result === 'number') {
+      this.syncFileItemState(fileItem.id, { progress: result });
+    } else {
+      this.syncFileItemState(fileItem.id, {
+        progress: 100,
+        state: 'complete',
+        uploadedUrl: result.response,
+      });
+      this.emitUploadedUrls();
+    }
+  }
+
+  getFileViewType(file: File): string {
+    return file.type.startsWith('image/') && this.params.previewType === 'grid' ? 'grid' : 'card';
+  }
+
+  getFileType(file: File): string {
+    const type = file.type;
+    if (type.startsWith('image/')) return 'image';
+    return 'document';
+  }
+
+  get acceptedMimeTypes(): string[] {
+    if (!this.params.accept.length) return ['*'];
+    return this.params.accept
+      .map((type) => FILE_TYPE_MAP[type.toUpperCase()] || [])
+      .reduce((acc, val) => acc.concat(val), []);
+  }
+
+  // eventos desde los items
+
+  onFileAction(event: { file: FileItem; type: 'delete' | 'confirm-delete' | 'cancel-delete' }) {
+    const { file, type } = event;
+    switch (type) {
+      case 'delete':
+        this.setFileState(file, 'confirm-delete');
+
+        break;
+      case 'confirm-delete':
+        this.removeFile(file);
+
+        break;
+      case 'cancel-delete':
+        this.setFileState(file, 'complete');
+        break;
+    }
+  }
+
+  setFileState(file: FileItem, newState: UploadFileState) {
+    file.state = newState;
+    this.syncFileItemState(file.id, { state: newState });
+  }
+
+  removeFile(file: FileItem) {
+    this.uploadFileService.deletePublishedFile(file.uploadedUrl).subscribe((res) => {
+      if (res) {
+        this.selectedFiles = this.selectedFiles.filter((f) => f !== file);
+
+        this.emitUploadedUrls();
+      }
+    });
+  }
+  generateId(file: File): string {
+    if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
+      return `${file.name}-${crypto.randomUUID()}`;
+    }
+
+    return `${file.name}-${Date.now()}-${Math.floor(Math.random() * 1_000_000)}`;
+  }
+
+  emitUploadedUrls() {
+    const urls = this.selectedFiles
+      .filter((f) => f.state === 'complete' && f.uploadedUrl)
+      .map((f) => f.uploadedUrl as string);
+    this.uploadedUrlsChange.emit(urls);
+  }
+
+  showError(message: string) {
+    this.zone.run(() => {
+      this.error = true;
+      this.errorMessage = message;
+    });
+  }
+
+  private syncFileItemState(id: string | number, changes: Partial<FileItem>) {
+    const index = this.selectedFiles.findIndex((f) => f.id === id);
+    if (index === -1) {
+      return;
+    }
+
+    const updated = { ...this.selectedFiles[index], ...changes } as FileItem;
+    this.selectedFiles = [
+      ...this.selectedFiles.slice(0, index),
+      updated,
+      ...this.selectedFiles.slice(index + 1),
+    ];
+  }
+
+  private generatePreviewUrl(file: File): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result as string);
+      reader.onerror = (error) => resolve('assets/img/imgIcon.png');
+    });
+  }
+}

package/src/components-source/dropi-file-upload/file-list/file-list.component.html

@@ -0,0 +1,51 @@
+<div class="files-container">
+  <div class="grid-list">
+    <ng-container *ngIf="!viewImageToDelete">
+      <app-grid-view
+        *ngFor="let fileItem of gridFiles"
+        [fileItem]="fileItem"
+        (action)="onChildGridAction($event)"
+      ></app-grid-view>
+    </ng-container>
+
+    <app-card-view
+      *ngIf="viewImageToDelete"
+      style="width: 100%"
+      [fileItem]="imageTodelete"
+      [onlyView]="onlyView"
+      (action)="onDeleteCardAction($event)"
+    ></app-card-view>
+    <div
+      (click)="addImage()"
+      *ngIf="(gridFiles.length != 0 || (previewType == 'grid' && addButton)) && gridFiles.length < maxFiles && !viewImageToDelete"
+      class="add-img"
+    >
+      <div class="icon">
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 14 14"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M9.77774 6.4444H7.55551V4.22218C7.55551 4.07484 7.49698 3.93353 7.3928 3.82934C7.28861 3.72516 7.1473 3.66663 6.99996 3.66663C6.85262 3.66663 6.71131 3.72516 6.60712 3.82934C6.50294 3.93353 6.4444 4.07484 6.4444 4.22218V6.4444H4.22218C4.07484 6.4444 3.93353 6.50294 3.82934 6.60712C3.72516 6.71131 3.66663 6.85262 3.66663 6.99996C3.66663 7.1473 3.72516 7.28861 3.82934 7.3928C3.93353 7.49698 4.07484 7.55551 4.22218 7.55551H6.4444V9.77774C6.4444 9.92508 6.50294 10.0664 6.60712 10.1706C6.71131 10.2748 6.85262 10.3333 6.99996 10.3333C7.1473 10.3333 7.28861 10.2748 7.3928 10.1706C7.49698 10.0664 7.55551 9.92508 7.55551 9.77774V7.55551H9.77774C9.92508 7.55551 10.0664 7.49698 10.1706 7.3928C10.2748 7.28861 10.3333 7.1473 10.3333 6.99996C10.3333 6.85262 10.2748 6.71131 10.1706 6.60712C10.0664 6.50294 9.92508 6.4444 9.77774 6.4444Z"
+            fill="#32394D"
+          />
+        </svg>
+      </div>
+      <div class="text">
+        {{ 'add' | translate }}
+      </div>
+    </div>
+  </div>
+  <div class="card-list">
+    <app-card-view
+      *ngFor="let fileItem of cardFiles"
+      style="width: 100%"
+      [fileItem]="fileItem"
+      [onlyView]="onlyView"
+      (action)="onChildAction($event)"
+    ></app-card-view>
+  </div>
+</div>

package/src/components-source/dropi-file-upload/file-list/file-list.component.scss

@@ -0,0 +1,60 @@
+.grid-list {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--Size-5, 24px);
+  align-self: stretch;
+  flex-wrap: wrap;
+}
+
+.files-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Size-3);
+}
+
+.card-list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--Size-3);
+  align-self: stretch;
+  width: 100%;
+}
+
+.add-img {
+  display: flex;
+  height: 88px;
+  width: 88px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--Size-1, 4px);
+  align-self: stretch;
+  border-radius: var(--Border-2, 8px);
+  background: var(--Gray-Gray-50, #f7f8fa);
+
+  &:hover {
+    cursor: pointer;
+    transform: scale(1.1);
+  }
+
+  .icon {
+    display: flex;
+    width: 24px;
+    height: 24px;
+    padding: 4px;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    border-radius: var(--Border-3, 12px);
+    background: var(--Gray-Gray-100, #e6eaf2);
+  }
+  .text {
+    color: var(--Gray-600, #475066);
+    text-align: center;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 150%; /* 18px */
+  }
+}

package/src/components-source/dropi-file-upload/file-list/file-list.component.ts

@@ -0,0 +1,84 @@
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FileItem } from '../../../utilities/interfaces/ui/upload.model';
+import { CardViewComponent } from '../card-view/card-view.component';
+import { GridViewComponent } from '../grid-view/grid-view.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { UploadFileService } from '@app/services/ui/upload-file.service';
+
+@Component({
+  selector: 'app-file-list',
+  standalone: true,
+  imports: [CommonModule, CardViewComponent, GridViewComponent, TranslateModule],
+  templateUrl: './file-list.component.html',
+  styleUrls: ['./file-list.component.scss'],
+})
+export class FileListComponent implements OnChanges {
+  @Input() files: FileItem[];
+  @Input() onlyView: boolean;
+  @Input() previewType: 'card' | 'grid' = 'card';
+  @Input() maxFiles: number = 1; 
+  @Input() addButton: boolean = true;
+  @Output() action = new EventEmitter<{
+    file: FileItem;
+    type: 'delete' | 'confirm-delete' | 'cancel-delete';
+  }>();
+
+  public cardFiles: FileItem[];
+  public gridFiles: FileItem[];
+  viewImageToDelete: boolean;
+  imageTodelete: FileItem;
+  imageCopyValue: FileItem;
+
+  constructor(private uploadFileService: UploadFileService) {}
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['files']) {
+      this.updateFileViews();
+    }
+  }
+
+  private updateFileViews() {
+    this.cardFiles = [];
+    this.gridFiles = [];
+
+    this.files.forEach((file) => {
+      if (file.typeView === 'card') {
+        this.cardFiles.push(file);
+        return;
+      }
+      this.gridFiles.push(file);
+    });
+  }
+
+  onChildAction(event: { file: FileItem; type: 'delete' | 'confirm-delete' | 'cancel-delete' }) {
+    this.action.emit(event);
+  }
+    onChildGridAction(event: { file: FileItem; type: 'delete' | 'confirm-delete' | 'cancel-delete' }) {
+    
+        this.imageTodelete = {...event.file, state:'confirm-delete' };
+              this.viewImageToDelete = true;
+        this.imageCopyValue  = event.file;
+
+  }
+
+  onDeleteCardAction(event: { file: FileItem; type: 'delete' | 'confirm-delete' | 'cancel-delete' }) {
+    console.log('event', event);
+    if(event.type == 'confirm-delete'){
+    
+      
+       this.action.emit({type:'confirm-delete', file: this.imageCopyValue});
+       this.viewImageToDelete = false;
+       this.imageCopyValue = null;
+    } else {
+      this.imageTodelete = null;
+      this.viewImageToDelete = false;
+      this.imageCopyValue = null;
+    }
+
+  } 
+
+  addImage() {
+    this.uploadFileService.triggerInput();
+  }
+}

package/src/components-source/dropi-file-upload/grid-view/grid-view.component.html

@@ -0,0 +1,77 @@
+<div class="img-view" [ngClass]="[fileItem.state, getFileTypeClass(fileItem.file)]">
+  <!-- Imagen o ícono -->
+
+  <div class="preview-wrapper">
+    <div class="preview-container">
+      <img
+      [ngClass]="fileItem.state"
+      class="preview"
+      [src]="fileItem?.previewUrl || './assets/utils/template-no-image.png'"
+      alt="preview"
+    />
+  </div>
+
+    <ng-container *ngIf="fileItem.state === 'complete'">
+      <div class="overlay-icon">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          viewBox="0 0 12 12"
+          fill="none"
+        >
+          <g clip-path="url(#clip0_5064_216)">
+            <path
+              d="M11.1594 2.2155L4.24992 9.1245C4.20347 9.17114 4.14826 9.20815 4.08747 9.2334C4.02668 9.25865 3.9615 9.27165 3.89567 9.27165C3.82985 9.27165 3.76467 9.25865 3.70388 9.2334C3.64308 9.20815 3.58788 9.17114 3.54142 9.1245L0.869423 6.45C0.822969 6.40337 0.767762 6.36636 0.70697 6.34111C0.646179 6.31586 0.581 6.30286 0.515173 6.30286C0.449346 6.30286 0.384167 6.31586 0.323376 6.34111C0.262585 6.36636 0.207378 6.40337 0.160923 6.45C0.114285 6.49646 0.0772787 6.55167 0.0520278 6.61246C0.026777 6.67325 0.0137787 6.73843 0.0137787 6.80425C0.0137787 6.87008 0.026777 6.93526 0.0520278 6.99605C0.0772787 7.05684 0.114285 7.11205 0.160923 7.1585L2.83392 9.831C3.1159 10.1125 3.49802 10.2705 3.89642 10.2705C4.29482 10.2705 4.67695 10.1125 4.95892 9.831L11.8679 2.9235C11.9145 2.87706 11.9514 2.82188 11.9766 2.76114C12.0018 2.70039 12.0148 2.63527 12.0148 2.5695C12.0148 2.50374 12.0018 2.43862 11.9766 2.37787C11.9514 2.31713 11.9145 2.26195 11.8679 2.2155C11.8215 2.16887 11.7663 2.13186 11.7055 2.10661C11.6447 2.08136 11.5795 2.06836 11.5137 2.06836C11.4478 2.06836 11.3827 2.08136 11.3219 2.10661C11.2611 2.13186 11.2059 2.16887 11.1594 2.2155Z"
+              fill="#0ABB87"
+            />
+          </g>
+          <defs>
+            <clipPath id="clip0_5064_216">
+              <rect width="12" height="12" fill="white" />
+            </clipPath>
+          </defs>
+        </svg>
+      </div>
+    </ng-container>
+
+    <div
+      (click)="onSendClick('confirm-delete')"
+      *ngIf="fileItem.state !== 'confirm-delete'"
+      class="delete"
+    >
+      <svg
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M8 0.5H24C28.1421 0.5 31.5 3.85786 31.5 8V24C31.5 28.1421 28.1421 31.5 24 31.5H8C3.85786 31.5 0.5 28.1421 0.5 24V8C0.5 3.85786 3.85786 0.5 8 0.5Z"
+          fill="white"
+        />
+        <path
+          d="M8 0.5H24C28.1421 0.5 31.5 3.85786 31.5 8V24C31.5 28.1421 28.1421 31.5 24 31.5H8C3.85786 31.5 0.5 28.1421 0.5 24V8C0.5 3.85786 3.85786 0.5 8 0.5Z"
+          stroke="#F7F8FA"
+        />
+        <path
+          d="M22.25 10.4445H20.0972C19.936 9.66072 19.5096 8.95651 18.8897 8.45052C18.2699 7.94453 17.4945 7.6677 16.6944 7.66669H15.3055C14.5054 7.6677 13.73 7.94453 13.1102 8.45052C12.4904 8.95651 12.0639 9.66072 11.9027 10.4445H9.74996C9.56578 10.4445 9.38914 10.5176 9.25891 10.6479C9.12868 10.7781 9.05551 10.9547 9.05551 11.1389C9.05551 11.3231 9.12868 11.4997 9.25891 11.63C9.38914 11.7602 9.56578 11.8334 9.74996 11.8334H10.4444V20.8611C10.4455 21.7817 10.8117 22.6642 11.4626 23.3151C12.1135 23.9661 12.9961 24.3323 13.9166 24.3334H18.0833C19.0038 24.3323 19.8864 23.9661 20.5373 23.3151C21.1882 22.6642 21.5544 21.7817 21.5555 20.8611V11.8334H22.25C22.4341 11.8334 22.6108 11.7602 22.741 11.63C22.8712 11.4997 22.9444 11.3231 22.9444 11.1389C22.9444 10.9547 22.8712 10.7781 22.741 10.6479C22.6108 10.5176 22.4341 10.4445 22.25 10.4445ZM15.3055 9.05558H16.6944C17.1251 9.0561 17.5452 9.18986 17.8969 9.43852C18.2486 9.68718 18.5148 10.0386 18.659 10.4445H13.3409C13.4851 10.0386 13.7513 9.68718 14.103 9.43852C14.4547 9.18986 14.8748 9.0561 15.3055 9.05558ZM20.1666 20.8611C20.1666 21.4137 19.9471 21.9436 19.5564 22.3343C19.1657 22.725 18.6358 22.9445 18.0833 22.9445H13.9166C13.3641 22.9445 12.8342 22.725 12.4435 22.3343C12.0528 21.9436 11.8333 21.4137 11.8333 20.8611V11.8334H20.1666V20.8611Z"
+          fill="#DE6061"
+        />
+        <path
+          d="M14.6111 20.1662C14.7953 20.1662 14.9719 20.0931 15.1022 19.9628C15.2324 19.8326 15.3056 19.656 15.3056 19.4718V15.3051C15.3056 15.121 15.2324 14.9443 15.1022 14.8141C14.9719 14.6839 14.7953 14.6107 14.6111 14.6107C14.4269 14.6107 14.2503 14.6839 14.1201 14.8141C13.9898 14.9443 13.9167 15.121 13.9167 15.3051V19.4718C13.9167 19.656 13.9898 19.8326 14.1201 19.9628C14.2503 20.0931 14.4269 20.1662 14.6111 20.1662Z"
+          fill="#DE6061"
+        />
+        <path
+          d="M17.3888 20.1662C17.573 20.1662 17.7496 20.0931 17.8799 19.9628C18.0101 19.8326 18.0833 19.656 18.0833 19.4718V15.3051C18.0833 15.121 18.0101 14.9443 17.8799 14.8141C17.7496 14.6839 17.573 14.6107 17.3888 14.6107C17.2046 14.6107 17.028 14.6839 16.8978 14.8141C16.7675 14.9443 16.6944 15.121 16.6944 15.3051V19.4718C16.6944 19.656 16.7675 19.8326 16.8978 19.9628C17.028 20.0931 17.2046 20.1662 17.3888 20.1662Z"
+          fill="#DE6061"
+        />
+      </svg>
+    </div>
+  </div>
+
+  <div class="progress-bar-container" *ngIf="fileItem.state === 'uploading'">
+    <div class="progress-bar" [style.width.%]="fileItem.progress"></div>
+  </div>
+</div>

package/src/components-source/dropi-file-upload/grid-view/grid-view.component.scss

@@ -0,0 +1,85 @@
+.preview-wrapper {
+  position: relative;
+  display: inline-block;
+
+  .preview {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    flex-shrink: 0;
+
+    &.uploading {
+      filter: blur(2px);
+    }
+  }
+  .preview-container {
+    border-radius: var(--Border-2);
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+  }
+
+  .overlay-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    border-radius: var(--Border-3, 12px);
+    background: var(--White, #fff);
+  }
+
+  .delete {
+    position: absolute;
+    top: -12px;
+    right: -9px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    border-radius: var(--Border-3, 12px);
+    background: var(--White, #fff);
+    &:hover {
+      cursor: pointer;
+      transform: scale(1.1);
+    }
+  }
+}
+
+.img-view {
+  display: flex;
+  width: 88px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: var(--Size-2, 8px);
+
+  .preview-wrapper {
+    width: 88px;
+    height: 88px;
+  }
+  .overlay-icon {
+    width: 24px;
+    height: 24px;
+    padding: 6px;
+  }
+
+  .progress-bar-container {
+    width: 100%;
+    height: 4px;
+    background-color: #f0f0f0;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  .progress-bar {
+    height: 100%;
+    border-radius: 4.5px;
+    background: var(--Primary-Primary-500);
+    transition: width 0.3s ease;
+  }
+}