Firebase-js-sdk: Firebase storage upload fails on Safari on iOS 11

[arikanorh]

[REQUIRED] Describe your environment

• Operating System version: iOS11
• Browser version: Safari
• Firebase SDK version: "firebase": "^5.2.0",
• Firebase Product: storage (auth, database, storage, etc)

[REQUIRED] Describe the problem

Coming from https://github.com/angular/angularfire2/issues/1803. I'm using angularfire2 and firebase storage. When service worker is enabled, the upload is fail on iOS safari saying

Multipart body does not contain 2 or 3 parts.

Steps to reproduce:

Create simple app with angular cli and default service worker configuration. While you upload a file, for some service worker issues the upload fails and this only happens on iOS safari with SW enabled.

Relevant Code:

https://stackblitz.com/fork/firebase-issue-sandbox
I cannot provide a pure JS code example since my code is Angular. But i may try to create angular sample

startUpload() {
    const base64strOrj: string = ....
    const base64str = base64strOrj.replace('data:image/jpeg;base64,', '');

    const metadata = {
    ...
    };


    const filePath = ...
    const fileRef = this.storage.ref(filePath);
    const task = fileRef.putString(base64str, 'base64', metadata);
    this.showUpload = true;
    // observe percentage changes

    task.percentageChanges().pipe(tap(perc => {
      if (perc === 100) {
        ...
      }
    })).subscribe();
    // get notified when the download URL is available
    task.snapshotChanges().pipe(
      finalize(() => fileRef.getDownloadURL().subscribe(url => {
       ...

      }))
    )
      .subscribe();
  }

[troydcthompson]

Same issue. Did you find a workaround @arikanorh?

[WB3Tech]

I'm having this same issue.

[felipefialho]

Same here

[nadhir-falta]

Any luck/workaround this ?

[Yejielw]

We are having the same issue, this seems like a real bug

[joaqcid]

im having same issue, Safari for iOS 12

[koraysels]

I have this bug too, is anyone working on this ?

[koraysels]

found a solution! I was using ngsw and on safari it break image uplaods.. see issue here
using a replace-in-file from npm
I run this after my build.

It excludes the firebase API from service worker caching...

const replace = require('replace-in-file');
const options = {
  files: 'dist/browser/ngsw-worker.js',
  from: `onFetch(event) {`,
  to: `onFetch(event) {
        if (event.request.url.indexOf('firebasestorage.googleapis.com') !== -1) { return; }`,
};

replace(options)
  .then(changes => {
    console.log('Modified files:', changes.join(', '));
  })
  .catch(error => {
    console.error('Error occurred:', error);
  });

[sheminusminus]

i used the solution @koraysels posted, but just added

if (event.request.url.indexOf('firebasestorage.googleapis.com') !== -1) { return; }

to the first line of my fetch event listener directly.

[kogden]

Was this ever solved? I'm having the same issue on Safari.

[choopage]

Same issue still

[choopage]

For those using AngularFire2, consider this workaround.

https://github.com/angular/angularfire2/issues/1909