How to save unique id as a name of a image in Firebase?

Question

Hey guys I have a problem relating to firebase, so the problem is whenever i upload the same photo twice i got an error that the previous photos go unfetched(that's a blank img icon) due to having same names,so i installed a library 'uuidv4' which generates unique ids, so how can i put and save the unique id instead of given image name

let uniqueId = uuidv4()
const uploadTask = storage.ref(`images/${image.name}`).put(image);

then i did this

let uniqueId = uuidv4()
const uploadTask = storage.ref(`images/${uniqueId}`).put(image);

but got an error "Firebase Storage: Invalid argument in put at index 0: Expected Blob or File.

The upload function(i have jsx below that I didn't include at the bottom so don't worry about the closing brackets)

function ImageUpload({username}) {
    const [image, setImage] = useState(null);
    const [progress, setProgress] = useState(0);
    const [caption, setCaption] = useState('');

    const handleChange = (e) => {
        if (e.target.files[0]) {
            setImage(e.target.files[0]);
        }
    };

    const handleUpload = () => {
        let uniqueId = uuidv4()
        const uploadTask = storage.ref(`images/${image.name}`).put(image);

        uploadTask.on(
            "state_changed",
            (snapshot) => {
                const progress = Math.round (
                    (snapshot.bytesTransferred / snapshot.totalBytes) * 100
                );
                setProgress(progress);
            },
            (error) => {
                console.log(error);
                alert(error.message);
            },
            () => {
                storage
                .ref("images")
                .child(image.name)
                .getDownloadURL()
                .then(url => {
                    db.collection("posts").add({
                        timestamp: firebase.firestore.FieldValue.serverTimestamp(),
                        caption: caption,
                        imageUrl: url,
                        username: username                     
                    })
                })
                setProgress(0)
                setCaption('')
                setImage(null)
            }
        )
    }
return(jsx)
}

Answer 1

In firebase it's up to you to determine the name of the file you upload. However what i usually do if the image is linked to an account is to use the mAuth id of the logged in user as the directory or simply the filename. This way do you avoid duplicates!

Another way is to use a algorithm that generates unique keys due to date or time, but you still have to double check if that key already exists just to be sure.

There might be another way i don't know, since creating on realtime database creates their own keys somehow.

With the same photo can you simply recursive call the method again and add index to the end of the file, however this method is not that great to use.

For more or better details check this post: Does Firebase storage offer unique Id's for files?

Answer 2

When you need to use unique Id,

import { v4 as uuid } from "uuid";

const uniqueId = uuid();
const uploadTask = storage.ref(`images/${uniqueId}`).put(image); ....

You need to change its format, like below. And You can read more about it

const uploadTask = storage.ref(`images/${uniqueId}`).putString(image, "data_url");

One more thing you can do is to pass id into the child .child(id) instead of .child(image.name) because as you store the images with unique IDz.