Firebase Storage Multiple photo Upload Issue

Question

I'm trying to upload multiple photos to my Firebase Storage. For some reason it keeps overwriting the original upload, and it's not creating the folder with the venueID property. Can anybody shine a light here?

main.ts

async localPictureUpload(): Promise<any> {
    // Checks if there is something to be uploaded.
    if (this.photosToUpload.length > 0) {
        const location = `venues/photos/${this.venueID}/`;
        // photosToUpload is an array containing base64 strings.
        this.photosToUpload.forEach(async photoElement => {
            const randomID = this.venueService.createID();
            await this.uploadService.uploadFile(photoElement, location, true)
                .then(async data => {
                    const urlData = await data.ref.getDownloadURL();
                    const photoObject: Photo = {
                        fileName: `${this.venueID}${randomID}`,
                        url: urlData,
                        uploadedBy: this.currentUserID
                    };
                    await this.venueService.addPhoto(this.venueID, photoObject);
                },
                (err) => console.error(err));
        });
    } else {
        return;
    }
}

upload.service

uploadFile(file: any, path: string, base64?: boolean) {
    if (base64) {
        return this.uploadDB.ref(path).putString(file, 'data_url');
    } else {
        return this.uploadDB.upload(path, file);
    }
}

At first glance the code for setting the path looks fine. Can you try: 1) Adding console.log(path); right before this.uploadDB.ref(path).putString(file, 'data_url') and showing the output? 2) Replacing the complex code with a simpler hard-coded path with / in it, to see if that works. After doing these, please edit your question to show the updated (hopefully simpler) result and output. — Frank van Puffelen
– Frank van Puffelen, Commented Mar 12, 2020 at 13:36
Hey @FrankvanPuffelen this is what I get on the path console.log venues/photos/0WiFtVRvPj63GlEAqsEF/ that seems ok right? In theory the last part should be the folder (which has the record id) and the file should be added right after, correct? — MrRobot
– MrRobot, Commented Mar 12, 2020 at 13:48

JS Lover · Accepted Answer · 2020-03-12 13:54:14Z

2

The problem is that all the pictures share the same location inside the firesotrage bucket. Because you setup the location path before the forEach.

This code below should create venues/photos/venueID/yourPictures

  // Checks if there is something to be uploaded.
  if (this.photosToUpload.length > 0) {
    // photosToUpload is an array containing base64 strings.
    this.photosToUpload.forEach(async photoElement => {
      const randomID = this.venueService.createID();
      const location = `venues/photos/${this.venueID}/${randomID}/`;
      // const location = `venues/photos/${this.venueID}/`; <---- The problem 
      //  const randomID = this.venueService.createID(); 
      await this.uploadService.uploadFile(photoElement, location, true)
        .then(async data => {
            const urlData = await data.ref.getDownloadURL();
            const photoObject: Photo = {
              fileName: `${this.venueID}${randomID}`,
              url: urlData,
              uploadedBy: this.currentUserID
            };
            await this.venueService.addPhoto(this.venueID, photoObject);
          },
          (err) => console.error(err));
    });
  } else {
    return;
  }
}

edited Mar 12, 2020 at 13:54

answered Mar 12, 2020 at 13:38

JS Lover

6226 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MrRobot Over a year ago

Hey thanks, but the problem is that I need to generate a random id for each picture that's being uploaded. If I leave it outside the foreach it will repeat that value for every record.

Collectives™ on Stack Overflow

Firebase Storage Multiple photo Upload Issue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related