Issue #687. POST FormData to server and add image embedding comment o…

…n success.
webcompat · Oct 1, 2015 · d6a3fc8 · d6a3fc8
1 parent 3026659
commit d6a3fc8
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 3 deletions.
diff --git a/webcompat/static/js/lib/issues.js b/webcompat/static/js/lib/issues.js
@@ -116,7 +116,40 @@ issues.ImageUploadView = Backbone.View.extend({
   },
   validateAndUpload: function(e) {
     if (this.checkImageTypeValidity(e.target)) {
-      // TODO: uploading here.
+      // The assumption here is that FormData is supported, otherwise
+      // the upload view is not shown to the user.
+      var formdata = new FormData($('form').get(0));
+      $.ajax({
+        // File upload will fail if we pass contentType: multipart/form-data
+        // to jQuery (because it won't have the boundary string and then all
+        // hell breaks loose and you're like 10 stackoverflow posts deep).
+        contentType: false,
+        processData: false,
+        data: formdata,
+        method: 'POST',
+        url: '/upload/',
+        success: _.bind(function(response) {
+          this.addImageUploadComment(response);
+        }, this),
+        error: function() {
+          var msg = 'There was an error trying to upload the image.';
+          wcEvents.trigger('flash:error', {message: msg, timeout: 3000});
+        }
+      });
+    }
+  },
+  addImageUploadComment: function(response) {
+    // reponse looks like {filename: "blah", url: "http...blah"}
+    var DELIMITER = '\n\n';
+    var textarea = $('.wc-Comment-text');
+    var textareaVal = textarea.val();
+    var imageURL = _.template('![Screenshot of the site issue](<%= url %>)');
+    var compiledImageURL = imageURL({url: response.url});
+
+    if (!$.trim(textarea.val())) {
+      textarea.val(compiledImageURL);
+    } else {
+      textarea.val(textareaVal + DELIMITER + compiledImageURL);
     }
   },
   // Adapted from bugform.js

diff --git a/webcompat/templates/issue.html b/webcompat/templates/issue.html
@@ -93,13 +93,13 @@ <h1 class="wc-IssueDetail-title wc-Title--l">
           <textarea id="Comment-text" class="wc-Comment-wrapper wc-Comment-text" placeholder="Leave a comment"></textarea>
           <script type="text/template" id="upload-input-tmpl">
           <!-- div class="wc-Form-group" parent created by BackBone -->
-          <div class="wc-Form-upload">
+          <form><div class="wc-Form-upload">
             <span class="wc-Form-upload-icon" aria-hidden="true">
               <span class="wc-Icon wc-Icon--cloud-upload"></span>
             </span>
             <label class="wc-Form-label wc-Form-label--upload" for="image">Attach a screenshot image</label>
             <input accept=".jpe,.jpg,.jpeg,.gif,.png,.bmp" class="ButtonUpload" id="image" name="image" type="file">
-          </div>
+          </div></form>
           </script>
           <div class="wc-Comment-button">
             <button class="Button Button--action js-issue-state-button">