Dev.to Article Photo Resize / Storage.js

action-template.js

  async yourRetryAction({ commit, dispatch }, { retry = 1 }) {
        // Define how many retries are possible
        const maxRetries = 10
        // Define waiting time
        const waitingTime = 800
        // Custom Sleep Function
        const sleep = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds))

        if (retry >= maxRetries) {  
            // Should add a error handler or logger here
            return null
        }

        try {
              // ADD LOGIC HERE THAT SHOULD BE RETRIED - you need to throw an error if anything fails
              const actionA = await yourAsyncRequest()
              const actionB = await actionA.anotherRequest()
              return actionB.result
        } catch (error) {
            retry++
            // wait a bit until the resized images might be available
            await sleep(waitingTime)
            return dispatch('yourRetryAction', { retry })
        }
    },

storage.js

const sleep = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds))

  async tryGettingResizedDownloadUrl({ commit, dispatch }, { url, size = 'lg', retry = 1 }) {
        const config = this.$config.uploadResize
        const resizeSuffix = config[size].size
        const maxRetries = 5
        const fileRef = this.$fire.storage.refFromURL(url)
        const parentFolderRef = fileRef.parent

        if (retry >= maxRetries) {
            this.$sentry.captureException(
                new Error('Could not find resized file. Max retries reached.', parentFolderRef)
            )
            return null
        }

        try {
            const listOfFiles = await parentFolderRef.listAll()
            const resizedFileRef = listOfFiles.items.find((item) => {
                return item.name.includes(resizeSuffix)
            })

            const resizedFileUrl = await resizedFileRef.getDownloadURL()
            return resizedFileUrl
        } catch (error) {
            retry++
            // wait a bit until the resized images might be available
            await sleep(800)
            return dispatch('tryGettingResizedDownloadUrl', { url, size, retry })
        }
    },

UploaderComponent.js

   methods: {
        async uploadProfileImage(file) {
            this.isLoading = true

            const fileManager = new FileManager(file)
            const extension = fileManager.getFileExtension()
            const filename = `${this.profileImageFilename}.${extension}`
            const path = this.userProfilePicturePath

            try {
                const fullImageUrl = await this.$store.dispatch('storage/uploadFile', { file, path, filename })
                this.loadingAction = 'resize'
                const resizedUrl = await this.$store.dispatch('storage/tryGettingResizedDownloadUrl', {
                    url: fullImageUrl,
                    size: 'lg',
                })

                const url = resizedUrl || fullImageUrl
                await this.$store.dispatch('user/setProfilePicture', { url })
                this.isLoading = false
            } catch (err) {
                this.isLoading = false
                this.loadingAction = 'upload'
                this.$toast.error(this.$i18n.t('account.photoUploadError'))
                this.$sentry.captureException(err)
            }
        },

// ... your implementation

}