diff --git a/app/assets/javascripts/assessments_show.coffee b/app/assets/javascripts/assessments_show.coffee
index 1edf0f7d8..d75876e79 100644
--- a/app/assets/javascripts/assessments_show.coffee
+++ b/app/assets/javascripts/assessments_show.coffee
@@ -1,11 +1,11 @@
 # On click to 'fake submit' it triggers a click even on file picker
 # so that the user can pick the file
-$('#handin_show_assessment #fake-submit').click (e)->
-	e.preventDefault()
-	$("#handin_show_assessment input[type='file']").trigger('click');
+# $('#handin_show_assessment #fake-submit').click (e)->
+# 	e.preventDefault()
+# 	$("#handin_show_assessment input[type='file']").trigger('click');
 
-# On file pick, we submit the form automatically
-$("input[type='file']").change (e)->
-	$('#handin_show_assessment #new_submission').submit()
-	$("#handin_show_assessment input[type='file']").val("")  # clear for re-selecting the same file
+# # On file pick, we submit the form automatically
+# $("input[type='file']").change (e)->
+# 	$('#handin_show_assessment #new_submission').submit()
+# 	$("#handin_show_assessment input[type='file']").val("")  # clear for re-selecting the same file
 
diff --git a/app/assets/stylesheets/style.css.scss b/app/assets/stylesheets/style.css.scss
index 671ed523a..a4d37bebc 100755
--- a/app/assets/stylesheets/style.css.scss
+++ b/app/assets/stylesheets/style.css.scss
@@ -1147,3 +1147,31 @@ div.center {
 .btn:hover {
   background-color: rgba(140,0,0,0.95) !important;
 }
+
+
+.drag-drop-handin {
+  height: 120px;
+  border: 3px dashed grey;
+  border-radius: 10px;
+  cursor: pointer;
+  margin-top: 10px;
+  align-items: center;
+  justify-content: center;
+
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+   -khtml-user-select: none; /* Konqueror HTML */
+     -moz-user-select: none; /* Firefox */
+      -ms-user-select: none; /* Internet Explorer/Edge */
+          user-select: none; /* Non-prefixed version, currently
+                                supported by Chrome and Opera */
+}
+
+.drag-drop-handin:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+#remove-handed-in {
+  color: grey;
+  cursor: pointer;
+}
diff --git a/app/views/assessments/_handin_form.html.erb b/app/views/assessments/_handin_form.html.erb
index c943570b1..de17afc45 100644
--- a/app/views/assessments/_handin_form.html.erb
+++ b/app/views/assessments/_handin_form.html.erb
@@ -47,17 +47,141 @@
                   <p>* denotes required fields. The submission cannot be completed without filling out the required fields.</p>
               <% end %>
             <% end %>
