public uploadFile(event): void {
// Check if the user uploaded a second photo to delete the previous one
if (this.event.main_pic) {
  this.storageService.deleteFile(this.mainPicPath);
  this.storageService.deleteFile(this.thPicPath);
}
const file = event.target.files[0];
const filePath = `events/${this.event.id}`;
const fileNameNoExtension = file.name.substring(0, file.name.lastIndexOf('.'));
const fileExtension = file.name.split('.').pop();
const fileNameUrlified = this.urlifyService.urlify(fileNameNoExtension);
const finalName = `${fileNameUrlified}.${fileExtension}`;
this.uploadingFile = true;

// Calls the function below
this.storageService.uploadFile(finalName, filePath, file, this.event.id)
.then(response => {
  // Saves the path of the two photos created in case we need to delete it
  this.mainPicPath = `/${filePath}/thumb_${finalName}`;
  this.thPicPath = `/${filePath}/smallThumb_${finalName}`;

  // Here's the two pieces of code that returns 404 not found
  this.storage.storage.ref(this.mainPicPath).getDownloadURL().then(data => {
    this.event.main_pic = data;
  })
  this.storage.storage.ref(this.thPicPath).getDownloadURL().then(data => {
    this.event.th_main_pic = data;
  })
  this.uploadingFile = false;
})
.catch(console.log);
}

public uploadFile(finalName: string, filePath: string, file: any, id: string): Promise<any> {
const storageFunctionURL = '*********/generateThumbs';
return this.storage.upload(filePath + '/' + finalName, file).then(() => {
  return this.httpClient.get(storageFunctionURL, {
    params: {
      id: id,
      filePath: filePath,
      pic_name: finalName,
      contentType: file.type
    }
  })
  .toPromise();
});
}

exports.generateThumbs = functions.https.onRequest((req, res) => {
   const bucket = admin.storage().bucket();
   const fileName = req.query.pic_name;
   const user_id = req.query.id;
   const filePath = `/${req.query.filePath}/${fileName}`;
   const tempFilePath = path.join(os.tmpdir(), fileName);
   const contentType = req.query.contentType;
   const thumbFilePath = filePath.replace(/(/)?([^/]*)$/,'$1thumb_$2');
   const smallThumbFilePath = filePath.replace(/(/)?([^/]*)$/,'$1smallThumb_$2');
   let thumbHeight: number = 172;
   let smallThumbHeight: number = 50;


   if(filePath.startsWith('/events/')){
     thumbHeight = 1200;
     smallThumbHeight = 275;
   }

   if(!contentType.startsWith('image/')){
       return null;
   }

   return bucket.file(filePath).download({
       destination: tempFilePath
   })
   .then(()=>{
       let newFileTemp = path.join(os.tmpdir(), 'niufiletemp_'+fileName);
       sharp(tempFilePath)
           .resize(thumbHeight, null)
           .toFile(newFileTemp, (err, info) => {
               return bucket.upload(newFileTemp, {
                   destination: thumbFilePath
               });
           })
   })
   .then((results) =>{
       let newFileTemp = path.join(os.tmpdir(), 'niufiletemp2_'+fileName);
       sharp(tempFilePath)
           .resize(smallThumbHeight, null)
           .toFile(newFileTemp, (err, info) => {
               return bucket.upload(newFileTemp, {
                   destination: smallThumbFilePath
               })
               .then(() => {
                    cors(req, res, () => {
                        res.status(200).send({data: "upload finished"});
                        return bucket.file(filePath).delete();
                    })
                })
           })
   })