Why am I getting an unauthorized firebase storage error? - firebase

Question

My firebase storage rules:
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read: if true;
allow write: if resource.contentType == "image/svg+xml" && resource.size < 1 * 1024 * 1024;
}
}
}
I created an upload form on my website and when I try to upload the following file, I keep getting error 403. The error code is storage/unauthorized, but I don't see why that would be when the only requirement to upload is that it's an SVG under 1 MB. The svg is ~3kb.
function uploadFile() {
var storageRef = firebase.storage().ref();
var file = document.getElementById("file").files[0];
var metadata = {
contentType: "image/svg+xml"
};
var uploadTask = storageRef
.child("path/" + file.name)
.put(file, metadata);
uploadTask.on(
firebase.storage.TaskEvent.STATE_CHANGED,
snapshot => {
//do stuff
},
error => {
switch (error.code) {
case "storage/unauthorized":
break;
case "storage/canceled":
break;
case "storage/unknown":
break;
}
},
() => {
//... do stuff
}
);
};
<form>
<input id="file" type="file" accept="image/svg+xml" /><br><br>
<button type="button" onclick="uploadFile()">
Upload logo
</button>
</form>
Another test I performed was uploading the file directly to my bucket via the Firebase console, and then using the security rules playground to simulate uploading that file. It succeeded, as you can see from the screenshot:
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100" fill="#FDFBF5"/>
<path d="M37.2519 7.67798C68.1999 45.25 36.5859 45.8 40.1559 66.912C44.5559 92.938 81.0719 85.168 77.5099 64.08C79.9379 78.452 69.5359 91.044 54.2799 92.2C39.0239 93.356 24.6799 82.64 22.2459 68.268C17.5799 40.694 59.9679 37.742 37.2519 7.67798Z" fill="url(#paint0_radial)"/>
<path d="M70.1816 67.0919C75.3376 57.2319 72.5996 33.3219 39.9136 8.35791C63.3136 27.9579 52.7896 46.9459 45.6656 57.1679C37.1176 69.4299 59.2836 87.9199 70.1816 67.0919Z" fill="url(#paint1_radial)"/>
<path d="M70.3116 67.2001C75.4616 57.3521 72.7336 33.4701 40.0796 8.53613C63.4536 28.1081 56.4116 46.5361 49.2996 56.7501C40.7616 69.0001 59.4256 88.0001 70.3116 67.2001Z" fill="url(#paint2_radial)"/>
<path d="M37.248 7.67798C37.248 7.67798 52.286 24.18 36.13 39.328C18.79 55.586 20.244 65.508 25.318 76.886C30.392 88.264 52.422 98.686 67.628 87.586C82.834 76.486 77.028 62.786 77.028 62.786C77.028 62.786 82.56 78.522 58.692 85.122C58.692 85.122 37.368 89.304 33.146 66.018C28.924 42.732 63.09 46.504 37.248 7.67798Z" fill="url(#paint3_radial)"/>
<defs>
<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(49.7635 63.8117) rotate(175.684) scale(31.2973 29.7352)">
<stop offset="0.12" stop-color="#FFF200"/>
<stop offset="0.46" stop-color="#F7941D"/>
<stop offset="0.93" stop-color="#F15A29"/>
</radialGradient>
<radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(48.4093 43.2512) rotate(166.097) scale(27.7059 27.3118)">
<stop offset="0.12" stop-color="#00ADEE"/>
<stop offset="0.46" stop-color="#14A1DF"/>
<stop offset="0.93" stop-color="#222265"/>
</radialGradient>
<radialGradient id="paint2_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(322586 -45769.5) rotate(-115.837) scale(7112.64 16975.5)">
<stop offset="0.12" stop-color="#00ADEE"/>
<stop offset="0.46" stop-color="#14A1DF"/>
<stop offset="0.93" stop-color="#222265"/>
</radialGradient>
<radialGradient id="paint3_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(50.0191 50.0705) rotate(5.71) scale(36.224 27.5302)">
<stop stop-color="#F15A29"/>
<stop offset="0.3" stop-color="#F7941D"/>
<stop offset="0.57" stop-color="#F9ED32"/>
<stop offset="0.85" stop-color="#F7941D"/>
</radialGradient>
</defs>
</svg>

Answer 1

The answer was pretty simple, I wasn't calling request.resource:
allow write: if request.resource.contentType == "image/svg+xml" && request.resource.size < 1 * 1024 * 1024;