Laravel Inertia using InertiaProgress with Axios returns: Cannot read property 'defaultPrevented' of undefined

Question

I am using current versions of Laravel & Inertia.js. I am also using IntertiaProgress and looking to use it during a file upload using axios

The files all upload OK but the console shows:

app.js:33316 Uncaught (in promise) TypeError: Cannot read property 'defaultPrevented' of undefined

Tracing this back it points to here in the source of InertiaProgress:

 start(event) {
    Promise.resolve().then(() => {
      if (event.defaultPrevented) {
        return
      }

      this.inProgress++
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        Nprogress.set(0)
        Nprogress.start()
      }, this.delay)
    })
  },

If I console.log(event) I get undefined

My upload() method:

upload(files) {
    let url = this.$route('library.upload');
    this.$root.showLoading = true;

    const uploadConfig = {
        timeout: 10000,
        onUploadProgress: function(progressEvent) {
            let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
            InertiaProgress.progress(percentCompleted)
        }
    }

    InertiaProgress.start()

    axios.post(url, {
        files,
    },
        uploadConfig
    ).then(res => {
        let files = res.data.files
        if (files.length) {
            this.filesList = cloneDeep(files)
        }

        this.newFiles = []

        InertiaProgress.finish()
        this.$root.showLoading = false
    }).catch(err => {
        console.log(err)

        InertiaProgress.finish()
        this.$root.showLoading = false
    })
},

Any help is appreciated

Answer 1

You could use NProgress directly.

Instead of:

InertiaProgress.progress(percentCompleted)

Like this:

NProgress.progress(percentCompleted)

See also: https://inertiajs.com/progress-indicators