diff --git a/progit/static/progit.css b/progit/static/progit.css
index fa8fdbc..7caad46 100644
--- a/progit/static/progit.css
+++ b/progit/static/progit.css
@@ -704,3 +704,20 @@ ul.changes {
     margin-left: 0.3em;
     margin-bottom: 0.3em;
 }
+
+.progress-trough {
+    border: 1px solid #000000;
+    height: 18px;
+    width: 100%;
+    position: relative;
+}
+
+.progress-bar {
+    width: 50%;
+    height: 100%;
+    background-color: #0066cc;
+}
+
+#preview img {
+    width: 50%;
+}
diff --git a/progit/static/upload.js b/progit/static/upload.js
new file mode 100644
index 0000000..379433e
--- /dev/null
+++ b/progit/static/upload.js
@@ -0,0 +1,119 @@
+/************************************************************************
+ * HTML5 Multiple File Uploader Demo                                    *
+ ************************************************************************/
+
+function doUpload(csrf_token, files) {
+  $("#progress").show();
+  var $progressBar   = $("#progress-bar");
+
+  // Gray out the form.
+  //$("#upload-form :input").attr("disabled", "disabled");
+
+  // Initialize the progress bar.
+  $progressBar.css({"width": "0%"});
+  var fd = new FormData();
+  fd.append('csrf_token', csrf_token);
+
+  // Attach the files.
+  for (var i = 0, ie = files.length; i < ie; i++) {
+    // Collect the other form data.
+    fd.append("filestream", files[i]);
+  }
+
+  var xhr = $.ajax({
+    xhr: function() {
+      var xhrobj = $.ajaxSettings.xhr();
+      if (xhrobj.upload) {
+        xhrobj.upload.addEventListener("progress", function(event) {
+          var percent = 0;
+          var position = event.loaded || event.position;
+          var total    = event.total;
+          if (event.lengthComputable) {
+            percent = Math.ceil(position / total * 100);
+          }
+
+          // Set the progress bar.
+          $progressBar.css({"width": percent + "%"});
+          $progressBar.text(percent + "%");
+        }, false)
+      }
+      return xhrobj;
+    },
+    url: UPLOAD_URL,
+    method: "POST",
+    contentType: false,
+    processData: false,
+    cache: false,
+    data: fd,
+    success: function(data) {
+      $progressBar.css({"width": "100%", "color": "white"});
+
+      // How'd it go?
+      if (data.output === "notok") {
+        // Uh-oh.
+        window.alert(data);
+        return;
+      }
+      else {
+        console.log(data);
+        var _txt = $("#comment").val();
+        if (_txt) {
+          _txt += '\n';
+        }
+        $("#comment").val(
+           _txt
+           + '[![' + data.filename + '](' + data.filelocation + ')]('
+            + data.filelocation + ')'
+        )
+      }
+      setTimeout(
+        function(){
+          $("#progress").hide()
+        },
+        1000  /* 1 000ms = 2 s */
+      );
+    },
+  });
+}
+
+function initDropbox(csrf_token) {
+  var $dropbox = $("#comment");
+
+  // On drag enter...
+  $dropbox.on("dragenter", function(e) {
+    console.log('dragenter');
+    e.stopPropagation();
+    e.preventDefault();
+    $(this).addClass("active");
+  });
+
+  // On drag over...
+  $dropbox.on("dragover", function(e) {
+    console.log('dragover');
+    e.stopPropagation();
+    e.preventDefault();
+  });
+
+  // On drop...
+  $dropbox.on("drop", function(e) {
+    console.log('drop');
+    e.preventDefault();
+    $(this).removeClass("active");
+
+    // Get the files.
+    var files = e.originalEvent.dataTransfer.files;
+
+    doUpload(csrf_token, files);
+});
+
+  // If the files are dropped outside of the drop zone, the browser will
+  // redirect to show the files in the window. To avoid that we can prevent
+  // the 'drop' event on the document.
+  function stopDefault(e) {
+    e.stopPropagation();
+    e.preventDefault();
+  }
+  $(document).on("dragenter", stopDefault);
+  $(document).on("dragover", stopDefault);
+  $(document).on("drop", stopDefault);
+}
diff --git a/progit/templates/issue.html b/progit/templates/issue.html
index 9ade753..bdb3f36 100644
--- a/progit/templates/issue.html
+++ b/progit/templates/issue.html
@@ -31,7 +31,8 @@
 
 {% if authenticated and form %}
   <form action="{{ url_for('update_issue', username=username,
-           repo=repo.name, issueid=issueid) }}" method="post">
+           repo=repo.name, issueid=issueid) }}" method="post"
+           enctype="multipart/form-data">
   {{ form.csrf_token }}
 {% endif %}
 
@@ -128,6 +129,13 @@
     (supports the <a href="http://daringfireball.net/projects/markdown/syntax"
       target="_blank">Markdown syntax</a>)
   </header>
+  Select files OR drag them into the comment field below.
+  <input id="file-picker" type="file" name="file" accept="image/*" multiple>
+  <fieldset id="progress" style="display: none">
+    <div class="progress-trough">
+      <div id="progress-bar" class="progress-bar">0%</div>
+    </div>
+  </fieldset>
   <div id="tabs">
     <ul>
       <li><a href="#edit">Comment</a></li>
@@ -159,6 +167,24 @@
 {% block jscripts %}
 {{ super() }}
 <script type="text/javascript">
+  var UPLOAD_URL = "{{ url_for('upload_issue', repo=repo.name, issueid=issue.id, username=username) }}";
+</script>
+<script type="text/javascript"
+  src="{{ url_for('static', filename='upload.js') }}">
+</script>
+<script type="text/javascript">
+{% if authenticated and form %}
+$(document).ready(function() {
+  // Set up the drag/drop zone.
+  initDropbox("{{ form.csrf_token.current_token }}");
+
+  // Set up the handler for the file input box.
+  $("#file-picker").on("change", function() {
+    doUpload("{{ form.csrf_token.current_token }}", this.files);
+  });
+});
+{% endif %}
+
 $(function() {
   $( "#tabs" ).tabs();