Programmatic download cross-site images embedded on your page

POSTED ON 28, Aug 2018 By John

Problem

We recently released a mobile app RigMove to capture timestamped photos for accountability purposes during rig moves. I was in need of a quick solution for clients to download hundreds of images of an asset on their web portal from Google's Firestore storage. Those images had been captured using their mobile app on which we had implented a way for them to download images for their personal offline storage if they choose.  The online client portal is implented using Laravel 5.6 and  VueJS. Latest Chrome and Safari seems not to support download attribute on links and therefore the only option for them was to right click and save as... each and every image. So, I went ahead and implement a quick and dirty solution for them to download all the photos in the current page from Firestore storage.  

 

Solution

 

Select "yes" if our browser prompt you if you want to allow download of multiple files.

Let me know if you have a better implementation or a way to improve this solution.

About John

John is a co-founder and a lead developer at A&M Digital Technologies. He is a tech enthusiast who has a vast experience with server and client side web applications development. Favorite languages include PHP, JavaScript and Python. Frameworks include Laravel, CodeIgnitor, Ionic and Flask. Website https://johnmuchiri.com

Comments