Storage: uploadBytes() does not use proper ContentType
- Vorherrschende Sprache
- TypeScript
- Sterne
- 7.8k
- Forks
- 2.2k
- Ø Merge
- 22 Std. 28 Min.
- Gemergte PRs (30 T.)
- 6
Beschreibung
### Version info
**Angular:** 13.3.0
**Firebase:** 10.5.0
**AngularFire:** 7.2.1
### How to reproduce these conditions
**Steps to set up and reproduce**
```
import { ref, Storage, uploadBytes } from '@angular/fire/storage';
@Component({
template: ``
})
export class UploadComponent {
constructor(private storage: Storage) {}
async upload(fileInput: any) {
const file: File = fileInput.files[0];
await uploadBytes(ref(this.storage, '/images'), file, { contentType: 'image/png' });
// -> content-type of the POST request is multipart/related instead of image/png and thus firestore security rules fail with 403!
}
}
```
**Sample data and security rules**
```
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if false;
}
match /images/{allPaths=**} {
allow read: true;
allow write: if resource.contentType == 'image/png';
}
}
```
### Debug output
** Errors in the JavaScript console **
```
Firebase Storage: User does not have permission to access 'images/demo.png'. (storage/unauthorized)
```
** Screenshots **

### Expected behavior
File is sucessfully uploaded, with contentType = 'image/png'
### Actual behavior
With enabled security rule, file file fails to upload (when checking network request, the contentType is set to 'multipart/related'. As soon as security rule is disabled (ie allow write: if true;) everything works perfectly.
Beitragsleitfaden
Rechercherichtung
Beginne beim Einstiegspunkt uploadBytes() und reproduziere das Problem mit dem Beispiel für Angular 13.3.0, Firebase 10.5.0 und AngularFire 7.2.1. Untersuche die generierte Upload-Anfrage und die Verarbeitung der Firebase-Storage-Metadaten; abgeschlossen ist die Aufgabe, wenn die Anfrage contentType: 'image/png' berücksichtigt und die bereitgestellte Sicherheitsregel den Upload erlaubt.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, firebase, typescript
- Bereich
- cloud
- Issue-Typ
- Bug
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Klar beschrieben
- Anfängerfreundlichkeit
- 35/100