Firebase Image Resizer url only works after submitting same image twice or creating token

Question

Within my website at the moment, I have a user upload a profile picture. This profile picture gets uploaded to storage, and i then run .getDownloadURL() to download the url, and link to it from within my website.

All works nicely.

I have since decided to use the Image Resizer, to resize my image to 100x100 to use as a thumbnail (keeping the original to use elsewhere).

The issue is, I get an error uncaught exception: [object Object] upon request the downloadURL for the resized image.

However, here is the odd thing. If I re-upload the same image, it works, and everything goes fine.

I have a suspicion it is due to no access token being auto-created the first time, but it does the second time. I am not sure how to make sure it gets created the first time (considering, the original image is having it done, but the resized is not)

fileUpload (event) {
  console.log('user id 1 - ' + this.$store.getters.userInfo.user_id)
  // get
  var file = event.target.files[0]
  // ref
  var storageRef = firebase.storage().ref('User_Avatars/' + this.$store.getters.userInfo.user_id + '/' + file.name)
  this.fileRef = this.$store.getters.userInfo.user_id + '/' + file.name
  // upload
  var task = storageRef.put(file)
  // update prog
  task.on(
    'state_changed',
    snapshot => {
      this.fileValue =
        (snapshot.bytesTransferred / snapshot.totalBytes) * 100
    }, error => {
      // eslint-disable-next-line no-console
      console.log(error.message)
    }, () => {
      firebase.storage()
        .ref('User_Avatars/' + this.$store.getters.userInfo.user_id + '/' + file.name).getDownloadURL()
        .then((url) => {
          this.userAvatar = url
          // eslint-disable-next-line no-console
          console.log('Getting full Image ' + this.userAvatar)
        })
        .then(() => {
          this.createThumbnail(file)
          console.log('1')
        })
    })
},

createThumbnail (file) {
  const filename = file.name
  const thumbnailDimensions = '_100x100'
  const fileEx = filename.split('.').pop()
  const fileThumb = filename.replace('.' + fileEx, thumbnailDimensions + '.' + fileEx)

  this.thumbFileRef = fileThumb
  const ref = this.thumbFileRef
  console.log('grabbing ref -' + ref)
  firebase.storage()
    .ref('User_Avatars/' + this.$store.getters.userInfo.user_id + '/' + ref).getDownloadURL()
    .then((url) => {
      this.avatarThumbURL = url
      // eslint-disable-next-line no-console
      console.log('Getting Image thumbnail ' + this.avatarThumbURL)
    })
},

I understand that the thumbnail is created through the Extension. Are you sure that the thumbnail file is already existing when you call `this.createThumbnail()`? Firebase Extensions are based on Cloud Function, and it may take several seconds before the Cloud Function underlying the Extension is executed. — Renaud Tarnec, Mar 08 '20 at 14:03
Yeah I did test that, but even now (2 days later) it still has the same issue. It does somewhat seem to be tied to the "Token Access" not being generated the first time/automatically. — KJParker, Mar 09 '20 at 09:27
@Somebody nope not yet, apparently Firebase are working on a fix/way to do this. — KJParker, Apr 05 '20 at 21:23
@KJParker I found a solution here https://stackoverflow.com/questions/59072882/cloud-functions-resized-images-not-loading/61023298#61023298 — Somebody, Apr 05 '20 at 22:57

Firebase Image Resizer url only works after submitting same image twice or creating token

0 Answers0