From 833069d3600da9e69f0199f3f08ae581f75a0b2b Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Fri, 2 Mar 2018 17:18:29 +0100
Subject: [PATCH] Added image upload frontend

---
 main.go                      |  3 +++
 mixins/Input.pixy            |  7 +++++++
 pages/settings/settings.pixy | 14 +++++++++++--
 scripts/Actions.ts           |  3 ++-
 scripts/Actions/Upload.ts    | 39 ++++++++++++++++++++++++++++++++++++
 5 files changed, 63 insertions(+), 3 deletions(-)
 create mode 100644 scripts/Actions/Upload.ts

diff --git a/main.go b/main.go
index 8e01f2b2..4c686026 100644
--- a/main.go
+++ b/main.go
@@ -23,6 +23,9 @@ func configure(app *aero.Application) *aero.Application {
 	app.Sessions.Duration = 3600 * 24 * 30 * 6
 	app.Sessions.Store = nanostore.New(arn.DB.Collection("Session"))
 
+	// Content security policy
+	app.ContentSecurityPolicy.Set("img-src", "https: data:")
+
 	// Security
 	configureHTTPS(app)
 
diff --git a/mixins/Input.pixy b/mixins/Input.pixy
index 5d97e398..92d8fdb5 100644
--- a/mixins/Input.pixy
+++ b/mixins/Input.pixy
@@ -30,6 +30,13 @@ component InputSelection(id string, value string, label string, placeholder stri
 			each option in options
 				option(value=option.Value)= option.Label
 
+component InputImage(id string, label string, src string)
+	.widget-section
+		label(for=id)= label + ":"
+		button.action(data-action="selectFile", data-trigger="click", data-preview-image-id=id + "-preview")
+			Icon("upload")
+			span Select file
+
 component InputTags(id string, value []string, label string, tooltip string)
 	.widget-section
 		label(for=id)= label + ":"
diff --git a/pages/settings/settings.pixy b/pages/settings/settings.pixy
index 7b4a92bb..601ff0ee 100644
--- a/pages/settings/settings.pixy
+++ b/pages/settings/settings.pixy
@@ -33,18 +33,28 @@ component SettingsPersonal(user *arn.User)
 					option(value="") Automatic
 					option(value="Gravatar") Gravatar
 					option(value="URL") Link
-					//- option(value="FileSystem") Upload
+					option(value="FileSystem") Upload
 
+			//- URL input
 			if user.Settings().Avatar.Source == "URL"
 				InputText("Avatar.SourceURL", user.Settings().Avatar.SourceURL, "Link", "Post the link to the image here")
 
+			//- Gravatar preview image
 			if user.Settings().Avatar.Source == "Gravatar" || (user.Settings().Avatar.Source == "" && user.Avatar.Source == "Gravatar")
 				.profile-image-container.avatar-preview
 					img.profile-image.mountable(src=user.Gravatar(), alt="Gravatar (" + user.Email + ")", title="Gravatar (" + user.Email + ")")
 			
-			if user.Settings().Avatar.Source == "URL" &&  user.Settings().Avatar.SourceURL != ""
+			//- URL preview image
+			if user.Settings().Avatar.Source == "URL" && user.Settings().Avatar.SourceURL != ""
 				.profile-image-container.avatar-preview
 					img.profile-image.mountable(src=strings.Replace(user.Settings().Avatar.SourceURL, "http://", "https://", 1), alt="Avatar preview")
+			
+			//- File upload
+			if user.Settings().Avatar.Source == "FileSystem"
+				InputImage("avatar-input", "File", user.LargeAvatar())
+
+				.profile-image-container.avatar-preview
+					img.profile-image.hidden(id="avatar-input-preview", src="", alt="Image preview")
 
 component SettingsNotifications(user *arn.User)
 	SettingsTabs
diff --git a/scripts/Actions.ts b/scripts/Actions.ts
index e33e0eb9..7b581847 100644
--- a/scripts/Actions.ts
+++ b/scripts/Actions.ts
@@ -14,4 +14,5 @@ export * from "./Actions/Serialization"
 export * from "./Actions/Shop"
 export * from "./Actions/SideBar"
 export * from "./Actions/StatusMessage"
-export * from "./Actions/Theme"
\ No newline at end of file
+export * from "./Actions/Theme"
+export * from "./Actions/Upload"
\ No newline at end of file
diff --git a/scripts/Actions/Upload.ts b/scripts/Actions/Upload.ts
new file mode 100644
index 00000000..fa6ba33e
--- /dev/null
+++ b/scripts/Actions/Upload.ts
@@ -0,0 +1,39 @@
+import { AnimeNotifier } from "../AnimeNotifier"
+
+// Select file
+export function selectFile(arn: AnimeNotifier, button: HTMLButtonElement) {
+	let input = document.createElement("input")
+	let preview = document.getElementById(button.dataset.previewImageId) as HTMLImageElement
+	input.setAttribute("type", "file")
+
+	input.onchange = () => {
+		previewImage(input, preview)
+		uploadImage(input, preview)
+	}
+
+	input.click()
+}
+
+// Preview image
+function previewImage(input: HTMLInputElement, preview: HTMLImageElement) {
+	let file = input.files[0]
+	let reader = new FileReader()
+
+	console.log(file.name, file.size, file.type)
+
+	reader.onloadend = () => {
+		preview.classList.remove("hidden")
+		preview.src = reader.result
+	}
+
+	if(file) {
+		reader.readAsDataURL(file)
+	} else {
+		preview.src = ""
+	}
+}
+
+// Upload image
+function uploadImage(input: HTMLInputElement, preview: HTMLImageElement) {
+
+}
\ No newline at end of file