How to download image using vue js and laravel

Question

I have a hyperlink button on click of this, i want to fetch image from database and get it downloaded on user side with use of laravel and vue js. Below is my code for script file

 getImage: function() {
            axios.get('/getImage/' + this.form.cashout_id )
            .then(function (r) 
                {
                const url = window.URL.createObjectURL(new Blob([r.data]));
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download', 'file.'+r.headers.ext); //or any other extension
                document.body.appendChild(link);
                link.click();

                //hide loader
                i.loader = false
            })
            .catch(function (error) {
                        alert('Error');
            });
        },

and now this is my controller code where image is being fetched.

public function getimage($id)
   { 
       $cashout = CashOutDetail::findorfail($id);
       $storage_date = Carbon::parse($cashout['recorded_date']);

       return response()->download(
           storage_path('app/cashoutdetails/'. $storage_date->year .'/' . $storage_date->format('M') . '/'.  $cashout->bank_receipt),
           'filename.jpg',
           ['Content-Type' => 'image/jpg']
       );
   }

Issue is that my image is being fetched and displayed in console window but unable to download. Can anybody help?

Can you verify that link successfully build. console.log(link) — xuma
– xuma, Commented Dec 26, 2021 at 20:33
does a download link work to your file, without the JS? <a href="/getImage/{cahshout_id}" download="proposed_file_name">Download</a> — Bernard Wiesner
– Bernard Wiesner, Commented Dec 26, 2021 at 23:58
You might be able to determine the URL of the file in your Vue/JS code if you already have the cashout.recorded_date. I am not sure what the best practices are but it will eliminate the HTTP request and probably be easier to render the download button/link — Producdevity
– Producdevity, Commented Dec 27, 2021 at 1:19
@xuma Yes. link is being build. but it comes as undefined and image which is being downloaded also comes as invalid file. <a href="blob:localhost:81-46e3-ba21-1eca8430c4e9" download="file.undefined"> — Coder
– Coder, Commented Dec 27, 2021 at 6:08
@BernardWiesner yes download link is working but the file which is downloaded shows invalid file due to extension — Coder
– Coder, Commented Dec 27, 2021 at 6:10

TheLimonazo · Accepted Answer · 2021-12-27 01:11:32Z

1

You should try:

axios({
    method: 'GET',
    url: '/getImage/123.jpg',
    responseType: 'blob', // <-<<<<<<<<<< 
  }).then((response) => {
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', '123.jpg');
    document.body.appendChild(link);
    link.click();
  });

answered Dec 27, 2021 at 1:11

TheLimonazo

2,07819 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Coder Over a year ago

Thankyou !! It worked . All i needed to change 123.jpg with my cashout id parameter.

Collectives™ on Stack Overflow

How to download image using vue js and laravel

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related