Add support for SVG files to media. Closes #1217.

- Add support for SVG in media uploader. - Add provision to exclude vector formats from thumbnail creation. - Increase default thumb size to 120px from 90px. Co-authored-by: Ronan <[email protected]>
knadh · Mar 19, 2023 · 6cf8234 · 6cf8234
1 parent aaf5080
commit 6cf8234
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 20 deletions.
diff --git a/cmd/media.go b/cmd/media.go
@@ -14,13 +14,16 @@ import (
 
 const (
 	thumbPrefix   = "thumb_"
-	thumbnailSize = 90
+	thumbnailSize = 120
 )
 
 // validMimes is the list of image types allowed to be uploaded.
 var (
-	validMimes = []string{"image/jpg", "image/jpeg", "image/png", "image/gif"}
-	validExts  = []string{".jpg", ".jpeg", ".png", ".gif"}
+	validMimes = []string{"image/jpg", "image/jpeg", "image/png", "image/gif", "image/svg+xml"}
+	validExts  = []string{".jpg", ".jpeg", ".png", ".gif", ".svg"}
+
+	// Vector extensions that don't need to be resized for thumbnails.
+	vectorExts = []string{".svg"}
 )
 
 // handleUploadMedia handles media file uploads.
@@ -78,22 +81,32 @@ func handleUploadMedia(c echo.Context) error {
 		}
 	}()
 
-	// Create thumbnail from file.
-	thumbFile, width, height, err := processImage(file)
-	if err != nil {
-		cleanUp = true
-		app.log.Printf("error resizing image: %v", err)
-		return echo.NewHTTPError(http.StatusInternalServerError,
-			app.i18n.Ts("media.errorResizing", "error", err.Error()))
-	}
+	// Create thumbnail from file for non-vector formats.
+	var (
+		thumbfName = fName
+		width      = 0
+		height     = 0
+	)
+	if !inArray(ext, vectorExts) {
+		thumbFile, w, h, err := processImage(file)
+		if err != nil {
+			cleanUp = true
+			app.log.Printf("error resizing image: %v", err)
+			return echo.NewHTTPError(http.StatusInternalServerError,
+				app.i18n.Ts("media.errorResizing", "error", err.Error()))
+		}
+		width = w
+		height = h
 
-	// Upload thumbnail.
-	thumbfName, err := app.media.Put(thumbPrefix+fName, typ, thumbFile)
-	if err != nil {
-		cleanUp = true
-		app.log.Printf("error saving thumbnail: %v", err)
-		return echo.NewHTTPError(http.StatusInternalServerError,
-			app.i18n.Ts("media.errorSavingThumbnail", "error", err.Error()))
+		// Upload thumbnail.
+		tf, err := app.media.Put(thumbPrefix+fName, typ, thumbFile)
+		if err != nil {
+			cleanUp = true
+			app.log.Printf("error saving thumbnail: %v", err)
+			return echo.NewHTTPError(http.StatusInternalServerError,
+				app.i18n.Ts("media.errorSavingThumbnail", "error", err.Error()))
+		}
+		thumbfName = tf
 	}
 
 	// Write to the DB.

diff --git a/frontend/src/assets/style.scss b/frontend/src/assets/style.scss
@@ -774,9 +774,12 @@ section.analytics {
       margin: 10px;
       max-height: 90px;
       overflow: hidden;
-
       position: relative;
 
+      img {
+        max-width: 120px;
+      }
+
       .caption {
         background-color: rgba($white, .70);
         position: absolute;

diff --git a/frontend/src/views/Media.vue b/frontend/src/views/Media.vue
@@ -16,7 +16,7 @@
               v-model="form.files"
               drag-drop
               multiple
-              accept=".png,.jpg,.jpeg,.gif"
+              accept=".png,.jpg,.jpeg,.gif,.svg"
               expanded>
               <div class="has-text-centered section">
                 <p>