AS#152122905738626, Files upload: dragging/dropping incorrect file leads to overlap with help text

-- Fixed, with catch been that 'or' keyword is not removed in case of file type does not match the required types because we don't get the event from filestack for this case.

Author: vikasrohit

app/directives/tc-fp-file-input/tc-fp-file-input.directive.js

@@ -32,12 +32,15 @@ import _ from 'lodash'
           scope.filePath += _.join([userId, scope.fieldId, (new Date()).valueOf()], '-') + '.zip'
         }
         var dragAreaClasses = 'tc-fp-file-drag-drop'
+        var dragText = ''
         // set mimeTypes
         if (scope.fieldId.indexOf('ZIP') > -1) {
           scope.mimeTypes = 'application/zip'
+          dragText = 'Drag and drop your .zip file here (500MB max)'
         } else if (scope.fieldId.indexOf('DESIGN_COVER') > -1) {
           scope.mimeTypes = 'image/png,image/jpeg,image/bmp'
           dragAreaClasses += ' tc-fp-file-drag-drop-image'
+          dragText = 'Drag and Drop your PNG or JPG file here'
         }
 
         // set default services
@@ -63,6 +66,7 @@ import _ from 'lodash'
         input.setAttribute('data-fp-services', scope.fpServices)
         input.setAttribute('data-fp-button-class', 'tc-btn')
         input.setAttribute('data-fp-drag-class', dragAreaClasses)
+        input.setAttribute('data-fp-drag-text', dragText)
         input.setAttribute('data-fp-multiple', false)
         input.setAttribute('data-fp-mimetypes', scope.mimeTypes)
         input.setAttribute('data-fp-store-location', 's3')

app/directives/tc-fp-file-input/tc-fp-file-input.jade

@@ -11,6 +11,5 @@
       ng-model="ngModel",
       ng-required="mandatory",
       data-fp-button-text="Pick A File",
-      data-fp-drag-text=" ",
       on-success="onFileSeleted(event.fpfile)"
     )

assets/css/directives/tc-fp-file-input.directive.scss

@@ -40,35 +40,30 @@ tc-fp-file-input {
 
   .tc-fp-file-drag-drop {
     width: calc(100% - 4px);
-    position: absolute;
     left: 0;
     top: 0;
     height: 190px;
     width: 240px;
     position: relative;
+    color: $tc-gray-50 !important;
+    padding: 25px !important;
+    text-align: center;
 
+    // div used to show progress bar for drop upload
+    > div {
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+
+    // span used for showing remove button
     > span {
       position: absolute;
       top: 0px;
       right: 0px;
     }
   }
 
-  .tc-fp-file-drag-drop::after {
-    content: 'Drag and drop your .zip file here (500MB max)';
-    color: $tc-gray-50;
-    top: 25px;
-    position: absolute;
-    width: 198px;
-    text-align: center;
-    left: 50%;
-    transform: translateX(-50%)
-  }
-
-  .tc-fp-file-drag-drop-image::after {
-    content: 'Drag and Drop your PNG or JPG file here';
-  }
-
   &.file-uploaded {
     .tc-file-field__input::after,
     .tc-fp-file-drag-drop::after {