Fix GIF and PNG uploads

pkg/middleware/csrf.go

@@ -26,19 +26,7 @@ func CSRF(handler http.Handler) http.Handler {
 
 		// If we are running a POST request, validate the CSRF form value.
 		if r.Method != http.MethodGet {
-			r.Body = http.MaxBytesReader(w, r.Body, config.MaxBodySize)
+			r.ParseMultipartForm(config.MultipartMaxMemory)
-			err := r.ParseMultipartForm(config.MultipartMaxMemory)
-			if err != nil {
-				log.Error("ParseMultipartForm: %s", err)
-				templates.MakeErrorPage(
-					"Request Size Too Large",
-					"You have uploaded too big of a file! Go back and try something else.",
-					http.StatusNotAcceptable,
-				)(w, r.WithContext(ctx))
-				return
-			}
-
-			// Check for the CSRF token
 			check := r.FormValue(config.CSRFInputName)
 			if check != token {
 				log.Error("CSRF mismatch! %s <> %s", check, token)

pkg/photo/upload.go

@@ -35,7 +35,10 @@ type UploadConfig struct {
 // - error on errors
 func UploadPhoto(cfg UploadConfig) (string, string, error) {
 	// Validate and normalize the extension.
-	var extension = strings.ToLower(cfg.Extension)
+	var (
+		extension   = strings.ToLower(cfg.Extension)
+		dbExtension = extension
+	)
 	switch extension {
 	case ".jpg":
 		fallthrough
@@ -45,16 +48,18 @@ func UploadPhoto(cfg UploadConfig) (string, string, error) {
 		extension = ".jpg"
 	case ".png":
 		extension = ".png"
+		dbExtension = ".jpg"
 	case ".gif":
-		extension = ".mp4"
+		extension = ".gif"
+		dbExtension = ".mp4"
 	default:
 		return "", "", errors.New("unsupported image extension, must be jpg or png")
 	}
 
 	// Decide on a filename for this photo.
 	var (
-		filename     = NewFilename(extension)
+		filename     = NewFilename(dbExtension)
-		cropFilename = NewFilename(extension)
+		cropFilename = NewFilename(dbExtension)
 	)
 
 	// Decode the image using exiffix, which will auto-rotate jpeg images

web/templates/photo/delete.html

@@ -28,7 +28,14 @@
                             <input type="hidden" name="confirm" value="true">
 
                             <div class="image block">
+                                <!-- GIF video? -->
+                                {{if HasSuffix .Photo.Filename ".mp4"}}
+                                <video autoplay loop controls>
+                                    <source src="{{PhotoURL .Photo.Filename}}" type="video/mp4">
+                                </video>
+                                {{else}}
                                 <img src="{{PhotoURL .Photo.Filename}}">
+                                {{end}}
                             </div>
                             <div class="block">
                                 Are you sure you want to delete this photo?
@@ -45,4 +52,4 @@
     </div>
 
 </div>
-{{end}}
+{{end}}

web/templates/photo/permalink.html

@@ -68,10 +68,15 @@
                 </div>
             </header>
 
-            <div class="card-image">
+            <div class="card-image has-text-centered">
-                <figure class="image">
+                <!-- GIF video? -->
-                    <img src="{{PhotoURL .Photo.Filename}}">
+                {{if HasSuffix .Photo.Filename ".mp4"}}
-                </figure>
+                <video autoplay loop controls>
+                    <source src="{{PhotoURL .Photo.Filename}}" type="video/mp4">
+                </video>
+                {{else}}
+                <img src="{{PhotoURL .Photo.Filename}}">
+                {{end}}
             </div>
 
             <div class="card-content">
@@ -280,4 +285,4 @@
     </div>
 
 </div>
-{{end}}
+{{end}}