Added basic upload flow

pages/index.go

@@ -53,6 +53,7 @@ import (
 	"github.com/animenotifier/notify.moe/pages/statistics"
 	"github.com/animenotifier/notify.moe/pages/terms"
 	"github.com/animenotifier/notify.moe/pages/threads"
+	"github.com/animenotifier/notify.moe/pages/upload"
 	"github.com/animenotifier/notify.moe/pages/user"
 	"github.com/animenotifier/notify.moe/pages/users"
 )
@@ -185,6 +186,9 @@ func Configure(app *aero.Application) {
 	l.Page("/shop/history", shop.PurchaseHistory)
 	app.Post("/api/shop/buy/:item/:quantity", shop.BuyItem)
 
+	// Upload
+	app.Post("/api/upload/avatar", upload.Avatar)
+
 	// Admin
 	l.Page("/admin", admin.Get)
 	l.Page("/admin/webdev", admin.WebDev)

pages/upload/upload.go

@@ -0,0 +1,43 @@
+package upload
+
+import (
+	"bytes"
+	"fmt"
+	"image"
+	"io"
+	"net/http"
+
+	"github.com/aerogo/aero"
+	"github.com/animenotifier/notify.moe/utils"
+)
+
+// Avatar ...
+func Avatar(ctx *aero.Context) string {
+	user := utils.GetUser(ctx)
+
+	if user == nil {
+		return ctx.Error(http.StatusUnauthorized, "Not logged in", nil)
+	}
+
+	data, err := ctx.Request().Body().Bytes()
+
+	if err != nil {
+		return ctx.Error(http.StatusInternalServerError, "Reading request body failed", err)
+	}
+
+	format, err := guessImageFormat(bytes.NewReader(data))
+
+	if err != nil {
+		return ctx.Error(http.StatusBadRequest, "Could not determine image file type", err)
+	}
+
+	fmt.Println("Avatar received!", len(data), format, user.Nick)
+	// ioutil.WriteFile("avatar")
+	return "ok"
+}
+
+// Guess image format from gif/jpeg/png/webp
+func guessImageFormat(r io.Reader) (format string, err error) {
+	_, format, err = image.DecodeConfig(r)
+	return format, err
+}

scripts/Actions/Upload.ts

@@ -7,20 +7,19 @@ export function selectFile(arn: AnimeNotifier, button: HTMLButtonElement) {
 	input.setAttribute("type", "file")
 
 	input.onchange = () => {
-		previewImage(input, preview)
-		uploadImage(input, preview)
+		let file = input.files[0]
+
+		previewImage(file, preview)
+		uploadImage(file)
 	}
 
 	input.click()
 }
 
 // Preview image
-function previewImage(input: HTMLInputElement, preview: HTMLImageElement) {
-	let file = input.files[0]
+function previewImage(file: File, preview: HTMLImageElement) {
 	let reader = new FileReader()
 
-	console.log(file.name, file.size, file.type)
-
 	reader.onloadend = () => {
 		preview.classList.remove("hidden")
 		preview.src = reader.result
@@ -29,11 +28,26 @@ function previewImage(input: HTMLInputElement, preview: HTMLImageElement) {
 	if(file) {
 		reader.readAsDataURL(file)
 	} else {
-		preview.src = ""
+		preview.classList.add("hidden")
 	}
 }
 
 // Upload image
-function uploadImage(input: HTMLInputElement, preview: HTMLImageElement) {
+function uploadImage(file: File) {
+	let reader = new FileReader()
 
+	reader.onloadend = async () => {
+		await fetch("/api/upload/avatar", {
+			method: "POST",
+			credentials: "include",
+			headers: {
+				"Content-Type": "application/octet-stream"
+			},
+			body: reader.result
+		})
+
+		console.log("Avatar upload finished!")
+	}
+
+	reader.readAsBinaryString(file)
 }