EditorPage: Types not supported by editor use a File Input

gadget/gadget_cribjs_page_editor.html

@@ -49,8 +49,16 @@
             </tr>
           </table>
         </div>
+        <div class="container-fluid file-upload" style="display:none;">
+          <form class="crib-editor-file-upload form-inline">
+            <div class="form-group">
+              <label>URL:
+                <input name="file" class="file form-control" type="file"></label>
+            </div>
+          </form>
+        </div>
       </div>
-      <div class="container-fluid">
+      <div class="container-fluid editor-gadget">
         <div data-gadget-url="./codemirror.gadget.html"
              data-gadget-scope="codeeditor"
              data-gadget-sandbox="public"></div>

gadget/gadget_cribjs_page_editor.js

@@ -5,6 +5,27 @@
 
   var CODE_CONTENT_KEY = "text_content";
 
+  function getEditorContent(gadget) {
+    return new RSVP.Queue()
+    .push(function () {
+      return gadget.getDeclaredGadget('codeeditor');
+    })
+    .push(function (code_editor_gadget) {
+      return code_editor_gadget.getContent();
+    });
+  }
+
+  function getFileContent(gadget) {
+    var file_list = gadget.props.element
+                          .querySelector("form.crib-editor-file-upload .file")
+                          .files;
+    if (file_list.length === 0) {
+      throw "No file Provided, not saving";
+    } else {
+      return file_list[0];
+    }
+  }
+
   function saveTextContent(gadget, event) {
     var content,
       url = gadget.props.element.querySelector("form.crib-editor-get .url").value,
@@ -14,13 +35,18 @@
     }
     return new RSVP.Queue()
     .push(function () {
-      return gadget.getDeclaredGadget('codeeditor');
-    })
-    .push(function (code_editor_gadget) {
-      return code_editor_gadget.getContent();
+      if (gadget.props.use_editor) {
+        return getEditorContent(gadget);
+      } else {
+        return getFileContent(gadget);
+      }
     })
     .push(function (data) {
+      if (gadget.props.use_editor) {
         content = data[CODE_CONTENT_KEY] || "";
+      } else {
+        content = data;
+      }
       return gadget.crib_sw_put(url, {content: content, type: mimetype});
     })
     .push(function () {
@@ -31,38 +57,84 @@
           message: "Saved " + url + " files at " + Date()
         });
       }
+      gadget.props.element
+                  .querySelector("form.crib-editor-file-upload").reset();
       gadget.props.element.querySelector(".crib-editor-save-status")
         .textContent = "Saved " + url + " files at " + Date();
+    })
+    .push(undefined, function (error) {
+      gadget.props.element.querySelector(".crib-editor-save-status")
+        .textContent = error;
+    });
+  }
+
+  function displayProperEditor(gadget) {
+    if (gadget.props.use_editor) {
+      gadget.props.element.querySelector("div.file-upload")
+        .style = "display:none;";
+      gadget.props.element.querySelector("div.editor-gadget")
+        .style = "";
+    } else {
+      gadget.props.element.querySelector("div.file-upload")
+        .style = "";
+      gadget.props.element.querySelector("div.editor-gadget")
+        .style = "display:none;";
+    }
+  }
+
+  function displayDataInCodeEditor(gadget, code_editor, data, type) {
+    return RSVP.Queue()
+      .push(function () {
+        return jIO.util.readBlobAsText(data, type);
+      })
+      .push(function (evt) {
+        return code_editor.render({
+          key: CODE_CONTENT_KEY,
+          value: evt.target.result,
+          mode: type
+        });
+      })
+      .push(function () {
+        gadget.props.use_editor = true;
+        displayProperEditor(gadget);
       });
   }
 
+  function displayFile(gadget, data, type) {
+    gadget.props.element
+                .querySelector("form.crib-editor-file-upload").reset();
+    gadget.props.use_editor = false;
+    displayProperEditor(gadget);
+  }
+
   function getUrlTextContent(gadget, event, url) {
-    var type;
+    var type, code_editor;
     return new RSVP.Queue()
     .push(function () {
-      return gadget.crib_sw_get(url);
+      return gadget.getDeclaredGadget('codeeditor');
     })
-    .push(function (data) {
+    .push(function (editor) {
+      code_editor = editor;
+      return RSVP.all([
+        editor.getSupportedTypeList(),
+        gadget.crib_sw_get(url)
+      ]);
+    })
+    .push(function (result_list) {
+      var data = result_list[1];
       type = data.type;
       if (!type || type === "application/octet-stream") {
         type = mimeType.lookup(url, false, "application/octet-stream");
       }
-      return jIO.util.readBlobAsText(data, type);
-    })
-    .push(function (evt) {
-      return RSVP.all([
-        evt.target.result,
-        gadget.getDeclaredGadget('codeeditor')
-      ]);
+      gadget.props.element.querySelector("form.crib-editor-save .mimetype")
+        .value = type;
+      if (result_list[0].indexOf(type) !== -1) {
+        return displayDataInCodeEditor(gadget, code_editor, data, type);
+      } else {
+        return displayFile(gadget, data, type);
+      }
     })
-    .push(function (data_list) {
-      gadget.props.element.querySelector("form.crib-editor-save .mimetype").value = type;
-      return data_list[1].render({
-        key: CODE_CONTENT_KEY,
-        value: data_list[0],
-        mode: type
-      });
-    }, function (error) {
+    .push(undefined, function (error) {
       gadget.props.element.querySelector(".crib-editor-save-status")
         .textContent = error;
     });
@@ -74,6 +146,7 @@
       return g.getElement()
         .push(function (element) {
           g.props.element = element;
+          g.props.use_editor = true;
           g.props.start_deferred = RSVP.defer();
         });
     })