jupyter · dwillmer · Dec 16, 2015 · Dec 14, 2015 · Dec 15, 2015
diff --git a/example/index.css b/example/index.css
@@ -36,12 +36,6 @@
 }
 
 
-
-.jp-EditorWidget {
-  min-height: 200px;
-}
-
-
 .jp-FileBrowser-row.jp-mod-selected {
   background-color: #2196F3;
   color: #F5F5F5;
@@ -63,6 +57,62 @@
 }
 
 
+.jp-EditorWidget {
+  min-height: 200px;
+}
+
+
+.p-Dialog {
+  padding-left: 3px;
+  background: rgba(245, 245, 245, .6);
+}
+
+
+.p-Dialog-content {
+  background-color: #F5F5F5;
+  min-width: 50%;
+  border: 1px solid #757575;
+  border-radius: 5px;
+}
+
+
+.p-Dialog-header {
+  padding: 5px;
+  border-bottom: 1px solid #757575;
+}
+
+
+.p-Dialog-body {
+  padding: 5px;
+}
+
+
+.p-Dialog-footer {
+  padding: 5px;
+}
+
+
+.p-Dialog-button {
+  margin-left: 5px;
+  padding: 5px;
+  border: 1px solid #757575;
+  font-size: 16px;
+  background-color: #FAFAFA;
+  line-height: 20px;
+  border-radius: 3px;
+  max-width: 100px;
+}
+
+.p-Dialog-close {
+  line-height: 21px;
+}
+
+
+.p-Dialog-close:before {
+  content: '\f00d';
+  font-family: FontAwesome;
+}
+
 
 .p-MenuBar {
   padding-left: 5px;

diff --git a/example/index.js b/example/index.js
@@ -8,7 +8,6 @@ var jupyter_js_editor_1 = require('jupyter-js-editor');
 var jupyter_js_filebrowser_1 = require('jupyter-js-filebrowser');
 var jupyter_js_services_1 = require('jupyter-js-services');
 var phosphor_splitpanel_1 = require('phosphor-splitpanel');
-var phosphor_widget_1 = require('phosphor-widget');
 function main() {
     var baseUrl = 'http://localhost:8888';
     var contents = new jupyter_js_services_1.Contents(baseUrl);
@@ -22,8 +21,9 @@ function main() {
         }
     });
     var panel = new phosphor_splitpanel_1.SplitPanel();
-    panel.children.assign([fileBrowser, editor]);
-    phosphor_widget_1.Widget.attach(panel, document.body);
+    panel.addChild(fileBrowser);
+    panel.addChild(editor);
+    panel.attach(document.body);
     window.onresize = function () { return panel.update(); };
 }
 main();
diff --git a/example/index.ts b/example/index.ts
@@ -45,9 +45,10 @@ function main(): void {
   });
 
   let panel = new SplitPanel();
-  panel.children.assign([fileBrowser, editor]);
+  panel.addChild(fileBrowser);
+  panel.addChild(editor);
 
-  Widget.attach(panel, document.body);
+  panel.attach(document.body);
 
   window.onresize = () => panel.update();
 }

diff --git a/example/package.json b/example/package.json
@@ -8,7 +8,7 @@
     "jupyter-js-editor": "jupyter/jupyter-js-editor",
     "jupyter-js-filebrowser": "file:..",
     "phosphor-splitpanel": "^1.0.0-beta",
