angular / angular/angularfire

Storage: uploadBytes() does not use proper ContentType

Ouverte
#3,196 2 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
Langage dominant
TypeScript
Étoiles
7.8k
Forks
2.2k
Merge moyen
22 h 28 min
PR mergées (30 j)
6

Description

### 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 **
![grafik](https://user-images.githubusercontent.com/7628757/160568062-7966ea21-4fa4-4042-b6b5-5eda4959e7da.png)

### 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.

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par le point d’entrée uploadBytes() et reproduisez le problème avec l’exemple utilisant Angular 13.3.0, Firebase 10.5.0 et AngularFire 7.2.1. Inspectez la requête d’upload générée et la gestion des métadonnées de Firebase Storage ; le travail est terminé lorsque la requête respecte contentType: 'image/png' et que la règle de sécurité fournie autorise l’upload.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, firebase, typescript
Domaine
cloud
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Clairement spécifiée
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.