angular / angular/angularfire

Storage: uploadBytes() does not use proper ContentType

Abierto
#3,196 2 comentarios 0 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
TypeScript
Estrellas
7.8k
Forks
2.2k
Merge medio
22 h 28 min
PR fusionados (30 d)
6

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza desde el punto de entrada uploadBytes() y reproduce el problema con el ejemplo de Angular 13.3.0, Firebase 10.5.0 y AngularFire 7.2.1. Inspecciona la solicitud de carga generada y el manejo de metadatos de Firebase Storage; se considera terminado cuando la solicitud respeta contentType: 'image/png' y la regla de seguridad proporcionada permite la carga.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, firebase, typescript
Área
cloud
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bien especificado
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.