alternate notebook upload methods

fixes #1562

IPython/frontend/html/notebook/static/css/alternate_uploadform.css

@@ -0,0 +1,23 @@
+/* We need an invisible input field on top of the sentense*/
+/* "Drag file onto the list ..." */
+
+.alternate_upload
+{
+    background-color:none;
+    display: inline;
+}
+
+.alternate_upload.form
+{
+    padding: 0;
+    margin:0;
+}
+
+.alternate_upload input.fileinput
+{
+    background-color:red;
+    position:relative;
+    opacity: 0;
+    z-index: 2;
+    width: 356px;
+}

IPython/frontend/html/notebook/static/js/notebooklist.js

@@ -43,33 +43,45 @@ var IPython = (function (IPython) {
         this.element.bind('dragover', function () {
             return false;
         });
-        this.element.bind('drop', function (event) {
-            var files = event.originalEvent.dataTransfer.files;
-            for (var i = 0, f; f = files[i]; i++) {
-                var reader = new FileReader();
-                reader.readAsText(f);
-                var fname = f.name.split('.'); 
-                var nbname = fname.slice(0,-1).join('.');
-                var nbformat = fname.slice(-1)[0];
-                if (nbformat === 'ipynb') {nbformat = 'json';};
-                if (nbformat === 'py' || nbformat === 'json') {
-                    var item = that.new_notebook_item(0);
-                    that.add_name_input(nbname, item);
-                    item.data('nbformat', nbformat);
-                    // Store the notebook item in the reader so we can use it later
-                    // to know which item it belongs to.
-                    $(reader).data('item', item);
-                    reader.onload = function (event) {
-                        var nbitem = $(event.target).data('item');
-                        that.add_notebook_data(event.target.result, nbitem);
-                        that.add_upload_button(nbitem);
-                    };
-                };
-            }
+        this.element.bind('drop', function(event){
+            console.log('bound to drop');
+                that.handelFilesUpload(event,'drop');
             return false;
         });
     };
 
+    NotebookList.prototype.handelFilesUpload =  function(event, dropOrForm) {
+        var that = this;
+        var files;
+        if(dropOrForm =='drop'){
+            files = event.originalEvent.dataTransfer.files;
+        } else 
+        {
+            files = event.originalEvent.target.files
+        }
+        for (var i = 0, f; f = files[i]; i++) {
+            var reader = new FileReader();
+            reader.readAsText(f);
+            var fname = f.name.split('.'); 
+            var nbname = fname.slice(0,-1).join('.');
+            var nbformat = fname.slice(-1)[0];
+            if (nbformat === 'ipynb') {nbformat = 'json';};
+            if (nbformat === 'py' || nbformat === 'json') {
+                var item = that.new_notebook_item(0);
+                that.add_name_input(nbname, item);
+                item.data('nbformat', nbformat);
+                // Store the notebook item in the reader so we can use it later
+                // to know which item it belongs to.
+                $(reader).data('item', item);
+                reader.onload = function (event) {
+                    var nbitem = $(event.target).data('item');
+                    that.add_notebook_data(event.target.result, nbitem);
+                    that.add_upload_button(nbitem);
+                };
+            };
+        }
+        return false;
+        };
 
     NotebookList.prototype.clear_list = function () {
         this.element.children('.list_item').remove();

IPython/frontend/html/notebook/static/js/projectdashboardmain.js

@@ -32,8 +32,11 @@ $(document).ready(function () {
 
     IPython.notebook_list.load_list();
     IPython.cluster_list.load_list();
-
     IPython.page.show();
     
+    // bound the upload method to the on change of the file select list
+    $("#alternate_upload").change(function (event){
+        IPython.notebook_list.handelFilesUpload(event,'form');
+    });
 });
 

IPython/frontend/html/notebook/templates/projectdashboard.html

@@ -4,6 +4,7 @@
 
 {% block stylesheet %}
     <link rel="stylesheet" href="{{static_url("css/projectdashboard.css") }}" type="text/css" />
+    <link rel="stylesheet" href="{{static_url("css/alternate_uploadform.css") }}" type="text/css" />
 {% end %}
 
 
@@ -30,8 +31,14 @@ data-read-only={{read_only}}
     <div id="tab1">
         {% if logged_in or not read_only %}
         <div id="notebook_toolbar">
-            <span id="drag_info">Drag files onto the list to import
-            notebooks.</span>
+
+            <form id='alternate_upload' action="notebooks" enctype="multipart/form-data" method="post" class='alternate_upload'>
+                    <span id="drag_info" style="position:absolute" >Drag files
+                        onto the list, or click here, to import
+                        notebooks.</span>
+                    <input type="file" name="datafile" class="fileinput">
+            </form>
+
 
             <span id="notebook_buttons">
                 <button id="refresh_notebook_list" title="Refresh notebook list">Refresh</button>