diff --git a/src/assets/icons/upload.svg b/src/assets/icons/upload.svg
new file mode 100644
index 0000000..31dfde2
--- /dev/null
+++ b/src/assets/icons/upload.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="90px" version="1.1" viewBox="0 0 100 100" width="100px"
+     xmlns="http://www.w3.org/2000/svg">
+    <g fill="currentColor" fill-rule="evenodd" id="upload" stroke="none" stroke-width="1">
+        <path
+            d="M35,35 L35,45 L15,45 L15,90 L85,90 L85,45 L65,45 L65,35 L95,35 L95,100 L5,100 L5,35 L35,35 Z M50,0 L70,20 L63,27 L55,19 L55,70 L45,70 L45,19 L37,27 L30,20 L50,0 Z"
+            fill-rule="nonzero" id="Combined-Shape"></path>
+    </g>
+</svg>
diff --git a/src/assets/styles/common-file-drop.scss b/src/assets/styles/common-file-drop.scss
new file mode 100644
index 0000000..40fae90
--- /dev/null
+++ b/src/assets/styles/common-file-drop.scss
@@ -0,0 +1,26 @@
+.file-drop-section {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 1000;
+    padding: 12px;
+    opacity: 0.7;
+    background: var(--iqser-white);
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+
+    mat-icon {
+        height: 60px;
+        width: 60px;
+    }
+
+    .heading-xl {
+        margin-top: 24px;
+    }
+}
diff --git a/src/assets/styles/common-styles.scss b/src/assets/styles/common-styles.scss
index 1ec0cee..86408b1 100644
--- a/src/assets/styles/common-styles.scss
+++ b/src/assets/styles/common-styles.scss
@@ -25,3 +25,4 @@
 @use 'common-toggle';
 @use 'common-toggle-button';
 @use 'common-tooltips';
+@use 'common-file-drop';
diff --git a/src/lib/icons/icons.module.ts b/src/lib/icons/icons.module.ts
index 00649ac..8fdbc45 100644
--- a/src/lib/icons/icons.module.ts
+++ b/src/lib/icons/icons.module.ts
@@ -34,7 +34,8 @@ export class IqserIconsModule {
             'sort-asc',
             'sort-desc',
             'status-collapse',
-            'status-expand'
+            'status-expand',
+            'upload'
         ]);
         icons.forEach(icon => {
             _iconRegistry.addSvgIconInNamespace('iqser', icon, _sanitizer.bypassSecurityTrustResourceUrl(`/assets/icons/${icon}.svg`));
diff --git a/src/lib/services/dialog.service.ts b/src/lib/services/dialog.service.ts
index 5b47fb4..e9bf19f 100644
--- a/src/lib/services/dialog.service.ts
+++ b/src/lib/services/dialog.service.ts
@@ -6,18 +6,18 @@ export const largeDialogConfig: MatDialogConfig = {
     width: '90vw',
     maxWidth: '90vw',
     maxHeight: '90vh',
-    autoFocus: false,
+    autoFocus: false
 } as const;
 
 export const defaultDialogConfig: MatDialogConfig = {
     width: '662px',
     maxWidth: '90vw',
-    autoFocus: false,
+    autoFocus: false
 } as const;
 
 @Injectable()
 export abstract class DialogService<T extends string> {
-    protected readonly _config: {
+    protected abstract readonly _config: {
         [key in T]: {
             component: ComponentType<unknown>;
             dialogConfig?: MatDialogConfig;
@@ -30,8 +30,8 @@ export abstract class DialogService<T extends string> {
         type: T,
         $event: MouseEvent,
         data: unknown,
-        cb?: (...params) => unknown,
-        finallyCb?: (...params) => unknown | Promise<unknown>,
+        cb?: (...params: unknown[]) => unknown,
+        finallyCb?: (...params: unknown[]) => unknown | Promise<unknown>
     ): MatDialogRef<unknown> {
         const config = this._config[type];
 
@@ -39,7 +39,7 @@ export abstract class DialogService<T extends string> {
         const ref = this._dialog.open(config.component, {
             ...defaultDialogConfig,
             ...(config.dialogConfig || {}),
-            data,
+            data
         });
         // eslint-disable-next-line @typescript-eslint/no-misused-promises
         ref.afterClosed().subscribe(async result => {