@chat21/chat21-web-widget 5.0.84-rc.3 → 5.0.84-rc.4

package/CHANGELOG.md

@@ -6,6 +6,10 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.0.84-rc.4
+- **added**: checkAcceptedFile fn on dragleave event conversation-content component
+- **added**: checkAcceptedFile fn  in conversation-footer component
+
 # 5.0.84-rc.3
 - **changed**: index-dev lib order import
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.0.84-rc.3",
+  "version": "5.0.84-rc.4",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {

package/src/app/component/conversation-detail/conversation/conversation.component.ts

@@ -39,6 +39,7 @@ import { CustomTranslateService } from 'src/chat21-core/providers/custom-transla
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { TiledeskRequestsService } from 'src/chat21-core/providers/tiledesk/tiledesk-requests.service';
 import { ConversationContentComponent } from '../conversation-content/conversation-content.component';
+import { checkAcceptedFile } from 'src/app/utils/utils';
 // import { TranslateService } from '@ngx-translate/core';
 
 @Component({
@@ -1346,34 +1347,32 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       var mimeType = fileList[0].type
       this.logger.log('[CONV-COMP] ----> FILE - DROP mimeType files ', mimeType)
 
-      // if (mimeType.startsWith("image") || mimeType.startsWith("application")) {
-      // this.logger.log('[CONV-COMP] ----> FILE - DROP mimeType files: ', this.appConfigProvider.getConfig().fileUploadAccept);
-      // this.checkAcceptedFile(mimeType);
-      // const isAccepted = this.checkAcceptedFile(mimeType)
-      // this.logger.log('[CONV-COMP] > checkAcceptedFile - fileUploadAccept isAcceptFile FILE - DROP',isAccepted)
-      // if (isAccepted === true) {
       this.dropEvent = event
-      // } else {
-      //   this.logger.log( '[CONV-COMP] ----> FILE - DROP mimeType files ', mimeType,'NOT SUPPORTED FILE TYPE')
-      //   this.presentToast(this.translationsMap.get('FAILED_TO_UPLOAD_THE_FORMAT_IS_NOT_SUPPORTED'), 'danger','toast-custom-class', 5000 )
-      //   // this.presentToastOnlyImageFilesAreAllowedToDrag()
-      // }
       
     }
   }
 
   allowDrop(event: any) {
-    event.preventDefault()
-    event.stopPropagation()
+    event.preventDefault();
+    event.stopPropagation();
     this.logger.log('[CONV-COMP] ----> FILE - (dragover) allowDrop ev ', event)
     this.isHovering = true
   }
 
   drag(event){
-    event.preventDefault()
+    event.preventDefault();
+    this.logger.log('[CONV-COMP] ----> FILE - (dragleave) drag ev ', event)
+    if (event.dataTransfer && event.dataTransfer.files) {
+      const files = event.dataTransfer.files;
+      const canUploadFile = checkAcceptedFile(files[0].type, this.appConfigService.getConfig().fileUploadAccept)
+      if(!canUploadFile){
+        this.logger.error('[IMAGE-UPLOAD] detectFiles: can not upload current file type--> NOT ALLOWED', this.appConfigService.getConfig().fileUploadAccept)
+        return;
+      }
+    }
     event.stopPropagation()
-    console.log('dragleave-->', event)
     this.isHovering = false
   }
 
 }
+

package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.ts

@@ -1,5 +1,6 @@
 import { Component, ComponentFactoryResolver, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild, ViewContainerRef } from '@angular/core';
 import { Globals } from 'src/app/utils/globals';
+import { checkAcceptedFile } from 'src/app/utils/utils';
 import { MessageModel } from 'src/chat21-core/models/message';
 import { UploadModel } from 'src/chat21-core/models/upload';
 import { ConversationHandlerService } from 'src/chat21-core/providers/abstract/conversation-handler.service';