-    "phosphor-widget": "^1.0.0-beta.1",
+    "phosphor-widget": "^1.0.0-beta.2",
     "steal": "^0.12.7"
   },
   "devDependencies": {

diff --git a/lib/index.css b/lib/index.css
@@ -4,6 +4,7 @@
 |----------------------------------------------------------------------------*/
 .jp-FileBrowser {
   overflow: auto;
+  z-index: 0;
 }
 
 

diff --git a/lib/index.d.ts b/lib/index.d.ts
@@ -54,7 +54,7 @@ export declare class FileBrowserViewModel {
     /**
      * Upload a file object.
      */
-    upload(file: File): Promise<IContentsModel>;
+    upload(file: File, overwrite?: boolean): Promise<IContentsModel>;
     /**
      * Refresh the model contents.
      */

diff --git a/lib/index.js b/lib/index.js
@@ -8,6 +8,7 @@ var __extends = (this && this.__extends) || function (d, b) {
 };
 var moment = require('moment');
 var phosphor_command_1 = require('phosphor-command');
+var phosphor_dialog_1 = require('phosphor-dialog');
 var phosphor_domutil_1 = require('phosphor-domutil');
 var phosphor_menus_1 = require('phosphor-menus');
 var phosphor_signaling_1 = require('phosphor-signaling');
@@ -191,22 +192,23 @@ var FileBrowserViewModel = (function () {
     /**
      * Upload a file object.
      */
-    FileBrowserViewModel.prototype.upload = function (file) {
+    FileBrowserViewModel.prototype.upload = function (file, overwrite) {
         var _this = this;
         // Skip large files with a warning.
         if (file.size > this._max_upload_size_mb * 1024 * 1024) {
-            var msg = "Cannot upload file (>" + this._max_upload_size_mb + " MB)";
-            msg += "'" + file.name + "'";
+            var msg = "Cannot upload file (>" + this._max_upload_size_mb + " MB) ";
+            msg += "\"" + file.name + "\"";
             console.warn(msg);
             return Promise.reject(new Error(msg));
         }
         // Check for existing file.
         for (var _i = 0, _a = this._items; _i < _a.length; _i++) {
             var model = _a[_i];
-            if (model.name === file.name) {
-                return Promise.reject(new Error(file.name + " already exists"));
+            if (model.name === file.name && !overwrite) {
+                return Promise.reject(new Error("\"" + file.name + "\" already exists"));
             }
         }
+        // Gather the file model parameters.
         var path = this._path ? this._path + '/' + file.name : file.name;
         var name = file.name;
         var isNotebook = file.name.indexOf('.ipynb') !== -1;
@@ -221,8 +223,8 @@ var FileBrowserViewModel = (function () {
             reader.readAsArrayBuffer(file);
         }
         return new Promise(function (resolve, reject) {
-            var content = '';
             reader.onload = function (event) {
+                var content = '';
                 if (isNotebook) {
                     content = JSON.parse(reader.result);
                 }
@@ -557,10 +559,10 @@ var FileBrowser = (function (_super) {
                 nearestIndex = 0;
             }
             // Select the rows between the current and the nearest selected.
-            for (var i_1 = 0; i_1 < nodes.length; i_1++) {
-                if (nearestIndex >= i_1 && index <= i_1 ||
-                    nearestIndex <= i_1 && index >= i_1) {
-                    nodes[i_1].classList.add(SELECTED_CLASS);
+            for (var i = 0; i < nodes.length; i++) {
+                if (nearestIndex >= i && index <= i ||
+                    nearestIndex <= i && index >= i) {
+                    nodes[i].classList.add(SELECTED_CLASS);
                 }
             }
         }
@@ -573,9 +575,9 @@ var FileBrowser = (function (_super) {
         }
         // Set the selected items on the model.
         var selected = [];
-        for (var i_2 = 0; i_2 < nodes.length; i_2++) {
-            if (nodes[i_2].classList.contains(SELECTED_CLASS)) {
-                selected.push(i_2);
+        for (var i = 0; i < nodes.length; i++) {
+            if (nodes[i].classList.contains(SELECTED_CLASS)) {
+                selected.push(i);
             }
         }
         this._model.selected = selected;
@@ -584,9 +586,32 @@ var FileBrowser = (function (_super) {
      * Handle a file upload event.
      */
     FileBrowser.prototype._handleUploadEvent = function (event) {
+        var _this = this;
         for (var _i = 0, _a = event.target.files; _i < _a.length; _i++) {
             var file = _a[_i];
-            this._model.upload(file);
+            this._model.upload(file).catch(function (error) {
+                if (error.message.indexOf('already exists') !== -1) {
+                    var options = {
+                        title: 'Overwrite file?',
+                        host: _this.node,
+                        body: error.message + ', overwrite?'
+                    };
+                    phosphor_dialog_1.showDialog(options).then(function (button) {
+                        if (button.text === 'OK') {
+                            _this._model.upload(file, true);
+                        }
+                    });
+                }
+                else {
+                    var options = {
+                        title: 'Upload Error',
+                        host: _this.node,
+                        body: error.message,
+                        buttons: [phosphor_dialog_1.okButton]
+                    };
+                    phosphor_dialog_1.showDialog(options);
+                }
+            });
         }
     };
     /**

diff --git a/package.json b/package.json
@@ -8,11 +8,12 @@
     "jupyter-js-services": "^0.2.2",
     "moment": "^2.10.6",
     "phosphor-command": "^0.5.0",
+    "phosphor-dialog": "blink1073/phosphor-dialog#f5afb2b",
     "phosphor-domutil": "^1.2.0",
-    "phosphor-menus": "^1.0.0-beta.1",
+    "phosphor-menus": "1.0.0-beta.1",
     "phosphor-messaging": "^1.0.5",
     "phosphor-nodewrapper": "^1.0.4",
-    "phosphor-widget": "^1.0.0-beta.1"
+    "phosphor-widget": "^1.0.0-beta.2"
   },
   "devDependencies": {
     "expect.js": "^0.3.1",

diff --git a/src/index.css b/src/index.css
@@ -4,6 +4,7 @@
 |----------------------------------------------------------------------------*/
 .jp-FileBrowser {
   overflow: auto;
+  z-index: 0;
 }
 
 

diff --git a/src/index.ts b/src/index.ts
@@ -13,6 +13,10 @@ import {
   DelegateCommand, ICommand
 } from 'phosphor-command';
 
+import {
+  okButton, showDialog
+} from 'phosphor-dialog';
+
 import {
   hitTest
 } from 'phosphor-domutil';
@@ -228,20 +232,20 @@ class FileBrowserViewModel {
   /**
    * Upload a file object.
    */
-  upload(file: File): Promise<IContentsModel> {
+  upload(file: File, overwrite?: boolean): Promise<IContentsModel> {
 
     // Skip large files with a warning.
     if (file.size > this._max_upload_size_mb * 1024 * 1024) {
-      let msg = `Cannot upload file (>${this._max_upload_size_mb} MB)`;
-      msg += `'${file.name}'`
+      let msg = `Cannot upload file (>${this._max_upload_size_mb} MB) `;
+      msg += `"${file.name}"`
       console.warn(msg);
       return Promise.reject(new Error(msg));
     }
 
     // Check for existing file.
     for (let model of this._items) {
-      if (model.name === file.name) {
-        return Promise.reject(new Error(`${file.name} already exists`));
+      if (model.name === file.name && !overwrite) {
+        return Promise.reject(new Error(`"${file.name}" already exists`));
       }
     }
 
@@ -654,8 +658,29 @@ class FileBrowser extends Widget {
    * Handle a file upload event.
    */
   private _handleUploadEvent(event: Event) {
-    for (let file of (event.target as any).files) {
-      this._model.upload(file);
+    for (var file of (event.target as any).files) {
+      this._model.upload(file).catch(error => {
+        if (error.message.indexOf('already exists') !== -1) {
+          let options = {
+            title: 'Overwrite file?',
+            host: this.node,
+            body: error.message + ', overwrite?'
+          }
+          showDialog(options).then(button => {
+            if (button.text === 'OK') {
+              this._model.upload(file, true);
+            }
+          });
+        } else {
+          let options = {
+            title: 'Upload Error',
+            host: this.node,
+            body: error.message,
+            buttons: [okButton]
+          }
+          showDialog(options);
+        }
+      });
     }
   }