Axios post .then functionality triggers in Chrome but not in Firefox/Safari etc

I am returning a CSV download from my server like so:

    $headers = ['Content-Type' => 'application/csv'];
    return response()->download($filepath, $filename, $headers)->deleteFileAfterSend(true);

This is actually working and downloading to the browser like I want.

The problem is that I am trying to change a class on a button from a download icon to a spinning icon and back to the original download icon once the response from the back-end has returned successfully – I am attempting this in my .then function in vue:

The icon within a button with said class I am trying to affect, in the <template> section of my Vue:

<button @click="formSubmit($event)"<i id="loadSpinner" class='zmdi zmdi-download' :class="spin"></i></button>

Vue data attribute bound to “spin” variable which holds the class name:

    export default {
            data() {
                return {
                    spin: ''
                    selected: ''
                }
             }

Methods containing the formSubmit method and subsequent logic:

formSubmit(e) {

                let currentObj = this;

                currentObj.spin = 'zmdi zmdi-rotate-right zmdi-hc-spin';

                if(this.selected.length > 0){ 

                axios.post('/commercial', {
                    responseType: 'blob',
                    ratecard: currentObj.selected

                }).then(function (response) {
                    currentObj.spin = 'zmdi zmdi-download';
                    console.log(response);

                }).catch(function (error) {
                    currentObj.output = error;
                    console.log(currentObj.output);
                });

            }else {
                currentObj.spin = 'zmdi zmdi-download';

                swal({
                    type: 'error',
                    title: 'Oops...',
                    text: 'Please select an account reference'
                });
                e.preventDefault(); //to prevent white-page issue and page refresh
            }
        }

The response is a blob – so the selected value is sent through fine and response is fine in terms of desired functionality i.e. return a CSV download to the users browser. However, where I am trying to change the ‘spin’ class this only seems to work in Chrome – even then, the console.log(response.data) does not appear in my console even in Chrome – it’s as if this function is partially entered (if that’s even a thing) or not entered at all as is seemingly the case with Firefox/Safari.

The initial class change to the ‘spin’ icon works – it’s the change back that does not work.

I have tried pure javascript attempt also using document.getElementsbyID and attempting to affect the class using .className attribute directly and the same can be said using JQuery

If anybody can point me in the right direction that would be much appreciated – I am on hand to provide further information if required.

I can’t figure out/isolate if this is a browser specific issue or an issue with Vue/Laravel.

Thanks.

Answer

Problem with this was how the request/response cycle was being caught in the front-end. Had to use a npm JS package that handled response and downloaded files on the front-end called JS FileDownloader in order for the files to be “seen” as downloaded and the proceeding JS scripts/CSS styling etc to kick-in after.

Advertisement

Answer