@@ -130,48 +131,56 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
         
         const that = this;
         if (event.target.files && event.target.files[0]) {
-            const nameFile = event.target.files[0].name;
-            const typeFile = event.target.files[0].type;
-            const size = event.target.files[0].size
-            const reader = new FileReader();
-              that.logger.log('[CONV-FOOTER] OK preload: ', nameFile, typeFile, reader);
-              reader.addEventListener('load', function () {
-                that.logger.log('[CONV-FOOTER] addEventListener load', reader.result);
-                that.isFileSelected = true;
-                // se inizia con image
-                if (typeFile.startsWith('image') && !typeFile.includes('svg')) {
-                  const imageXLoad = new Image;
-                  that.logger.log('[CONV-FOOTER] onload ', imageXLoad);
-                  imageXLoad.src = reader.result.toString();
-                  imageXLoad.title = nameFile;
-                  imageXLoad.onload = function () {
-                    that.logger.log('[CONV-FOOTER] onload image');
-                    // that.arrayFilesLoad.push(imageXLoad);
-                    const uid = (new Date().getTime()).toString(36); // imageXLoad.src.substring(imageXLoad.src.length - 16);
-                    that.arrayFilesLoad[0] = { uid: uid, file: imageXLoad, type: typeFile, size: size };
-                    that.logger.log('[CONV-FOOTER] OK: ', that.arrayFilesLoad[0]);
-                    // SEND MESSAGE
-                    that.loadFile();
-                  };
-                } else {
-                  that.logger.log('[CONV-FOOTER] onload file');
-                  const fileXLoad = {
-                    src: reader.result.toString(),
-                    title: nameFile
-                  };
+
+          const canUploadFile = checkAcceptedFile(event.target.files[0].type, this.fileUploadAccept)
+          if(!canUploadFile){
+            this.logger.error('[IMAGE-UPLOAD] detectFiles: can not upload current file type--> NOT ALLOWED', this.fileUploadAccept)
+            this.isFilePendingToUpload = false;
+            return;
+          }
+
+          const nameFile = event.target.files[0].name;
+          const typeFile = event.target.files[0].type;
+          const size = event.target.files[0].size
+          const reader = new FileReader();
+            that.logger.debug('[CONV-FOOTER] OK preload: ', nameFile, typeFile, reader);
+            reader.addEventListener('load', function () {
+              that.logger.debug('[CONV-FOOTER] addEventListener load', reader.result);
+              that.isFileSelected = true;
+              // se inizia con image
+              if (typeFile.startsWith('image') && !typeFile.includes('svg')) {
+                const imageXLoad = new Image;
+                that.logger.debug('[CONV-FOOTER] onload ', imageXLoad);
+                imageXLoad.src = reader.result.toString();
+                imageXLoad.title = nameFile;
+                imageXLoad.onload = function () {
+                  that.logger.debug('[CONV-FOOTER] onload image');
                   // that.arrayFilesLoad.push(imageXLoad);
                   const uid = (new Date().getTime()).toString(36); // imageXLoad.src.substring(imageXLoad.src.length - 16);
-                  that.arrayFilesLoad[0] = { uid: uid, file: fileXLoad, type: typeFile, size: size };
-                  that.logger.log('[CONV-FOOTER] OK: ', that.arrayFilesLoad[0]);
+                  that.arrayFilesLoad[0] = { uid: uid, file: imageXLoad, type: typeFile, size: size };
+                  that.logger.debug('[CONV-FOOTER] OK: ', that.arrayFilesLoad[0]);
                   // SEND MESSAGE
                   that.loadFile();
-                }
-              }, false);
-
-              if (event.target.files[0]) {
-                reader.readAsDataURL(event.target.files[0]);
-                that.logger.log('[CONV-FOOTER] reader-result: ', event.target.files[0]);
+                };
+              } else {
+                that.logger.debug('[CONV-FOOTER] onload file');
+                const fileXLoad = {
+                  src: reader.result.toString(),
+                  title: nameFile
+                };
+                // that.arrayFilesLoad.push(imageXLoad);
+                const uid = (new Date().getTime()).toString(36); // imageXLoad.src.substring(imageXLoad.src.length - 16);
+                that.arrayFilesLoad[0] = { uid: uid, file: fileXLoad, type: typeFile, size: size };
+                that.logger.debug('[CONV-FOOTER] OK: ', that.arrayFilesLoad[0]);
+                // SEND MESSAGE
+                that.loadFile();
               }
+            }, false);
+
+            if (event.target.files[0]) {
+              reader.readAsDataURL(event.target.files[0]);
+              that.logger.debug('[CONV-FOOTER] reader-result: ', event.target.files[0]);
+            }
         }
     }
   }

package/src/app/utils/utils.ts

@@ -387,3 +387,47 @@ export function getUnique(arr, comp) {
     // eliminate the dead keys & store unique objects
     .filter(e => arr[e]).map(e => arr[e]);
 }
+
+export function checkAcceptedFile(fileType, fileUploadAccept ): boolean{
+  
+  if (fileUploadAccept === '*/*') {
+    return true
+  }
+  // Dividi la stringa fileUploadAccept in un array di tipi accettati
+  const acceptedTypes = fileUploadAccept.split(',');
+
+  // Verifica se il tipo di file è accettato
+  return acceptedTypes.some((accept) => {
+    accept = accept.trim();
+    // Controlla per i tipi MIME con wildcard, come image/*
+    if (accept.endsWith('/*')) {
+      const baseMimeType = fileType.split('/')[0]; // Ottieni la parte principale del MIME type
+      return accept.replace('/*', '') === baseMimeType;
+    }
+    
+    // Controlla se l'accettazione è un MIME type esatto (come image/jpeg)
+    if (accept === fileType) {
+      return true;
+    }
+
+    // Controlla per le estensioni di file specifiche come .pdf o .txt
+    return fileType === getMimeTypeFromExtension(accept);
+  });
+
+}
+
+function getMimeTypeFromExtension(extension: string): string {
+  // Rimuovi il punto dall'estensione e ottieni il MIME type
+  const mimeTypes: { [key: string]: string } = {
+      '.jpg': 'image/jpeg',
+      '.jpeg': 'image/jpeg',
+      '.png': 'image/png',
+      '.gif': 'image/gif',
+      '.pdf': 'application/pdf',
+      '.txt': 'text/plain',
+      '.doc': 'application/msword',
+      '.docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+      // Aggiungi altri tipi MIME se necessario
+  };
+  return mimeTypes[extension] || '';
+}