-            <!-- Academic integrity checkbox -->
+            <% content_for :javascripts do %>
+              <script>
+                function dropHandler(e) {
+                  e.preventDefault();
+                  $(".drag-drop-handin").get(0).style = undefined;
+                  handleFiles(e.dataTransfer.files);
+                }
+
+                function dragOverHandler(e) {
+                  e.preventDefault();
+                }
+
+                function dragEnter(e) {
+                  $(".drag-drop-handin").get(0).style = "background:rgba(0,0,0,0.05);";
+                }
+
+                function dragExit(e) {
+                  $(".drag-drop-handin").get(0).style = undefined;
+                }
+
+                function clickDrag() {
+                  $("#handin_show_assessment input[type='file']").trigger('click');
+                }
+
+                document.querySelector("#handin_show_assessment input[type='file']").addEventListener(
+                  "change",
+                  function (e) {
+                    showFiles();
+                  },
+                  false
+                );
+
+                function handleFiles(fileList) {
+                  if (fileList.length === 1) {
+                    var fileSelector = $("#handin_show_assessment input[type='file']").get(0);
+                    fileSelector.files = fileList;
+                    showFiles();
+                  } else {
+                    // invalid number of files alert
+                  }
+                }
+
+                function showFiles() {
+                  var fileSelector = $("#handin_show_assessment input[type='file']").get(0);
+                  var file = fileSelector.files[0];
+                  console.log(file);
+                  $("#handin-file-name").text(file.name);
+                  $("#handin-modify-date").text(moment(file.lastModified).format("MMMM Do YYYY, h:mm a"));
+
+                  var sOutput = file.size + " bytes";
+                  for (var aMultiples = ["kb", "mb", "gb", "tb", "pb", "eb", "zb", "yb"], nMultiple = 0, nApprox = file.size / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
+                    sOutput = nApprox.toFixed(1) + " " + aMultiples[nMultiple];
+                  }
+
+                  $("#handin-size").text(sOutput);
+
+                  if (file) {
+                    var reader = new FileReader();
+                    reader.readAsText(file, "UTF-8");
+                    reader.onload = function (evt) {
+                        var lines = evt.target.result;
+                        var lineCount = lines.split("\n").length;
+                        $("#handin-loc").text(lineCount);
+                    }
+                    reader.onerror = function (evt) {
+                        $("#handin-text").hide();
+                    }
+                  }
+
+                  $(".handin-row").hide();
+                  $(".handedin-row").show();
+                  enableSubmit();
+                }
+
+                $("#integrity_checkbox").change(function (e) {
+                  enableSubmit();
+                });
+
+                $("#remove-handed-in").click(function (e) {
+                  e.preventDefault();
+                  var fileSelector = $("#handin_show_assessment input[type='file']").get(0);
+                  fileSelector.value = null;
+                  $(".handin-row").show();
+                  $(".handedin-row").hide();
+                  enableSubmit();
+                });
+
+                function enableSubmit() {
+                  var checkbox = document.getElementById("integrity_checkbox");
+                  var fileSelector = $("#handin_show_assessment input[type='file']").get(0);
+                  if (fileSelector.files.length !== 1) {
+                    $("#fake-submit").addClass("disabled");
+                  } else if (!checkbox.checked) {
+                    $("#fake-submit").addClass("disabled");
+                  } else {
+                    $("#fake-submit").removeClass("disabled");
+                  }
+                }
+              </script>
+            <% end %>
+            <div class="row handin-row">
+              <div class="valign-wrapper drag-drop-handin" onclick="clickDrag();" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);" ondragenter="dragEnter(event);" ondragexit="dragExit(event);">
+                <p class="center-align" style="color:grey;" onclick="clickDrag();" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);" ondragenter="dragEnter(event);" ondragexit="dragExit(event);"><b>Drag a file here to hand in. Click to select a file.</b> <br /> <span style="font-size: 10px;">Files do not submit automatically.</span></p>
+              </div>
+            </div>
+
+            <div class="row handedin-row" style="display: none;margin-top: 10px;">
+              <div class="col s2 center-align">
+                <i class="material-icons" style="font-size: 5rem;">insert_drive_file</i>
+              </div>
+              <div class="col s8">
+                <p>
+                  <b id="handin-file-name"></b><br />
+                  Last modified: <span id="handin-modify-date"></span><br />
+                  <span id="handin-text">
+                    Lines of code: <span id="handin-loc">Calculating...</span><br />
+                  </span>
+                    File size: <span id="handin-size"></span><br />
+                </p>
+              </div>
+              <div class="col s1 right-align">
+                <i id="remove-handed-in" class="material-icons small">close</i>
+              </div>
+            </div>
+
             <%= check_box_tag(:integrity_checkbox) %>
             <%= label_tag(:integrity_checkbox, "I affirm that I have complied with this course's academic integrity policy as defined in the syllabus.") %>
 
             <%= f.file_field :file %>
-            <div class="row" style="padding-top: 10px">           
+            <div class="row" style="padding-top: 10px">
               <div id = "submission_error" style = "color:red" class="col s6 m8 center-align"></div>
-              <% if @aud.past_due_at? then %>             
-                  <div class="col s6 m4 center-align"><%= f.submit("Submit Late", id:"fake-submit",  class: "btn primary handin-btn", onclick: "setSubmitClicked()") %></div>
-              <% else %>             
-                  <div class="col s6 m4 center-align"><%= f.submit("Submit", id:"fake-submit", class: "btn primary handin-btn", onclick: "setSubmitClicked()") %></div>
+              <% if @aud.past_due_at? then %>
+                  <div class="col s6 m4 center-align"><%= f.submit("Submit Late", id:"fake-submit",  class: "btn primary handin-btn disabled") %></div>
+              <% else %>
+                  <div class="col s6 m4 center-align"><%= f.submit("Submit", id:"fake-submit", class: "btn primary handin-btn disabled") %></div>
               <% end %>
             </div>
             <div class="row">
@@ -71,7 +195,7 @@
                 <div class="smallText col s6 offset-s6 m4 offset-m8 center-align" style="padding-top: 6px">&nbsp;&nbsp;(<%= numSubmissions %> submissions left)</div>
               <% else %>
                 <div class="smallText col s6 offset-s6 m4 offset-m8 center-align" style="padding-top: 6px">(&nbsp;&#x221e;&nbsp;&nbsp;submissions left)</div>
-              <% end %>           
+              <% end %>
             </div>
           <% end %>
         <% end %>
diff --git a/app/views/assessments/show.html.erb b/app/views/assessments/show.html.erb
index 3b50b845f..556767235 100755
--- a/app/views/assessments/show.html.erb
+++ b/app/views/assessments/show.html.erb
@@ -142,7 +142,6 @@
 
         <p class="valign-wrapper">
           <i class="valign material-icons">today</i>&nbsp;&nbsp;Last day to handin:&nbsp;&nbsp;<b><span class="moment-date-time" data-format="MMMM Do YYYY, h:mm a"> <%= end_at_display(@aud.end_at false) %></span></b>
-
         </p>
 
         <% if @cud.instructor? and @assessment.exam? %>