So I and my team are trying really hard to upload and retrieve SVG to firebase storage using cloud functions. With the function that we have built, we are able to upload any image we want except for SVG. For some reason SVG is not working I don't know if we are encoding it wrong or something
Here is my function file
const admin = require("firebase-admin");
const { nanoid } = require("nanoid");
const mime = require("mime-types");
const { validateCauseImageFile } = require("./fileTypeUtils");
const { imageStorageUrlMatch } = require("./regularExpression");
module.exports.imageValidationAndUpload = async (image) => {
try {
console.log("Image in base 64", image);
const bucket = admin.storage().bucket();
const mimeType = image.match(/data:([a-zA-Z0-9]+\/[a-zA-Z0-9-.+]+).*,.*/)
? image.match(/data:([a-zA-Z0-9]+\/[a-zA-Z0-9-.+]+).*,.*/)[1]
: null;
const fileExtension = mime.extension(mimeType);
console.log(fileExtension);
const fileName = nanoid() + `.${fileExtension}`;
console.log("Mime type", mimeType);
const base64EncodedImageString = image.replace(
/^data:image\/\w+;base64,/,
""
);
const imageBuffer = Buffer.from(base64EncodedImageString, "base64");
const result = await validateCauseImageFile(imageBuffer.length, mimeType);
if (result.success) {
const token = nanoid();
const options = {
gzip: true,
metadata: {
contentType: mimeType,
metadata: {
firebaseStorageDownloadTokens: token,
},
},
};
const filePath = "testSvg/" + fileName;
const file = bucket.file(filePath);
await file.save(imageBuffer, options);
const response = await file.getSignedUrl({
action: "read",
expires: "03-17-2025", // this is an arbitrary date
});
return { success: true, response: response[0] };
// return response;
} else if (image.match(imageStorageUrlMatch)) {
return { success: true, url: image };
} else {
const errorObject = { status: 403, message: result.message };
throw errorObject;
}
} catch (err) {
console.log("show error message : ", err.message);
return { success: false, message: err.message };
}
};
If I upload a png/jpeg/jpg image then it will be uploaded and work fine but for SVG it will be uploaded but won't render anything. On the firebase storage console bucket this is how it shows up
For SVG image
For png or any other image
The upload process works fine but SVG is not rendering or being retrieved properly. Here are the URL's for both files
