The storage Uri could not be parsed


#1

Hello!

First of all say that I’m new with NS and now I’m stacked for a few days. I’m trying to upload an image to firebase but when I have to upload it I get the following error: The storage Uri could not be parse

I’m using a plugin to select the images and then I upload it to firebase, but here I have the error when I try to deal with the Uri.

I don’t understand why, when I config my firebase I have the storageBucket, and I don’t know if I need something else.

Here is my code:

album_list.component.ts

import { Component } from '@angular/core';
import { RouterExtensions } from 'nativescript-angular/router';

import firebase = require('nativescript-plugin-firebase');

//camera 
import cameraModule = require("camera");
import imageModule = require("ui/image");

//image picker
var imagepicker = require("nativescript-imagepicker");

// image source
var imageSource = require("image-source");


import * as permissions from "nativescript-permissions";
declare var android;

@Component({
    selector:'album_list',
    moduleId: module.id,
    templateUrl: "album_list.component.html",

})

export class AlbumListComponent{
 
    constructor(private routerExt: RouterExtensions ){}

    ngOnInit() {

    }

    permissions() {
        // var permissions = require('nativescript-permissions');

        permissions.requestPermission([
        "android.permission.INTERNET",
        "android.permission.READ_EXTERNAL_STORAGE",
        "android.permission.WRITE_EXTERNAL_STORAGE",
        "android.permission.SET_WALLPAPER",
        "android.permission.ACCESS_NETWORK_STATE"
     ], "I need these permissions")
        .then(function (res) {
            console.log("Permissions granted!");
        })
        .catch(function () {
            console.log("No permissions - plan B time!");
        });
        
        this.onSelectMultipleTap();

    }
    
    onSelectMultipleTap() {
       
        function selectImages() {
            var context = imagepicker.create({
                mode: "multiple"
            });

            context
                .authorize()
                .then(function() {
                    return context.present();
                })
                .then(function(selection) {
                    
                    selection.forEach(function(selected) {
                        
                        uploadFile(selected);
                        
                    });
                }).catch(function (e) {
                    console.log(e);
                }); 
        }

        function uploadFile(file) {
        
            // init the file-system module
            var fs = require("file-system");

            // now upload the file with either of the options below:
            firebase.uploadFile({
                // optional, can also be passed during init() as 'storageBucket' param so we can cache it (find it in the Firebase console)
                bucket: 'mystory-2.appspot.com',
                // the full path of the file in your Firebase storage (folders will be created)
                remoteFullPath: 'uploads/images/test.png',
                // option 1: a file-system module File object
                localFile: file.fileUri,
                 // option 2: a full file path (ignored if 'localFile' is set)
                localFullPath: file.fileUri,
                // get notified of file upload progress
                onProgress: function(status) {
                console.log("Uploaded fraction: " + status.fractionCompleted);
                console.log("Percentage complete: " + status.percentageCompleted);
                }
            }).then(
                function (uploadedFile) {
                    console.log("File uploaded: " + JSON.stringify(uploadedFile));
                },
                function (error) {
                    console.log("File upload error: " + error);
                }
            );

        }


        selectImages()

    }   
    

    
}

The error is in the function uploadFile when I’m working with the file. Don’t know why I can’t get the correct Uri…

Thanks for all! :slight_smile:


#2

I believe that you’re not setting your local file storage path correctly, I think it’s not a problem with Firebase’s storage bucket. The error appears, I think, before the file ever hits Firebase.

In this file: https://github.com/jlooper/practicebuddy/blob/master/app/student-home/student-home.component.ts, note I save the filename to its proper path here: filename: UtilsService.documentsPath(recording-${Date.now()}.m4a),

Check out UtilsService to see how that path is set: https://github.com/jlooper/practicebuddy/blob/master/app/services/utils.service.ts