Make file input look more consistent across browsers

9 files changed, 78 insertions, 9 deletions

diff --git a/modules/backup.inc.php b/modules/backup.inc.php
index 8cc0502f..d152c03f 100644
--- a/modules/backup.inc.php
+++ b/modules/backup.inc.php
@@ -27,6 +27,7 @@ class Page_Backup extends Page
 		if ($this->action === 'restore') {
 			Render::addTemplate('backup/restore', $this->templateData);
 		} else {
+			Render::addScriptBottom('fileselect');
 			Render::addTemplate('backup/_page');
 		}
 	}
diff --git a/modules/sysconfig/addmodule_branding.inc.php b/modules/sysconfig/addmodule_branding.inc.php
index c659a007..336e2a77 100644
--- a/modules/sysconfig/addmodule_branding.inc.php
+++ b/modules/sysconfig/addmodule_branding.inc.php
@@ -9,6 +9,7 @@ class Branding_Start extends AddModule_Base
 
 	protected function renderInternal()
 	{
+		Render::addScriptBottom('fileselect');
 		Render::addDialog(Dictionary::translate('config-module', 'branding_title'), false, 'sysconfig/branding-start', array(
 			'step' => 'Branding_ProcessFile',
 			'edit' => $this->edit ? $this->edit->id() : false
diff --git a/modules/sysconfig/addmodule_custommodule.inc.php b/modules/sysconfig/addmodule_custommodule.inc.php
index e3ddeca8..f7342b7b 100644
--- a/modules/sysconfig/addmodule_custommodule.inc.php
+++ b/modules/sysconfig/addmodule_custommodule.inc.php
@@ -12,6 +12,7 @@ class CustomModule_Start extends AddModule_Base
 	protected function renderInternal()
 	{
 		Session::set('mod_temp', false);
+		Render::addScriptBottom('fileselect');
 		Render::addDialog(Dictionary::translate('config-module', 'custom_title'), false, 'sysconfig/custom-upload', array(
 			'step' => 'CustomModule_ProcessUpload',
 			'edit' => $this->edit ? $this->edit->id() : false
diff --git a/script/fileselect.js b/script/fileselect.js
new file mode 100644
index 00000000..df4ff7b9
--- /dev/null
+++ b/script/fileselect.js
@@ -0,0 +1,26 @@
+$(document).on('change', '.btn-file :file', function() {
+	var input = $(this);
+	var numFiles = input.get(0).files ? input.get(0).files.length : 1;
+	var label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
+	input.trigger('fileselect', [numFiles, label]);
+});
+
+$(document).ready(function() {
+	$('.btn-file :file').on('fileselect', function(event, numFiles, label) {
+
+		var input = $(this).parents('.upload-ex').find(':text');
+		var log = numFiles > 1 ? numFiles + ' files selected' : label;
+
+		if (input.length) {
+			input.val(log);
+		} else {
+			if (log)
+				alert(log);
+		}
+
+	});
+});
+
+$('.upload-ex :text').click(function () {
+	$(this).parents('.upload-ex').find(':file').click();
+});
\ No newline at end of file
diff --git a/style/default.css b/style/default.css
index 69a12699..9e430b73 100644
--- a/style/default.css
+++ b/style/default.css
@@ -187,3 +187,29 @@ body {
 .slx-strike {
 	text-decoration: line-through;
 }
+
+/* File upload */
+
+.btn-file {
+  position: relative;
+  overflow: hidden;
+}
+.btn-file input[type=file] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  min-width: 100%;
+  min-height: 100%;
+  font-size: 100px;
+  text-align: right;
+  filter: alpha(opacity=0);
+  opacity: 0;
+  background: red;
+  cursor: inherit;
+  display: block;
+  cursor: pointer;
+}
+input[readonly] {
+  background-color: white !important;
+  cursor: text !important;
+}
\ No newline at end of file
diff --git a/templates/backup/_page.html b/templates/backup/_page.html
index 0c4429e2..47b5a174 100644
--- a/templates/backup/_page.html
+++ b/templates/backup/_page.html
@@ -19,9 +19,13 @@
 		<div class="panel-heading">{{lang_restore}}</div>
 		<div class="panel-body">
 			<p>{{lang_restoreDescription}}</p>
-			<div class="input-group">
-				<span class="input-group-addon">{{lang_file}}</span>
-				<input class="form-control" type="file" name="backupfile">
+			<div class="input-group upload-ex">
+				<input type="text" class="form-control" readonly placeholder="{{lang_selectFile}}">
+				<span class="input-group-btn">
+					<span class="btn btn-default btn-file">
+						{{lang_browseForFile}}&hellip; <input type="file" name="backupfile">
+					</span>
+				</span>
 			</div>
 			<div>
 				<label><input type="checkbox" name="restore_openslx" checked="checked"> {{lang_restoreSystemConfig}}</label>
diff --git a/templates/backup/restore.html b/templates/backup/restore.html
index c5d9ba13..42580647 100644
--- a/templates/backup/restore.html
+++ b/templates/backup/restore.html
@@ -2,7 +2,6 @@
 	<div class="panel-heading">{{lang_backup}}</div>
 	<div class="panel-body">
 		<div id="zeug">
-			<div data-tm-id="{{syncid}}" data-tm-log="messages">{{lang_stopping}} syncdaemon</div>
 			<div data-tm-id="{{dmsdid}}" data-tm-log="messages">{{lang_stopping}} dmsd</div>
 			<div data-tm-id="{{ldadpid}}" data-tm-log="messages">{{lang_stopping}} ldadp</div>
 			<div data-tm-id="{{mountid}}" data-tm-log="messages">{{lang_stopping}} vmstore</div>
diff --git a/templates/sysconfig/branding-start.html b/templates/sysconfig/branding-start.html
index 1470929f..09b9ca27 100644
--- a/templates/sysconfig/branding-start.html
+++ b/templates/sysconfig/branding-start.html
@@ -11,7 +11,14 @@
 	{{lang_or}}
 	<div class="form-group">
 		<label for="input-file">{{lang_computerLoad}}</label>
-		<input class="form-control" type="file" name="file" id="input-file">
+			<div class="input-group upload-ex">
+				<input type="text" class="form-control" readonly placeholder="{{lang_selectFile}}">
+				<span class="input-group-btn">
+					<span class="btn btn-default btn-file">
+						{{lang_browseForFile}}&hellip; <input type="file" name="file" id="input-file">
+					</span>
+				</span>
+			</div>
 	</div>
 	<button type="submit" class="btn btn-primary">{{lang_upload}}</button>
 </form>
diff --git a/templates/sysconfig/custom-upload.html b/templates/sysconfig/custom-upload.html
index 02f813f6..c453a97d 100644
--- a/templates/sysconfig/custom-upload.html
+++ b/templates/sysconfig/custom-upload.html
@@ -5,10 +5,14 @@
 <form role="form" enctype="multipart/form-data" method="post" action="?do=SysConfig&amp;action=addmodule&amp;step={{step}}">
 	<input type="hidden" name="token" value="{{token}}">
 	<input type="hidden" name="edit" value="{{edit}}">
-	<div class="input-group">
-		<span class="input-group-addon">{{lang_file}}</span>
-		<input class="form-control" type="file" name="modulefile">
-	</div>
+			<div class="input-group upload-ex">
+				<input type="text" class="form-control" readonly placeholder="{{lang_selectFile}}">
+				<span class="input-group-btn">
+					<span class="btn btn-default btn-file">
+						{{lang_browseForFile}}&hellip; <input type="file" name="modulefile">
+					</span>
+				</span>
+			</div>
 	<p class="help-block">{{lang_supportedFiles}}: .tar.gz, .tar.bz2, .zip</p>
 	<button type="submit" class="btn btn-primary">{{lang_upload}}</button>
 </form>