Firebase storage Upload 404 unknown error help

Ionic Framework ionic-v3
1

Hello Everyone,

I keep getting a 404 unknown FirebaseError everytime i try to upload a blob of audio data to firebase storage. but when
i click the link that is generated using the .put(blob), i can see the JSON that is generated. i dont get this error rwhen uploading imagedata from camera plugin.

Error:
Failed to load resource: the server responded with a status of 404 (Not Found)

{“code”:“storage/unknown”,“message”:“Firebase Storage: An unknown error occurred, please check the error payload for server response.”,“serverResponse”:“”,“name”:“FirebaseError”}

Link: https://firebasestorage.googleapis.com/v0/b/copout-54f4e.appspot.com/o?name=record%2Fcopoutrecording.mp3

Link response:

image
image1168×861 63.7 KB

ionic version

Your system information:

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.0-201610131811
Ionic CLI Version: 2.1.1
Ionic App Lib Version: 2.1.1
Ionic App Scripts Version: 0.0.36
OS:
Node Version: v4.6.0

Code:

index.html

 <ion-app></ion-app>
    <!--fire base data services-->
    <script src="js/firebase.js"></script>
 <!--<script src="https://www.gstatic.com/firebasejs/3.5.0/firebase.js"></script>-->
<script>
  // Initialize Firebase
  var config = {
     apiKey: "AIzaSyCRmYBGfqyXDW-vWwA-st9-PYR8vzLyXto",
    authDomain: "copout-54f4e.firebaseapp.com",
    databaseURL: "https://copout-54f4e.firebaseio.com",
    storageBucket: "copout-54f4e.appspot.com",
    messagingSenderId: "576093985395"
  };
  firebase.initializeApp(config);
</script>

recordpage.ts

import { Injectable } from ‘@angular/core’;
import { MediaPlugin } from ‘ionic-native’;
import {FireBaseData} from ‘./firebase.service’;
import { File } from ‘ionic-native’;

declare var cordova: any;
// firebase
declare var firebase: any;

export enum AudioRecorderState {
Ready,
Recording,
Recorded,
Playing
}

@Injectable()
export class AudioRecorder {
mediaPlugin: MediaPlugin = null;
state: AudioRecorderState = AudioRecorderState.Ready;
mdeastr: string;
fbd: any;
progress: string;
file: any;

constructor() {
this.fbd = new FireBaseData();
}

get MediaPlugin(): MediaPlugin {
if (this.mediaPlugin == null) {
this.mediaPlugin = new MediaPlugin(“copoutrecording.mp3”, null);
}

return this.mediaPlugin;

}

upload() {
var test = JSON.stringify(this.MediaPlugin);

this.file = { name: "copoutrecording.mp3" };

   File.readAsDataURL(cordova.file.externalRootDirectory, this.file.name).then((data: any) => {
   if (data) {
   var blob = new Blob([data], { type: "audio/mp3" }); 
   this.fbd.uploadrecording(blob);
  }

});
}

firebase.service.ts

import { Injectable } from ‘@angular/core’;
import { Platform } from ‘ionic-angular’;
import { File } from ‘ionic-native’;

declare var firebase: any;
declare var cordova: any;

@Injectable()
export class FireBaseData {

file: any;
recordstorage: any;

constructor() {
var rec = firebase.storage();
var recref = rec.ref();
this.recordstorage = recref.child(“record”);
}

public uploadrecording(blob: any) {

var uploadTask = this.recordstorage.child('copoutrecording.mp3').put(blob);

// Listen for state changes, errors, and completion of the upload.
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
  function (snapshot) {

    // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
    var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    console.log('Upload is ' + progress + '% done' + ": " + snapshot.bytesTransferred + " / " + snapshot.totalBytes);
   
    switch (snapshot.state) {
      case firebase.storage.TaskState.PAUSED: // or 'paused'
        console.log('Upload is paused');
        break;
      case firebase.storage.TaskState.RUNNING: // or 'running'
        console.log('Upload is running');
        //     alert("media uploading to firebase");
        break;
    }
  }, function (error) {
    switch (error.code) {
      case 'storage/unauthorized':
      // User doesn't have permission to access the object
        console.log(JSON.stringify(error));
        break;

      case 'storage/canceled':
        console.log(JSON.stringify(error));
        //  alert("cancelled: " + error.serverResponse);
        // User canceled the upload
        break;

      case 'storage/unknown':
        console.log(JSON.stringify(error));
        //    alert("error: " + error.message);
        //      alert("error: " + JSON.stringify(error));
        // Unknown error occurred, inspect error.serverResponse
        break;
    }
  }, function () {

    // Upload completed successfully, now we can get the download URL
    var downloadURL = uploadTask.snapshot.downloadURL;
    alert("made it to firebase" + downloadURL);
  });

}

}

2

I solved this problem. My device was not able to access the internet, i had to install cordova-plugin-whitelist and everything worked