angular / angular/angularfire

Storage: uploadBytes() does not use proper ContentType

Open
#3,196 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
7.8k
Forks
2.2k
Avg merge
22h 28m
Merged PRs (30d)
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.

Contributor guide

Open the contributing guide

Research direction

Start from the uploadBytes() entry point and reproduce the issue with the Angular 13.3.0, Firebase 10.5.0, and AngularFire 7.2.1 example. Inspect the generated upload request and Firebase Storage metadata handling; done means the request honors contentType: 'image/png' and the supplied security rule permits the upload.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, firebase, typescript
Domain
cloud
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.