How to get auto-generated document ID before uploading file to Firebase storage, and use that ID as a storage reference for Web?

Question

Prior to submitting a batch of writes to the Firestore using an automatically generated ID from the Firestore, I have a method that will upload an image file to Firebase storage. Before uploading the documents to Firestore, the code is developed to wait for the file to be uploaded to obtain the download URL.

However, I want to use the Firestore document's auto-generated ID as the storage reference.

Here is my code:

 try {
  // To replace "organization.uid" with the auto-generated id by Firestore "organization_doc_ref.id".
  const storageRef = ref(this.storage, `organizations/${organization.uid}`);
  await uploadBytes(storageRef, blob).then(() => {
    console.info('Uploaded a blob or file!');
  });
  organization.logo_url = await getDownloadURL(storageRef);

  const batch = writeBatch(this.firestore);
  const organization_doc_ref = doc(
    collection(this.firestore, 'organizations')
  );
  batch.set(organization_doc_ref, organization);
  const usernameDocRef = doc(
    this.firestore,
    'usernames',
    organization.username
  );
  batch.set(usernameDocRef, { uid: organization_doc_ref.id });

  await batch.commit();
  console.log('Organization successfully created...');
} catch (error) {
  return console.error('Error writing document: ', error);
}

Answer 1

You just need to reorder your instructions so that the document reference is defined first. The document's ID will be generated locally and it won't interact with your server until you call batch.commit() .

try {
  const organization_doc_ref = doc(
    collection(this.firestore, 'organizations')
  );

  const storageRef = ref(this.storage, `organizations/${organization_doc_ref.id}`);
  await uploadBytes(storageRef, blob);
  console.info('Uploaded a blob or file!'); // avoid putting this in then() if using await
  organization.logo_url = await getDownloadURL(storageRef);

  const batch = writeBatch(this.firestore);
  batch.set(organization_doc_ref, organization);
  const usernameDocRef = doc(
    this.firestore,
    'usernames',
    organization.username
  );
  batch.set(usernameDocRef, { uid: organization_doc_ref.id }); // avoid using uid as it is often linked with the current Firebase Auth user's ID, use imgId, orgId or something similar

  await batch.commit();
  console.log('Organization successfully created...');
} catch (error) {
  return console.error('Error writing document: ', error);
}