From cd263f3fb3626c8853ed1fcbd92a8febaca055ec Mon Sep 17 00:00:00 2001
From: Steve Manuel <nilslice@gmail.com>
Date: Wed, 5 Oct 2016 10:15:34 -0700
Subject: adding implementation for file upload input and viewing existing
 upload

---
 management/editor/elements.go               | 72 +++++++++++++++++++++++++++--
 system/admin/static/dashboard/css/admin.css | 41 +++++++++++++++-
 2 files changed, 108 insertions(+), 5 deletions(-)

diff --git a/management/editor/elements.go b/management/editor/elements.go
index c5dd4ee..5667faa 100644
--- a/management/editor/elements.go
+++ b/management/editor/elements.go
@@ -42,7 +42,73 @@ func Textarea(fieldName string, p interface{}, attrs map[string]string) []byte {
 // The `fieldName` argument will cause a panic if it is not exactly the string
 // form of the struct field that this editor input is representing
 func File(fieldName string, p interface{}, attrs map[string]string) []byte {
-	return nil
+	name := tagNameFromStructField(fieldName, p)
+	tmpl :=
+		`<div class="file-input ` + name + ` input-field col s12">
+			<label class="active">` + attrs["label"] + `</label>
+			<div class="file-field input-field">
+				<div class="btn">
+					<span>Upload</span>
+					<input class="upload" type="file">
+				</div>
+				<div class="file-path-wrapper">
+					<input class="file-path validate" type="text">
+				</div>
+			</div>
+			<div class="preview"><div class="img-clip"></div></div>			
+			<input class="store ` + name + `" type="hidden" name="` + name + `" value="` + valueFromStructField(fieldName, p).String() + `" />
+		</div>`
+
+	script :=
+		`<script>
+			$(function() {
+				var $file = $('.file-input.` + name + `'),
+					upload = $file.find('input.upload'),
+					store = $file.find('input.store'),
+					preview = $file.find('.preview'),
+					clip = preview.find('.img-clip'),
+					reset = document.createElement('div'),
+					img = document.createElement('img'),
+					uploadSrc = store.val();
+					preview.hide();
+				
+				// when ` + name + ` input changes (file is selected), remove
+				// the 'name' and 'value' attrs from the hidden store input.
+				// add the 'name' attr to ` + name + ` input
+				upload.on('change', function(e) {
+					resetImage();
+				});
+
+				if (uploadSrc.length > 0) {
+					$(img).attr('src', store.val());
+					clip.append(img);
+					preview.show();
+
+					$(reset).addClass('reset ` + name + ` btn waves-effect waves-light grey');
+					$(reset).html('<i class="material-icons tiny">clear<i>');
+					$(reset).on('click', function(e) {
+						e.preventDefault();
+						preview.animate({"opacity": 0.1}, 200, function() {
+							preview.slideUp(250, function() {
+								resetImage();
+							});
+						})
+						
+					});
+					clip.append(reset);
+				}
+
+				function resetImage() {
+					store.val('');
+					store.attr('name', '');
+					upload.attr('name', '` + name + `');
+					clip.empty();
+					console.log('clicked');
+				}
+			});	
+		</script>`
+
+	return []byte(tmpl + script)
 }
 
 // Richtext returns the []byte of a rich text editor (provided by http://summernote.org/) with a label.
@@ -76,7 +142,7 @@ func Richtext(fieldName string, p interface{}, attrs map[string]string) []byte {
 	iso = append(iso, []byte(input)...)
 	iso = append(iso, isoClose...)
 
-	initializer := `
+	script := `
 	<script>
 		$(function() { 
 			var _editor = $('.richtext.` + fieldName + `');
@@ -140,7 +206,7 @@ func Richtext(fieldName string, p interface{}, attrs map[string]string) []byte {
 		});
 	</script>`
 
-	return append(iso, []byte(initializer)...)
+	return append(iso, []byte(script)...)
 }
 
 // Select returns the []byte of a <select> HTML element plus internal <options> with a label.
diff --git a/system/admin/static/dashboard/css/admin.css b/system/admin/static/dashboard/css/admin.css
index 7ee2cb8..cf8a84b 100644
--- a/system/admin/static/dashboard/css/admin.css
+++ b/system/admin/static/dashboard/css/admin.css
@@ -1,5 +1,3 @@
-.body {}
-
 .navbar-fixed {
     z-index: 10000 !important;
 }
@@ -49,8 +47,47 @@ select.browser-default {
 .iso-texteditor {
     position: relative;
     margin: 20px 0;
+    padding: 0px !important;
+}
+
+.file-input .preview {
+    display: inline-block;
+    position: relative;
+    margin: 0.5rem 0 1rem 0;        
+    background-color:#fff; 
+    border: 1px solid #e0e0e0;
+    border-radius: 2px;   
+}
+
+.file-input .preview .img-clip {
+    overflow: hidden;
+    max-width: 150px;
+    max-height: 150px;   
+    margin: 10px;    
+}
+
+.file-input .preview img {
+    width: 100%;
 }
 
+.file-input .preview .reset {
+    padding: 0 8px;
+    position: absolute;
+    top: -5%;
+    right: -5%;
+    display: block;
+    border-radius: 50%;
+    z-index: 100;
+    opacity: 0;
+    transition: all 0.3s ease;
+}
+
+.file-input .preview:hover .reset {
+    opacity: 1;
+    transition: all 0.3s ease;
+}    
+
+
 /* OVERRIDE Bootstrap + Materialize conflicts */
 .iso-texteditor.input-field label {
     color: #9e9e9e;
-- 
cgit v1.2.3