From 743c0ebd6729d6f0af79722cbe777b6eba5d7d5b Mon Sep 17 00:00:00 2001
From: Allen Wittenauer <aw@apache.org>
Date: Fri, 3 Jun 2016 17:07:39 -0700
Subject: [PATCH] HDFS-7767. Use the noredirect flag in WebHDFS to allow web
 browsers to upload files via the NN UI (Ravi Prakash via aw)

(cherry picked from commit 99a771cd7a3f792a76ac89c406b82a983c059d28)
---
 .../src/main/webapps/hdfs/explorer.html       | 25 ++++++++-
 .../src/main/webapps/hdfs/explorer.js         | 51 +++++++++++++++++++
 2 files changed, 74 insertions(+), 2 deletions(-)

diff --git a/hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/explorer.html b/hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/explorer.html
index 5106006c0e2..51f72e574c8 100644
--- a/hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/explorer.html
+++ b/hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/explorer.html
@@ -119,6 +119,23 @@
       </div>
     </div>
 
+    <div class="modal" id="modal-upload-file" tabindex="-1" role="dialog" aria-hidden="true">
+      <div class="modal-dialog">
+         <div class="modal-content">
+           <div class="modal-header"><button type="button" class="close"
+             data-dismiss="modal" aria-hidden="true">&times;</button>
+             <h4 class="modal-title" id="file-upload-title">Upload File</h4>
+           </div>
+           <div class="modal-body" id="file-upload-body">
+             <input id="modal-upload-file-input" type="file" class="file" multiple>
+           </div>
+           <div class="modal-footer">
+             <button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
+             <button type="button" class="btn btn-success" id="modal-upload-file-button" data-complete-text="Uploading...">Upload</button>
+           </div>
+         </div>
+      </div>
+    </div>
   <div class="modal" id="delete-modal" tabindex="-1" role="dialog" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
@@ -142,7 +159,7 @@
   </div>
 
       <div class="row">
-      <div class="col-xs-11">
+      <div class="col-xs-10 col-md-10">
         <form onsubmit="return false;">
           <div class="input-group">
             <input type="text" class="form-control" id="directory"/>
@@ -152,12 +169,16 @@
           </div>
         </form>
       </div>
-      <div class="col-xs-1">
+      <div class="col-xs-2 col-md-2">
         <button type="button" class="btn btn-default" data-toggle="modal"
           aria-label="New Directory" data-target="#btn-create-directory"
           title="Create Directory">
             <span class="glyphicon glyphicon-folder-open"></span>
         </button>
+        <button type="button" class="btn btn-default" data-toggle="modal"
+          data-target="#modal-upload-file" title="Upload Files">
+            <span class="glyphicon glyphicon-cloud-upload"></span>
+        </button>
       </div>
     </div>
 
diff --git a/hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/explorer.js b/hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/explorer.js
index 102da9da2bc..f835baf7208 100644
--- a/hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/explorer.js
+++ b/hadoop-hdfs-project/hadoop-hdfs/src/main/webapps/hdfs/explorer.js
@@ -366,5 +366,56 @@
     });
   })
 
+  $('#modal-upload-file-button').click(function() {
+    $(this).prop('disabled', true);
+    $(this).button('complete');
+    var files = []
+    var numCompleted = 0
+
+    for(var i = 0; i < $('#modal-upload-file-input').prop('files').length; i++) {
+      (function() {
+        var file = $('#modal-upload-file-input').prop('files')[i];
+        var url = '/webhdfs/v1' + current_directory;
+        url = encode_path(append_path(url, file.name));
+        url += '?op=CREATE&noredirect=true';
+        files.push( { file: file } )
+        files[i].request = $.ajax({
+          type: 'PUT',
+          url: url,
+          processData: false,
+          crossDomain: true
+        });
+      })()
+     }
+    for(var f in files) {
+      (function() {
+        var file = files[f];
+        file.request.done(function(data) {
+          var url = data['Location'];
+          $.ajax({
+            type: 'PUT',
+            url: url,
+            data: file.file,
+            processData: false,
+            crossDomain: true
+          }).complete(function(data) {
+            numCompleted++;
+            if(numCompleted == files.length) {
+              $('#modal-upload-file').modal('hide');
+              $('#modal-upload-file-button').button('reset');
+              browse_directory(current_directory);
+            }
+          }).error(function(jqXHR, textStatus, errorThrown) {
+            numCompleted++;
+            show_err_msg("Couldn't upload the file " + file.file.name + ". "+ errorThrown);
+          });
+        }).error(function(jqXHR, textStatus, errorThrown) {
+          numCompleted++;
+          show_err_msg("Couldn't find datanode to write file. " + errorThrown);
+        });
+      })();
+    }
+  });
+
   init();
 })();