diff --git a/app/scripts/app.js b/app/scripts/app.js
index 17d321b..8a03eb9 100644
--- a/app/scripts/app.js
+++ b/app/scripts/app.js
@@ -175,6 +175,7 @@ angular
     'md.data.table',
     'ngIdle',
     'ngclipboard',
+    'ngFileUpload',
   ])
   .service('JWTHttpInterceptor', function () {
     return {
diff --git a/app/scripts/controllers/Files.js b/app/scripts/controllers/Files.js
index d1713c0..31dc8b7 100644
--- a/app/scripts/controllers/Files.js
+++ b/app/scripts/controllers/Files.js
@@ -77,10 +77,22 @@ function DialogUploadController($scope, $mdDialog, Backend, $shared, onFinished)
       $scope.error = false;
       $scope.errorText = "";
       $scope.data = {
-        file: null
+        file: null,
+        files: []
+      };
+      $scope.onFilesChanged = function(files, invalidFiles) {
+        if (invalidFiles && invalidFiles.length > 0) {
+          $scope.errorText = "Some files are invalid. Please use .webp or .mp3 files only.";
+          return;
+        }
+        $scope.errorText = "";
+        $scope.data.files = files || [];
       };
       $scope.submit = function($event) {
-        var files = angular.element("#uploadFile").prop("files");
+        var files = $scope.data.files;
+        if (!files || files.length === 0) {
+          files = angular.element("#uploadFile").prop("files");
+        }
         if ( files.length === 0 ) {
           $scope.errorText="Please select atleast 1 file..";
           return;
@@ -107,7 +119,7 @@ function DialogUploadController($scope, $mdDialog, Backend, $shared, onFinished)
       }
       $scope.close = function() {
         $mdDialog.hide(); 
-      }
+      };
     }
 
 
diff --git a/app/views/dialogs/upload-addfile.html b/app/views/dialogs/upload-addfile.html
index 383b1f6..876e8b2 100644
--- a/app/views/dialogs/upload-addfile.html
+++ b/app/views/dialogs/upload-addfile.html
@@ -12,8 +12,33 @@ <h2>Upload File</h2>
     </md-toolbar>
     <md-dialog-content class="padding16">
         <label for="uploadFile" class="choose-file">
-            <input type="file" id="uploadFile" accept=".webp,.mp3"/>
+            <input
+              type="file"
+              id="uploadFile"
+              accept=".webp,.mp3,.wav"
+              ngf-select
+              ngf-change="onFilesChanged($files, $invalidFiles)"
+              ngf-pattern="'.webp,.mp3,.wav'"
+              ngf-accept="'.webp,.mp3,.wav'"
+              multiple
+            />
         </label>
+        <div
+          ngf-drop
+          ngf-change="onFilesChanged($files, $invalidFiles)"
+          ngf-pattern="'.webp,.mp3,.wav'"
+          ngf-accept="'.webp,.mp3,.wav'"
+          ngf-multiple="true"
+          ngf-drag-over-class="'drag-over'"
+          class="upload-drop-zone"
+          style="margin-top:12px;border:2px dashed #3f51b5;border-radius:10px;padding:14px;text-align:center;color:#3f51b5;background:#f7f9ff;height: 100px;padding-top: 35px;"
+        >
+          Drag and drop file(s) here
+        </div>
+        <div ng-if="data.files && data.files.length" style="margin-top:8px;font-size:13px;color:#222;">
+          Selected: {{data.files[0].name}}<span ng-if="data.files.length > 1"> +{{data.files.length - 1}} more</span>
+        </div>
+        <div ng-if="errorText" style="margin-top:8px;color:#d32f2f;font-size:13px;">{{errorText}}</div>
     </md-dialog-content>
   <md-dialog-actions layout="row">
     <md-button  class="md-raised md-primary m0" ng-click="submit()">
diff --git a/bower.json b/bower.json
index 8f936e9..a9a3840 100644
--- a/bower.json
+++ b/bower.json
@@ -20,6 +20,7 @@
     "angular-material-data-table": "^0.10.10",
     "nickel.minStrength": "*",
     "ng-idle": "^1.3.2",
+    "ng-file-upload": "^12.2.13",
     "flag-css": "0.0.11",
     "flag-icon-css": "^3.4.5",
     "moment": "^2.24.0",
diff --git a/gulpfile.js b/gulpfile.js
index 5341bb9..11cc7d5 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -283,6 +283,7 @@ var deps = [
 "./bower_components/angular-material-data-table/dist/md-data-table.js",
 "./bower_components/zxcvbn/dist/zxcvbn.js",
 "./bower_components/ng-idle/angular-idle.js",
+'./bower_components/ng-file-upload/ng-file-upload.js',
 './bower_components/urijs/src/URI.min.js',
 ];
 var files = [
@@ -319,6 +320,7 @@ gulp.task('compress-js', ['scripts'], function() {
 './bower_components/angular-material-data-table/dist/md-data-table.js',
 './bower_components/zxcvbn/dist/zxcvbn.js',
 './bower_components/ng-idle/angular-idle.js',
+'./bower_components/ng-file-upload/ng-file-upload.js',
 './bower_components/moment/moment.js',
 './bower_components/clipboard/dist/clipboard.js',
 './bower_components/ngclipboard/dist/ngclipboard.js',