fix: base64 img regex (#1018)

* fix: base64 img regex

* refactor: minor refactor for file type validation

Author: rahultrivedi180

src/backend/photos.ts

@@ -2,13 +2,10 @@ import axios from 'axios'
 import ipfs from './utilities/ipfs'
 import { nodeUrl, sigValidity } from './utilities/config'
 import libsodium from './utilities/keys'
-import { uint8ArrayToHexString } from './utilities/helpers'
+import { uint8ArrayToHexString, validFileTypes } from './utilities/helpers'
 import { getCompressedImage } from './utilities/imageCompression'
 import { encryptData } from './crypto'
 
-const validFileTypes = [`image/jpeg`, `image/jpg`, `image/png`, `image/avif`, `image/webp`]
-const regExpString = `^data:${validFileTypes.join(`|`)}:base64,([a-fA-F0-9]+)$`
-
 interface IUploadPhotoResult {
 	cid: string
 	url: string | ArrayBuffer
@@ -45,7 +42,7 @@ export function addPhotoToIPFS(content: string | ArrayBuffer) {
 }
 
 export function isValidPhoto(content: string) {
-	const regExp = new RegExp(regExpString)
+	const regExp = new RegExp(`^data:image/(?:${validFileTypes.join(`|`)});base64,([a-zA-Z0-9+/]+=*)$`)
 	if (!regExp.test(content)) {
 		return false
 	}

src/backend/utilities/helpers.ts

@@ -4,6 +4,9 @@ export interface ISignedIPFSObject<T> {
 	public_key: string
 }
 
+export const validFileTypes = [`png`, `jpeg`, `jpg`, `avif`, `webp`]
+export const validMimeTypes = validFileTypes.map((t) => `image/${t}`)
+
 export function uint8ArrayToHexString(uint8Array: Uint8Array): string {
 	return Buffer.from(uint8Array).toString(`hex`)
 }
@@ -41,14 +44,6 @@ export function getBlobExtension(blob: Blob): string | null {
 	}
 }
 
-export function isValidFileType(fileType: string) {
-	const validFileTypes = [`image/png`, `image/jpeg`, `image/jpg`, `image/avif`, `image/webp`]
-	if (!validFileTypes.includes(fileType)) {
-		return false
-	}
-	return true
-}
-
 export function calculateReadingTime(wordCount?: number, postImagesLength: number = 0) {
 	if (!wordCount) {
 		return null

src/components/post/Editor.vue

@@ -113,7 +113,7 @@ import {
 	Tag,
 } from '@/backend/post'
 import { preUploadPhoto, uploadPhoto } from '@/backend/photos'
-import { isValidFileType } from '@/backend/utilities/helpers'
+import { validMimeTypes } from '@/backend/utilities/helpers'
 import textLimits from '@/backend/utilities/text_limits'
 
 interface IData {
@@ -484,7 +484,7 @@ export default Vue.extend({
 			return pastedContent
 		},
 		async handleFile(file: File) {
-			if (!isValidFileType(file.type)) {
+			if (!validMimeTypes.includes(file.type)) {
 				this.$toastError(`image of type ${file.type} is invalid`)
 				return
 			}