fix(directive): drag & drop if multiple disabled (#417)

* fix(directive): drag & drop if `multiple` disabled * chore(app): `multiple` option example
kukhariev · Apr 7, 2023 · 412e51b · 412e51b
1 parent 9c00d4e
commit 412e51b
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/src/app/tus/tus.component.html b/src/app/tus/tus.component.html
@@ -12,7 +12,7 @@
   </div>
   <div class="control">
     <span>
-      <em>Drop files to upload, or</em>
+      <em>Drop file to upload, or</em>
       <label accesskey="o" for="files"> <strong>BROWSE</strong></label>
       <input
         #files

diff --git a/src/app/tus/tus.component.ts b/src/app/tus/tus.component.ts
@@ -13,6 +13,7 @@ export class TusComponent {
   uploads: UploadState[] = [];
   options: UploadxOptions = {
     allowedTypes: 'image/*,video/*',
+    multiple: false,
     endpoint: `${environment.api}/files?uploadType=tus`,
     uploaderClass: Tus,
     authorize: async req => {

diff --git a/src/uploadx/lib/uploadx-drop.directive.ts b/src/uploadx/lib/uploadx-drop.directive.ts
@@ -16,7 +16,7 @@ export class UploadxDropDirective {
   dropHandler(event: DragEvent): void {
     this._stopEvents(event);
     this.active = false;
-    if (event.dataTransfer && event.dataTransfer.files.item(0)) {
+    if (event.dataTransfer?.files.length) {
       this.fileInput
         ? this.fileInput.fileListener(event.dataTransfer.files)
         : this.uploadService.handleFiles(event.dataTransfer.files);
@@ -26,9 +26,13 @@ export class UploadxDropDirective {
   @HostListener('dragover', ['$event'])
   onDragOver(event: DragEvent): void {
     this._stopEvents(event);
-    if (event.dataTransfer?.items[0].kind === 'file') {
-      event.dataTransfer.dropEffect = 'copy';
-      this.active = true;
+    if (event.dataTransfer?.items.length) {
+      if (this.fileInput?.options.multiple === false && event.dataTransfer.items.length > 1) {
+        event.dataTransfer.dropEffect = 'none';
+      } else if (event.dataTransfer.items[0].kind === 'file') {
+        event.dataTransfer.dropEffect = 'copy';
+        this.active = true;
+      }
     }
   }