Add file type restriction to image upload input using accept attribute (#872)

* Add file type restriction to image upload input using accept attribute

Signed-off-by: eternal-flame-AD <yume@yumechi.jp>

---------

Signed-off-by: eternal-flame-AD <yume@yumechi.jp>
Co-authored-by: eternal-flame-AD <yume@yumechi.jp>

api/application.go

@@ -6,6 +6,7 @@ import (
 	"net/http"
 	"os"
 	"path/filepath"
+	"strings"
 
 	"github.com/gin-gonic/gin"
 	"github.com/gotify/server/v2/auth"
@@ -459,7 +460,7 @@ func generateNonExistingImageName(imgDir string, gen func() string) string {
 }
 
 func ValidApplicationImageExt(ext string) bool {
-	switch ext {
+	switch strings.ToLower(ext) {
 	case ".gif", ".png", ".jpg", ".jpeg":
 		return true
 	default:

ui/src/application/Applications.tsx

@@ -59,6 +59,8 @@ const Applications = observer(() => {
 
     useEffect(() => void appStore.refresh(), []);
 
+    const validExtensions = ['.gif', '.png', '.jpg', '.jpeg'];
+
     const handleImageUploadClick = (id: number) => {
         uploadId.current = id;
         if (fileInputRef.current) {
@@ -71,11 +73,7 @@ const Applications = observer(() => {
         if (!file) {
             return;
         }
-        if (['image/png', 'image/jpeg', 'image/gif'].indexOf(file.type) !== -1) {
         appStore.uploadImage(uploadId.current, file);
-        } else {
-            alert('Uploaded file must be of type png, jpeg or gif.');
-        }
     };
 
     return (
@@ -128,6 +126,7 @@ const Applications = observer(() => {
                     <input
                         ref={fileInputRef}
                         type="file"
+                        accept={validExtensions.join(',')}
                         style={{display: 'none'}}
                         onChange={onUploadImage}
                     />