Merge pull request #35 from Denton-L/upload-button

assets/css/browser-solidity.css

@@ -4,6 +4,7 @@ body {
     color: #111111;
     font-weight: normal;
 }
+
 #editor {
 
     position: absolute;
@@ -14,7 +15,6 @@ body {
     right: 37em;
 }
 
-
 .scroller {
     position: absolute;
     z-index: 999;
@@ -44,7 +44,7 @@ body {
     position: absolute;
     overflow: hidden;
     top: 0;
-    left: 3em;
+    left: 5em;
     right: 3em;
 }
 
@@ -78,6 +78,7 @@ body {
 }
 
 .newFile,
+.uploadFile,
 .toggleRHP {
     display: block;
     float: left;
@@ -169,7 +170,6 @@ body {
     box-sizing: content-box;
 }
 
-
 #header #options {
     list-style: none;
     margin: 0;
@@ -198,10 +198,12 @@ body {
     overflow: auto;
     background-color: #F4F6FF;
 }
+
 #header #optionViews > div {
     display: none;
     padding: 1em 0.5em 0.5em;
 }
+
 #header #optionViews.txView #txView { display: block; }
 #header #optionViews.settingsView #settingsView { display: block; }
 #header #optionViews.publishView #publishView { display: block; }
@@ -249,7 +251,6 @@ body {
     cursor: pointer;
 }
 
-
 #header .origin,
 #header #executionContext {
     display: block;
@@ -335,7 +336,6 @@ body {
     margin-bottom: 1em;
 }
 
-
 .sol.error,
 .sol.warning {
     border-radius: 0;
@@ -411,3 +411,7 @@ input[readonly] {
     display: block;
     width: 100%;
 }
+
+input[type="file"] {
+    display: none;
+}

index.html

@@ -45,6 +45,7 @@
 
 		<div id="editor">
 			<span class="newFile" title="New File"><i class="fa fa-file-code-o"></i></span>
+			<span class="uploadFile" title="Upload"><label class="fa fa-upload"><input type="file" class="inputFile" multiple /></label</span>
 			<div class="files-wrapper">
 				<div class="scroller scroller-left"><i class="fa fa-chevron-left "></i></div>
 				<div class="scroller scroller-right"><i class="fa fa-chevron-right "></i></div>

src/app.js

@@ -54,6 +54,10 @@ var run = function () {
 	window.onhashchange = syncQueryParams;
 	syncQueryParams();
 
+	// -------- check file upload capabilities -------
+	if (!(window.File || window.FileReader || window.FileList || window.Blob)) {
+		$(".uploadFile").remove();
+	}
 
 	// ------------------ gist load ----------------
 
@@ -157,6 +161,23 @@ var run = function () {
 		});
 	});
 
+	// ----------------- file upload -------------
+
+	$('.inputFile').on('change', function () {
+		var fileList = $('input.inputFile')[0].files;
+		for (var i = 0; i < fileList.length; i++) {
+			var name = fileList[i].name;
+			if (!window.localStorage[utils.fileKey(name)] || confirm('The file ' + name + ' already exists! Would you like to overwrite it?')) {
+				editor.uploadFile(fileList[i]);
+				updateFiles();
+			}
+		}
+
+		$filesEl.animate({ left: Math.max((0 - activeFilePos() + (FILE_SCROLL_DELTA / 2)), 0) + 'px' }, 'slow', function () {
+			reAdjust();
+		});
+	});
+
 	$filesEl.on('click', '.file:not(.active)', showFileHandler);
 
 	$filesEl.on('click', '.file.active', function (ev) {

src/app/editor.js

@@ -4,9 +4,8 @@ var ace = require('brace');
 require('../mode-solidity.js');
 
 function Editor (loadingFromGist) {
-
   this.newFile = function () {
-    untitledCount = '';
+    var untitledCount = '';
     while (window.localStorage[SOL_CACHE_UNTITLED + untitledCount]) {
       untitledCount = (untitledCount - 0) + 1;
     }
@@ -15,6 +14,17 @@ function Editor (loadingFromGist) {
     this.setCacheFileContent('');
   };
 
+  this.uploadFile = function (file) {
+    var fileReader = new FileReader();
+
+    SOL_CACHE_FILE = utils.fileKey(file.name);
+    fileReader.onload = function (e) {
+      window.localStorage[SOL_CACHE_FILE] = e.target.result;
+      sessions[SOL_CACHE_FILE] = null;
+    };
+    fileReader.readAsText(file);
+  };
+
   this.setCacheFileContent = function (content) {
     window.localStorage.setItem(SOL_CACHE_FILE, content);
   };
@@ -42,19 +52,19 @@ function Editor (loadingFromGist) {
   };
 
   this.hasFile = function (name) {
-    return this.getFiles().indexOf(utils.fileKey(name)) !== -1
+    return this.getFiles().indexOf(utils.fileKey(name)) !== -1;
   };
 
   this.getFiles = function () {
     var files = [];
-    for (var f in localStorage) {
+    for (var f in window.localStorage) {
       if (f.indexOf(utils.getCacheFilePrefix(), 0) === 0) {
         files.push(f);
         if (!sessions[f]) sessions[f] = newEditorSession(f);
       }
     }
     return files;
-  }
+  };
 
   this.packageFiles = function () {
     var files = {};
@@ -62,7 +72,7 @@ function Editor (loadingFromGist) {
 
     for (var f in filesArr) {
       files[utils.fileNameFromKey(filesArr[f])] = {
-        content: localStorage[filesArr[f]]
+        content: window.localStorage[filesArr[f]]
       };
     }
     return files;
@@ -91,7 +101,7 @@ function Editor (loadingFromGist) {
   };
 
   this.setAnnotations = function (sourceAnnotations) {
-    editor.getSession().setAnnotations(sourceAnnotations);    
+    editor.getSession().setAnnotations(sourceAnnotations);
   };
 
   this.onChangeSetup = function (onChange) {
@@ -99,16 +109,16 @@ function Editor (loadingFromGist) {
     editor.on('changeSession', function () {
       editor.getSession().on('change', onChange);
       onChange();
-    })    
+    });
   };
 
   this.handleErrorClick = function (errLine, errCol) {
     editor.focus();
-    editor.gotoLine(errLine + 1, errCol - 1, true);    
+    editor.gotoLine(errLine + 1, errCol - 1, true);
   };
 
   function newEditorSession (filekey) {
-    var s = new ace.EditSession(window.localStorage[filekey], 'ace/mode/javascript')
+    var s = new ace.EditSession(window.localStorage[filekey], 'ace/mode/javascript');
     s.setUndoManager(new ace.UndoManager());
     s.setTabSize(4);
     s.setUseSoftTabs(true);
@@ -130,9 +140,9 @@ function Editor (loadingFromGist) {
     }
 
     SOL_CACHE_FILE = files[0];
-    
+
     for (var x in files) {
-      sessions[files[x]] = newEditorSession(files[x])
+      sessions[files[x]] = newEditorSession(files[x]);
     }
 
     editor.setSession(sessions[SOL_CACHE_FILE]);