updated version

Add image contents type resopnse handler

Cakefile

@@ -1,6 +1,7 @@
 fs          = require 'fs'
 path        = require 'path'
 {exec}      = require 'child_process'
+less        = require 'less'
 
 sourceFiles  = [
   'SwaggerUi'
@@ -71,13 +72,25 @@ task 'dist', 'Build a distribution', ->
           console.log '   : Minifying all...'
           exec 'java -jar "./bin/yuicompressor-2.4.7.jar" --type js -o ' + 'dist/swagger-ui.min.js ' + 'dist/swagger-ui.js', (err, stdout, stderr) ->
             throw err if err
-            pack()
+            lessc()
+
+  lessc = ->
+    # Someone who knows CoffeeScript should make this more Coffee-licious
+    console.log '   : Compiling LESS...'
+
+    less.render fs.readFileSync("src/main/less/screen.less", 'utf8'), (err, css) ->
+      console.log err
+      fs.writeFileSync("src/main/html/css/screen.css", css)
+    pack()
 
   pack = ->
     console.log '   : Packaging...'
     exec 'cp -r lib dist'
+    console.log '   : Copied swagger-ui libs'
     exec 'cp -r node_modules/swagger-client/lib/swagger.js dist/lib'
+    console.log '   : Copied swagger dependencies'
     exec 'cp -r src/main/html/* dist'
+    console.log '   : Copied html dependencies'
     console.log '   !'
 
 task 'spec', "Run the test suite", ->
@@ -107,6 +120,7 @@ task 'watch', 'Watch source files for changes and autocompile', ->
   watchFiles("src/main/template")
   watchFiles("src/main/javascript")
   watchFiles("src/main/html")
+  watchFiles("src/main/less")
   watchFiles("src/test")
 
 notify = (message) ->
@@ -115,4 +129,4 @@ notify = (message) ->
 #  options =
 #    title: 'CoffeeScript'
 #    image: 'bin/CoffeeScript.png'
-#  try require('growl') message, options
+#  try require('growl') message, options

dist/lib/swagger.js

@@ -366,7 +366,7 @@
     };
 
     SwaggerResource.prototype.addOperations = function(resource_path, ops, consumes, produces) {
-      var method, o, op, ref, responseMessages, type, _i, _len, _results;
+      var method, o, op, r, ref, responseMessages, type, _i, _j, _len, _len1, _results;
       if (ops) {
         _results = [];
         for (_i = 0, _len = ops.length; _i < _len; _i++) {
@@ -401,6 +401,11 @@
           }
           if (o.errorResponses) {
             responseMessages = o.errorResponses;
+            for (_j = 0, _len1 = responseMessages.length; _j < _len1; _j++) {
+              r = responseMessages[_j];
+              r.message = r.reason;
+              r.reason = null;
+            }
           }
           o.nickname = this.sanitize(o.nickname);
           op = new SwaggerOperation(o.nickname, resource_path, method, o.parameters, o.summary, o.notes, type, responseMessages, this, consumes, produces);

dist/swagger-ui.js

@@ -1470,6 +1470,8 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
       return _ref4;
     }
 
+    OperationView.prototype.invocationUrl = null;
+
     OperationView.prototype.events = {
       'submit .sandbox': 'submitOperation',
       'click .submit': 'submitOperation',
@@ -1554,7 +1556,7 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
     };
 
     OperationView.prototype.submitOperation = function(e) {
-      var error_free, form, map, o, opts, val, _i, _j, _k, _len, _len1, _len2, _ref5, _ref6, _ref7;
+      var error_free, form, isFileUpload, map, o, opts, val, _i, _j, _k, _len, _len1, _len2, _ref5, _ref6, _ref7;
       if (e != null) {
         e.preventDefault();
       }
@@ -1578,12 +1580,16 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
         opts = {
           parent: this
         };
+        isFileUpload = false;
         _ref5 = form.find("input");
         for (_i = 0, _len = _ref5.length; _i < _len; _i++) {
           o = _ref5[_i];
           if ((o.value != null) && jQuery.trim(o.value).length > 0) {
             map[o.name] = o.value;
           }
+          if (o.type === "file") {
+            isFileUpload = true;
+          }
         }
         _ref6 = form.find("textarea");
         for (_j = 0, _len1 = _ref6.length; _j < _len1; _j++) {
@@ -1603,7 +1609,11 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
         opts.responseContentType = $("div select[name=responseContentType]", $(this.el)).val();
         opts.requestContentType = $("div select[name=parameterContentType]", $(this.el)).val();
         $(".response_throbber", $(this.el)).show();
-        return this.model["do"](map, opts, this.showCompleteStatus, this.showErrorStatus, this);
+        if (isFileUpload) {
+          return this.handleFileUpload(map, form);
+        } else {
+          return this.model["do"](map, opts, this.showCompleteStatus, this.showErrorStatus, this);
+        }
       }
     };
 
@@ -1611,6 +1621,82 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
       return parent.showCompleteStatus(response);
     };
 
