Issue #687. Add image upload input if the client supports FormData

webcompat · Sep 1, 2015 · b3d0d87 · b3d0d87
1 parent 23cbde9
commit b3d0d87
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 11 deletions.
diff --git a/webcompat/static/css/development/components/comment.css b/webcompat/static/css/development/components/comment.css
@@ -169,6 +169,7 @@
 }
 .wc-Comment--form  .wc-Comment-wrapper {
   padding-top: 1em;
+  margin-bottom: 1.5em;
 }
 /* drag and drop */
 /*.Comment-drag{

diff --git a/webcompat/static/js/lib/issues.js b/webcompat/static/js/lib/issues.js
@@ -95,6 +95,16 @@ issues.TextAreaView = Backbone.View.extend({
   }, 250, {maxWait: 1500})
 });
 
+issues.ImageUploadView = Backbone.View.extend({
+  tagName: 'div',
+  className: 'wc-Form-group',
+  template: _.template($('#upload-input-tmpl').html()),
+  render: function() {
+    this.$el.html(this.template()).insertAfter($('textarea'));
+    return this;
+  },
+});
+
 // TODO: add comment before closing if there's a comment.
 issues.StateButtonView = Backbone.View.extend({
   el: $('.Button--action'),
@@ -154,6 +164,7 @@ issues.MainView = Backbone.View.extend({
   keyboardEvents: {
     'g': 'githubWarp'
   },
+  _supportsFormData: 'FormData' in window,
   initialize: function() {
     $(document.body).addClass('language-html');
     var issueNum = {number: issueNumber};
@@ -186,18 +197,24 @@ issues.MainView = Backbone.View.extend({
     this.body = new issues.BodyView(issueModel);
     this.labels = new issues.LabelsView(issueModel);
     this.textArea = new issues.TextAreaView();
+    this.imageUpload = new issues.ImageUploadView();
     this.stateButton = new issues.StateButtonView(_.extend(issueModel, {mainView: this}));
   },
   fetchModels: function() {
     var self = this;
     var headersBag = {headers: {'Accept': 'application/json'}};
     this.issue.fetch(headersBag).success(function() {
-      _.each([self.title, self.metadata, self.body, self.labels, self.stateButton, self],
+      _.each([self.title, self.metadata, self.body, self.labels,
+              self.stateButton, self.imageUpload, self],
         function(elm) {
-          elm.render();
-          _.each($('.wc-IssueDetail-details code'), function(elm) {
-            Prism.highlightElement(elm);
-          });
+          if (elm == self.imageUpload && .self_supportsFormData) {
+            elm.render();
+          } else {
+            elm.render();
+            _.each($('.wc-IssueDetail-details code'), function(elm) {
+              Prism.highlightElement(elm);
+            });
+          }
         }
       );
 

diff --git a/webcompat/templates/issue.html b/webcompat/templates/issue.html
@@ -36,7 +36,7 @@ <h1 class="wc-IssueDetail-title wc-Title--l">
           </span>
         </script>
       </div>
-      
+
       <div class="wc-IssueDetail-report">
         <script type="text/template" id="issue-info-tmpl">
         <div class="wc-Comment">
@@ -89,11 +89,18 @@ <h1 class="wc-IssueDetail-title wc-Title--l">
           <img class="" src="{{ session.avatar_url }}" alt="Avatar"/>
         </div>
         <div class="wc-Comment-body wc-Comment-body--caret">
-        <!--<div class="Comment-drag">-->
-        <!-- TODO(miket) <div class="comment__dd">Attach images by dragging &amp; dropping, <span class="comment__dd__label">selecting them</span> or pasting form the clipboad </div> -->
         <label for="wc-Comment-text" class="wc-sronly">Comment Text</label>
           <textarea id="Comment-text" class="wc-Comment-wrapper wc-Comment-text" placeholder="Leave a comment"></textarea>
-        <!--</div>-->
+          <script type="text/template" id="upload-input-tmpl">
+          <!-- div class="wc-Form-group" parent created by BackBone -->
+          <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>
+          </script>
           <div class="wc-Comment-button">
             <button class="Button Button--action js-issue-state-button">
               <script type="text/template" id="state-button-tmpl">
@@ -132,14 +139,14 @@ <h1 class="wc-IssueDetail-title wc-Title--l">
         </div>
     </div>
   </script>
-  
+
   <script type="text/template" id="qr-image-tmpl">
     <div class="wc-QrImage-header">
       <button class="wc-QrImage-btn">Close</button>
     </div>
     <div class="wc-QrImage-main"><img src="<%= qrDataUrl %>" alt="QR code"></div>
   </script>
-  
+
 {% endblock %}
 {% block extrascripts %}
 <script>var issueNumber={{ number }};