3

first time jumping into the Firebase extensions and felt Image Resizer was a good one to use for my needs.

However, the documentation on using it is a little thing and leaving me a bit stuck.

Currently, I upload the image, it auto generates the new dimension and saves them to my desired path. However, I am unable to figure out how to call the now resized image.

I am currently storing the uploaded image with a path like so;

      var storageRef = firebase.storage().ref("Project_Image/" + this.projectName + "/" + file.name);

and then getting the original photo as a url using a reference like so;

firebase.storage()
  .ref("Project_Image/" + this.projectName + "/" + file.name).getDownloadURL()
  .then((url) => {
    this.imageURL = url;
    // eslint-disable-next-line no-console
    console.log("Getting Image " + this.imageURL);
  })

This works, but the problem is I am unable to reference the newly created 600x300 resized image. Now called imagename_600x300.jpeg.

I tried using 

.ref("Project_Image/" + this.projectName + "/" + file.name + "_600x300")

but obviously, that grabs "imagename.jpeg_600x300" and, therefor returns an error/undefined.

I am not sure if there is a better way to initially store these files that would help with retrieving, or if there is an obvious answer.

thanks!

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
KJParker
  • 710
  • 2
  • 9
  • 26
  • You will have to change your code to put the "_600x300" string before the ".jpeg". This is going to involve parsing the contents of `file.name` to reconstruct the new string with the correct file name. – Doug Stevenson Jan 24 '20 at 16:02

1 Answers1

1

It sounds like you need to strip off the extension and put it after the prefix. Something like this should work:

function resizedName(fileName, dimensions = '600x300') {
  const extIndex = fileName.lastIndexOf('.');
  const ext = fileName.substring(extIndex);
  return `${fileName.substring(0, extIndex)}_${dimensions}${ext}`;
}
Michael Bleigh
  • 25,334
  • 2
  • 79
  • 85