+    OperationView.prototype.handleFileUpload = function(map, form) {
+      var bodyParam, headerParams, o, obj, param, _i, _j, _k, _len, _len1, _len2, _ref5, _ref6, _ref7,
+        _this = this;
+      console.log("it's a file upload");
+      _ref5 = form.serializeArray();
+      for (_i = 0, _len = _ref5.length; _i < _len; _i++) {
+        o = _ref5[_i];
+        if ((o.value != null) && jQuery.trim(o.value).length > 0) {
+          map[o.name] = o.value;
+        }
+      }
+      bodyParam = new FormData();
+      _ref6 = this.model.parameters;
+      for (_j = 0, _len1 = _ref6.length; _j < _len1; _j++) {
+        param = _ref6[_j];
+        if (param.paramType === 'form') {
+          bodyParam.append(param.name, map[param.name]);
+        }
+      }
+      headerParams = {};
+      _ref7 = this.model.parameters;
+      for (_k = 0, _len2 = _ref7.length; _k < _len2; _k++) {
+        param = _ref7[_k];
+        if (param.paramType === 'header') {
+          headerParams[param.name] = map[param.name];
+        }
+      }
+      console.log(headerParams);
+      $.each($('input[type~="file"]'), function(i, el) {
+        return bodyParam.append($(el).attr('name'), el.files[0]);
+      });
+      console.log(bodyParam);
+      this.invocationUrl = this.model.supportHeaderParams() ? (headerParams = this.model.getHeaderParams(map), this.model.urlify(map, false)) : this.model.urlify(map, true);
+      $(".request_url", $(this.el)).html("<pre>" + this.invocationUrl + "</pre>");
+      obj = {
+        type: this.model.method,
+        url: this.invocationUrl,
+        headers: headerParams,
+        data: bodyParam,
+        dataType: 'json',
+        contentType: false,
+        processData: false,
+        error: function(data, textStatus, error) {
+          return _this.showErrorStatus(_this.wrap(data), _this);
+        },
+        success: function(data) {
+          return _this.showResponse(data, _this);
+        },
+        complete: function(data) {
+          return _this.showCompleteStatus(_this.wrap(data), _this);
+        }
+      };
+      if (window.authorizations) {
+        window.authorizations.apply(obj);
+      }
+      jQuery.ajax(obj);
+      return false;
+    };
+
+    OperationView.prototype.wrap = function(data) {
+      var o,
+        _this = this;
+      o = {};
+      o.content = {};
+      o.content.data = data.responseText;
+      o.getHeaders = function() {
+        return {
+          "Content-Type": data.getResponseHeader("Content-Type")
+        };
+      };
+      o.request = {};
+      o.request.url = this.invocationUrl;
+      o.status = data.status;
+      return o;
+    };
+
     OperationView.prototype.getSelectedValue = function(select) {
       var opt, options, _i, _len, _ref5;
       if (!select.multiple) {
@@ -1744,15 +1830,17 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
       } else if (contentType.indexOf("text/html") === 0) {
         code = $('<code />').html(content);
         pre = $('<pre class="xml" />').append(code);
+      } else if (contentType.indexOf("image/") === 0) {
+        pre = $('<img>').attr('src', data.request.url);
       } else {
         code = $('<code />').text(content);
         pre = $('<pre class="json" />').append(code);
       }
       response_body = pre;
-      $(".request_url").html("<pre>" + data.request.url + "</pre>");
+      $(".request_url", $(this.el)).html("<pre>" + data.request.url + "</pre>");
       $(".response_code", $(this.el)).html("<pre>" + data.status + "</pre>");
       $(".response_body", $(this.el)).html(response_body);
-      $(".response_headers", $(this.el)).html("<pre>" + JSON.stringify(data.getHeaders()) + "</pre>");
+      $(".response_headers", $(this.el)).html("<pre>" + JSON.stringify(data.getHeaders(), null, "  ").replace(/\n/g, "<br>") + "</pre>");
       $(".response", $(this.el)).slideDown();
       $(".response_hider", $(this.el)).show();
       $(".response_throbber", $(this.el)).hide();

lib/swagger.js

@@ -366,7 +366,7 @@
     };
 
     SwaggerResource.prototype.addOperations = function(resource_path, ops, consumes, produces) {
-      var method, o, op, ref, responseMessages, type, _i, _len, _results;
+      var method, o, op, r, ref, responseMessages, type, _i, _j, _len, _len1, _results;
       if (ops) {
         _results = [];
         for (_i = 0, _len = ops.length; _i < _len; _i++) {
@@ -401,6 +401,11 @@
           }
           if (o.errorResponses) {
             responseMessages = o.errorResponses;
+            for (_j = 0, _len1 = responseMessages.length; _j < _len1; _j++) {
+              r = responseMessages[_j];
+              r.message = r.reason;
+              r.reason = null;
+            }
           }
           o.nickname = this.sanitize(o.nickname);
           op = new SwaggerOperation(o.nickname, resource_path, method, o.parameters, o.summary, o.notes, type, responseMessages, this, consumes, produces);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "swagger-ui",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Swagger UI is a dependency-free collection of HTML, Javascript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API",
   "scripts": {
     "build": "PATH=$PATH:./node_modules/.bin cake dist",
@@ -19,6 +19,8 @@
   "readmeFilename": "README.md",
   "dependencies": {
     "coffee-script": "~1.5.0",
-    "handlebars": "~1.0.10"
+    "swagger-client": "~2.0",
+    "handlebars": "~1.0.10",
+    "less": "~1.4.2"
   }
 }

src/main/coffeescript/view/OperationView.coffee

@@ -1,4 +1,6 @@
 class OperationView extends Backbone.View
+  invocationUrl: null
+
   events: {
   'submit .sandbox'         : 'submitOperation'
   'click .submit'           : 'submitOperation'
@@ -77,13 +79,14 @@ class OperationView extends Backbone.View
     if error_free
       map = {}
       opts = {parent: @}
-      #for o in form.serializeArray()
-        #if(o.value? && jQuery.trim(o.value).length > 0)
-          #map[o.name] = o.value
+
+      isFileUpload = false
 
       for o in form.find("input")
         if(o.value? && jQuery.trim(o.value).length > 0)
           map[o.name] = o.value
+        if o.type is "file"
+          isFileUpload = true
 
       for o in form.find("textarea")
         if(o.value? && jQuery.trim(o.value).length > 0)
@@ -98,12 +101,85 @@ class OperationView extends Backbone.View
       opts.requestContentType = $("div select[name=parameterContentType]", $(@el)).val()
 
       $(".response_throbber", $(@el)).show()
-
-      @model.do(map, opts, @showCompleteStatus, @showErrorStatus, @)
+      if isFileUpload
+        @handleFileUpload map, form
+      else
+        @model.do(map, opts, @showCompleteStatus, @showErrorStatus, @)
 
   success: (response, parent) ->
     parent.showCompleteStatus response
-  
+
+  handleFileUpload: (map, form) ->
+    console.log "it's a file upload"
+    for o in form.serializeArray()
+      if(o.value? && jQuery.trim(o.value).length > 0)
+        map[o.name] = o.value
+
+    # requires HTML5 compatible browser
+    bodyParam = new FormData()
+
+    # add params
+    for param in @model.parameters
+      if param.paramType is 'form'
+        bodyParam.append(param.name, map[param.name])
+
+    # headers in operation
+    headerParams = {}
+    for param in @model.parameters
+      if param.paramType is 'header'
+        headerParams[param.name] = map[param.name]
+
+    console.log headerParams
+
+    # add files
+    $.each $('input[type~="file"]'), (i, el) ->
+      bodyParam.append($(el).attr('name'), el.files[0])
+
+    console.log(bodyParam)
+
+    @invocationUrl = 
+      if @model.supportHeaderParams()
+        headerParams = @model.getHeaderParams(map)
+        @model.urlify(map, false)
+      else
+        @model.urlify(map, true)
+
+    $(".request_url", $(@el)).html "<pre>" + @invocationUrl + "</pre>"
+
+    obj = 
+      type: @model.method
+      url: @invocationUrl
+      headers: headerParams
+      data: bodyParam
+      dataType: 'json'
+      contentType: false
+      processData: false
+      error: (data, textStatus, error) =>
+        @showErrorStatus(@wrap(data), @)
+      success: (data) =>
+        @showResponse(data, @)
+      complete: (data) =>
+        @showCompleteStatus(@wrap(data), @)
+
+    # apply authorizations
+    if window.authorizations
+      window.authorizations.apply obj
+
+    jQuery.ajax(obj)
+    false
+    # end of file-upload nastiness
+
+  # wraps a jquery response as a shred response  
+  wrap: (data) ->
+    o = {}
+    o.content = {}
+    o.content.data = data.responseText
+    o.getHeaders = () => {"Content-Type": data.getResponseHeader("Content-Type")}
+    o.request = {}
+    o.request.url = @invocationUrl
+    o.status = data.status
+    o
+
   getSelectedValue: (select) ->
     if !select.multiple 
       select.value
@@ -214,16 +290,18 @@ class OperationView extends Backbone.View
     else if contentType.indexOf("text/html") == 0
       code = $('<code />').html(content)
       pre = $('<pre class="xml" />').append(code)
+    else if contentType.indexOf("image/") == 0
+      pre = $('<img>').attr('src',data.request.url)
     else
       # don't know what to render!
       code = $('<code />').text(content)
       pre = $('<pre class="json" />').append(code)
 
     response_body = pre
-    $(".request_url").html "<pre>" + data.request.url + "</pre>"
+    $(".request_url", $(@el)).html "<pre>" + data.request.url + "</pre>"
     $(".response_code", $(@el)).html "<pre>" + data.status + "</pre>"
     $(".response_body", $(@el)).html response_body
-    $(".response_headers", $(@el)).html "<pre>" + JSON.stringify(data.getHeaders()) + "</pre>"
+    $(".response_headers", $(@el)).html "<pre>" + JSON.stringify(data.getHeaders(), null, "  ").replace(/\n/g, "<br>") + "</pre>"
     $(".response", $(@el)).slideDown()
     $(".response_hider", $(@el)).show()
     $(".response_throbber", $(@el)).hide()

src/main/less/reset.less

@@ -0,0 +1,50 @@
+/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+    display: block;
+}
+
+body {
+    line-height: 1;
+}
+
+ol, ul {
+    list-style: none;
+}
+
+blockquote, q {
+    quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content: '';
+    content: none;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}

src/main/less/screen.less

@@ -0,0 +1,67 @@
+@import 'src/main/less/reset.less';
+@import 'src/main/less/specs.less';
+
+#header {
+    background-color: #89bf04;
+    padding: 14px;
+    a#logo {
+        font-size: 1.5em;
+        font-weight: bold;
+        text-decoration: none;
+        background: transparent url(../images/logo_small.png) no-repeat left center;
+        padding: 20px 0 20px 40px;
+        color: white;
+    }
+    form#api_selector {
+        display: block;
+        clear: none;
+        float: right;
+        .input {
+            display: block;
+            clear: none;
+            float: left;
+            margin: 0 10px 0 0;
+            input#input_apiKey {
+                width: 200px;
+            }
+            input#input_baseUrl {
+                width: 400px;
+            }
+            a#explore {
+                display: block;
+                text-decoration: none;
+                font-weight: bold;
+                padding: 6px 8px;
+                font-size: 0.9em;
+                color: white;
+                background-color: #547f00;
+                -moz-border-radius: 4px;
+                -webkit-border-radius: 4px;
+                -o-border-radius: 4px;
+                -ms-border-radius: 4px;
+                -khtml-border-radius: 4px;
+                border-radius: 4px;
+            }
+            a#explore:hover {
+                background-color: #547f00;
+            }
+            input {
+                font-size: 0.9em;
+                padding: 3px;
+                margin: 0;
+            }
+        }
+    }
+}
+
+#content_message {
+    margin: 10px 15px;
+    font-style: italic;
+    color: #999999;
+}
+
+#message-bar {
+    min-height: 30px;
+    text-align: center;
+    padding-top: 10px;
+}