Added image upload frontend

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)
 

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 + ":"

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

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"
+export * from "./Actions/Theme"
+export * from "./Actions/Upload"

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) {
+
+}