[Vuejs]-Async upload multiple files and getting their urls in firebase storage problem

Ok so i figured it out 2 hours after posting the question, but forgot to check for any possible answer. So the deal here is there is a big load of async functions happening here. So the best thing for me was to create the sort of chain of functions. First do the saveFiles, then uploadImage and then Save. One possible warkaround was in uploadImage function, where i pick the cropper’s content and turn it into blob so i could upload it to storage, there i could call async and await for blob to finish uploading so i could take the url of image accordingly. I will post the edited code that works and does what i want.

    async saveFiles(){
      if(!this.files){
        this.uploadImageFile()
        return
      }else {
        let slugify = require("slugify")
        for (const fileIndex in this.files) {
          let timestamp = new Date()
          let fileObject = this.files[fileIndex]
          let ext = fileObject.name.split(".")[1]
          let fileNameName = slugify(fileObject.name.split(".")[0]) + "-" + 
    timestamp.getTime().toString() + "." + ext
          try {
            let uploadTask = storageRef.child('blogs/' + fileNameName)
            await uploadTask.put(fileObject)
            let downloadURL = await uploadTask.getDownloadURL()
            this.blog.files.push({
              fileName: fileNameName,
              fileURL: downloadURL
            })
          } catch (error) {
            console.log(error)
          }
        }
        //here we call the uploadImageFile
        this.uploadImageFile() 
      }
    },
    //then we have the uploadImageFile func
    uploadImageFile() {
      var slugify = require('slugify')
      let imageName = this.$refs.image.files[0].name.split(".")[0]
      let ext = this.$refs.image.files[0]['name'].split(".")[1]
      this.blog.image = slugify(imageName)+"-"+moment().unix() + "." + ext
      const {canvas} = this.$refs.cropper.getResult();
      if (canvas) {
        canvas.toBlob(blob => {
          let uploadTask = storageRef.child('blogs/' + this.blog.image ).put(blob)
          uploadTask.on('state_changed',
              (snapshot) => {
                switch (snapshot.state) {
                  case firebase.storage.TaskState.PAUSED: // or 'paused'
                    break;
                  case firebase.storage.TaskState.RUNNING: // or 'running'
                    break;
                }
              },
              (error) => {
                console.log(error);
              },
              () => {
                this.save(uploadTask)
              }
          );
        }, 'image/jpeg');
      }
      this.save()
    },
    //then we have the save
    save(uploadTask){
      let task = uploadTask.snapshot.ref.getDownloadURL();
      task.then((url)=> {
        this.blog.imageUrl = url
        let slugify = require("slugify")
        this.blog.slug = slugify(this.blog.title)
        this.blog.user = usersCollection.doc(this.$store.state.userProfile.uid)
        this.blog.active = false
        this.blog.created = firebase.firestore.Timestamp.fromDate(new Date())
        this.blog.type = this.selected
        blogsCollection.add(this.blog).then(() => {
          router.push('/admin/blogs');
        }).catch((error) => {
          console.error("Error adding document: ", error);
        });
      })
    }

Now this block of functions is doing what i intended. Upload file then take the download url of that file. Previous code was executing and didn’t wait for urls because there was to much things happening at the same time, and it dind’t wait for url responses. Cheers!