CODEWITHSUNDEEP
javascriptfirebasefirebase-storagefirebase-console
Pier
Pier

Reputation: 10827

How to create a folder in Firebase Storage?

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?

Upvotes: 38

Views: 40958

Answers (6)

Frank van Puffelen
Frank van Puffelen

Reputation: 599131

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.

Firebase Storage is based on Google Cloud Storage. See the documentation provided by GCS about the illusion of folders.

Upvotes: 33

giorgiline
giorgiline

Reputation: 1371

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')
    }
}

Upvotes: 8

Tarun Umath
Tarun Umath

Reputation: 910

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

Upvotes: 4

JustDave
JustDave

Reputation: 546

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"))
    }
}

enter image description here

Upvotes: 6

Suraj Upreti
Suraj Upreti

Reputation: 61

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

Upvotes: 0

Mike McDonald
Mike McDonald

Reputation: 15963

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.

Upvotes: 55

Related Questions