How to create a folder in Firebase Storage?

Question

So the new Firebase has support for storage using Google Cloud Platform.

You can upload a file to the images folder using:

var uploadTask = storageRef.child('images').put(file, metadata);

What if you want to create a subfolder images/user1234 dynamically using code?

The offical sample does not show how to do that, nor the official guide or reference docs.

Is the Firebase Console the only place where folders can be created manually?

Answer 1

The Firebase Storage API dynamically creates "folders" as intermediate products: if you create a file at images/user1234/file.txt, all intermediate "folders" like "images" and "user1234" will be created along the way. So your code becomes:

var uploadTask = storageRef.child('images/user1234/file.txt').put(file, metadata);

Note that you need to include the file name (foo.txt for example) in the child() call, since the reference should include the full path as well as the file name, otherwise your file will be called images.

Answer 2

The Firebase Console does allow you to create a folder, since it's the easiest way to add files to a specific folder there.

But there is no public API to create a folder. Instead folders are auto-created as you add files to them.

Answer 3

You most certainly can create directories... with a little bit of playing with the references I did the following.

test = (e,v) => {
    let fileName = "filename"
    let newDirectory = "someDir"
    let storage = firebase.storage().ref(`images/${newDirectory}/${fileName}`)

    let file = e.target.files[0]
    if(file !== undefined && file.type === "image/png" ) {
        storage.put(file)
            .then( d => console.log('you did it'))
            .catch( d => console.log("do something"))
    }
}

Answer 4

String myFolder = "MyImages";
StorageReference riversRef = storageReference.child(myFolder).child("images/pic.jpg");

Answer 5

Firebase is lacking very important functionality, there's always the need to be doing some tricks to emulate behaviours that should be standard.

• If you create a folder manually from the Firebase console it will persist even when there are no more files in it.

• If you create a folder dynamically and all files get deleted at some point, the folder will disappear and be deleted as well.

I implemented a file manager using Firebase Storage so when a user wants to upload a file he can do it through this interface not from something external to the app as is the Firebase Console. You want to give the user the option to reorganize the files as he wants, but something as common as creating a new folder cannot be done without tricks, why? just because this is Firebase.

So in order to emulate this behaviour what I came up with was the following:

1. Create a reference with the new folder name.
2. Create a reference for a "ghost" file as child of the folder's reference and give it always the same fixed name, eg. '.ghostfile'
3. Upload the file to this newly created folder. Any method is valid, I just use uploadString.
4. Every time I list the files of a reference, exclude any file named as before. So this "ghost" file is not shown in the file manager.

So an example to create a foler:

async function createFolder (currentRef: StorageReference, folderName: string) {
        const newDir = ref(currentRef, name)
        const ghostFile = ref(newDir, '.ghostfile')
        await uploadString(ghostFile, '')
}

And an example to list the files:

async function loadLists (ref: StorageReference) {
    const { prefixes, items } = await listAll(ref)
    return {
        directories: prefixes,
        files: items.filter(file => file.name !=== '.ghostfile')
    }
}

Answer 6

Firebase console allows you to create a folder. I don't think there is another way to create a folder.