51

With the new Firebase API you can upload files into cloud storage from client code. The examples assume the file name is known or static during upload:

// Create a root reference
var storageRef = firebase.storage().ref();
    
// Create a reference to 'mountains.jpg'
var mountainsRef = storageRef.child('mountains.jpg');
    
// Create a reference to 'images/mountains.jpg'
var mountainImagesRef = storageRef.child('images/mountains.jpg');

or

// File or Blob, assume the file is called rivers.jpg
var file = ...
    
// Upload the file to the path 'images/rivers.jpg'
// We can use the 'name' property on the File API to get our file name
var uploadTask = storageRef.child('images/' + file.name).put(file);

With users uploading their own files, name conflicts are going to be an issue. How can you have Firebase create a filename instead of defining it yourself? Is there something like the push() feature in the database for creating unique storage references?

Sam Spencer
  • 8,492
  • 12
  • 76
  • 133
Travis Christian
  • 2,412
  • 2
  • 24
  • 41

5 Answers5

91

Firebase Storage Product Manager here:

TL;DR: Use a UUID generator (in Android (UUID) and iOS (NSUUID) they are built in, in JS you can use something like this: Create GUID / UUID in JavaScript?), then append the file extension if you want to preserve it (split the file.name on '.' and get the last segment)

We didn't know which version of unique files developers would want (see below), since there are many, many use cases for this, so we decided to leave the choice up to developers.

images/uuid/image.png   // option 1: clean name, under a UUID "folder"
image/uuid.png          // option 2: unique name, same extension
images/uuid             // option 3: no extension

It seems to me like this would be a reasonable thing to explain in our documentation though, so I'll file a bug internally to document it :)

Community
  • 1
  • 1
Mike McDonald
  • 15,609
  • 2
  • 46
  • 49
  • is there a way to do this with to web version of firebase? – Nick Garver Sep 12 '16 at 04:19
  • Yes, see http://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript as mentioned above – Mike McDonald Sep 12 '16 at 06:15
  • This is pretty terrible if you want users to download the files back. There should be a simple way to rename the files on the fly before uploading if a file exists. – Pier Dec 21 '16 at 15:26
  • @Pier agreed, though curious how would you see this working (maybe propose an API)? Seems like it would either require syncing file names locally or always reading before writing (to resolve naming conflicts), which would kill performance. We recommend syncing file names anyways (using the realtime DB), so with that approach "listing file names" thing is less of an issue. – Mike McDonald Dec 21 '16 at 15:59
  • Actually, the folder with a uuid is a great solution. I hadn't seen that before. Sorry. – Pier Dec 21 '16 at 16:13
  • 6
    It's all good--we appreciate feedback in making the product better. Not trying to say your input isn't valid/these solutions are *the best*, just hoping that they serve the needs of a majority of devs and make the product easy and fun to use :) – Mike McDonald Dec 21 '16 at 16:14
  • 1
    I'm confused by the uuid doc. If generating "time-based" uuid what's to prevent two users' uuid from colliding if generated at the same time? If generating "random" uuid then isn't there a tiny chance two uuid's will collide as well? – pete May 27 '17 at 07:59
  • 1
    time-based i am not sure, but yes a random uuid could collide, but the chance is so small it's nearly impossible. – Mindless Oct 12 '17 at 03:41
  • 1
    User ID + the file increment + date now + math random substring 2 – Luka Jul 09 '20 at 08:46
6

This is the solution for people using dart

Generate the current date and time stamp using:-

var time = DateTime.now().millisecondsSinceEpoch.toString();

Now upload the file to the firebase storage using:-

await FirebaseStorage.instance.ref('images/$time.png').putFile(yourfile);

You can even get the downloadable url using:-

var url = await FirebaseStorage.instance.ref('images/$time.png').getDownloadURL();

  • You lose your original filename with this solution – mgPePe Mar 19 '22 at 08:16
  • This is the best solution for storing files with unique IDs. I will add one new thing if someone wants to add an image with a unique name, and also can be identified later, we can attach our user UID with the image name, and later on, we can filter through this UID by applying some string manipulation. await FirebaseStorage.instance.ref('images/${user.uid}$time.png').putFile(yourfile); – Abdur Rehman Feb 24 '23 at 11:56
3

First install uuid - npm i uuid

Then define the file reference like this

import { v4 as uuidv4 } from "uuid";

const fileRef = storageRef.child(
            `${uuidv4()}-${Put your file or image name here}`
          );

After that, upload with the file with the fileRef

fileRef.put(Your file)

Shisui
  • 33
  • 2
1

In Android (Kotlin) I solved by combining the user UID with the milliseconds since 1970:

val ref = storage.reference.child("images/${auth.currentUser!!.uid}-${System.currentTimeMillis()}")
Damien
  • 921
  • 4
  • 13
  • 31
0

code below is combination of file structure in answer from @Mike McDonald , current date time stamp in answer from @ Aman Kumar Singh , user uid in answer from @Damien : i think it provides unique id, while making the firebase storage screen more readable.

Reference ref = firebaseStorage
    .ref()
    .child('videos')
    .child(authController.user.uid)
    .child(DateTime.now().millisecondsSinceEpoch.toString());
tmr
  • 1,500
  • 15
  • 22