Bayesean Blog - Desktop, Mobile and IOT Developer Blog


PHP File Downloader from a Inbox Selection

Posted on 15th Mar 2017 in Bootstrap 4, CSS


countdowndownloader.gif 

This is an update of the original blog updated from bootstrap 3 to use bootstrap 4 .The viewer has been removed and replaced with the above gif.

 

Project Scope

  • Must not show the download button immediately to prevent non-human downloading.
  • Must keep the user knowledgeable as to what is happening by adding a count-down timer linked to a progress bar.
  • Must flow automatically.
  • Must immediately download the file that was selected on the click of the button that became visible after completion of the progress bar.

Coding Difficulty

Medium. Good knowledge of Javascript/Ajax and PHP required would help.

Libraries

Bootstrap 4 Framework –download  here.

PHP 5.6 +   download  here .

Downloader.php  -  A PHP Library (A  free to use file download library created by Jack Mason )

This is included in the included Download below.

JQuery – download from here or visit the website http://jquery.com.

Javascript.

 

Structure

 dnldstructure.png

Index.php

This file contains the visual element of a drop down box to select the file to download.

Download2.php

This file contains the visual download progress bar and button to download the file.

Downloader1.php

This file is called by the download button and processes the file to download.

Downloader.php

This holds all the mime information and allows any type of file to be downloaded.

Code

To show and hide classes, the class “hidden” is no longer for bootstrap 4. This is replaced with class = ”d-none” to perform the same functionality.

The main action in the blog is within the interval of the JavaScript code. The Javascript countdown timer immediately starts and sets the width of the progress bar. The counter has variables to calculate the progress of the timer.

Setinterval() calls function progressbar() every  ‘100 milliseconds’  set by the var ‘stepdelay’  until completed. This is set to run for the  var ‘dcount’ times.  The var ’width’ is set to 0 because we require the progressbar to finish at 0.

 

The function progressbar() determines when the  image download  and button must become visible.

We use the  document.getElementById  to change the different messages in the progress bar. 

Herewith is a snippet of the main JavaScript function that controls the progress bar’s progress.

You can download the full code for the project at the end of the blog

 


              

 

 

License

Licence is MIT.

 

 Download the code from the GITHUB repository.

 

Download Code


Dan      Commented   2 years ago Reply

Hi, helpful tutorial. Set me in the right direction. What about a countdown in seconds. Your does not seem to work with real time.

admin      Replied    Moderator   2 years agoReply


Yes you are correct. It was designed to delay the download with a count down. Herewith is some code for a 20 second countdown with integrated Bootstrap progress- bar... <pre> <div class = "hidden" id="countdown"> </div> <script type="text/javascript">  window.onload = function() { var countdownElement = document.getElementById('countdown'), seconds = 20, second = 0, interval; interval = setInterval(function() { var varinfo =''; countdownElement.firstChild.data = 'You can start your download in ' + (seconds - second) + ' seconds'; varinfo = 'You can start your download in ' + (seconds - second) + ' seconds'; width = (100 /seconds) *(seconds -(seconds-second)); document.getElementById("progress-bar").style.width=width+"%"; document.getElementById("progress-bar").innerHTML =varinfo ; if (second >= seconds) { $("#myId").removeClass("hidden"); $("#myimg").removeClass("hidden"); var varinfo2 = " Click Download Button to Download the File"; document.getElementById("progress-bar").innerHTML =varinfo2; clearinterval(Id); clearInterval(interval); } second++; }, 1000); } </script> </pre>

admin      Replied    Moderator   2 years agoReply


The code is not easily readable - copy and paste in your editor and it should clean up. I will create a small blog on this and provide the full code for download as I am sure others would like to know how to do this.

Add a Comment

9+5

Recent News

Delphi Delimited String to Fields
Delphi A Professional VCL DBGrid Part Four
Delphi A Professional VCL DBGrid Part Three
Delphi A Professional VCL DBGrid Part Two
Delphi A Professional VCL DBGrid Part One
Delphi VCL Buttons in DBGrid
Two Helper Apps for Delphi LibUSB
Delphi Libusb Library Introduction

Categories

Bootstrap 4
Delphi VCL
Delphi FMX
Ajax
Bootstrap 3
CSS
XE4>Delphi > XE4
Delphi < XE4
PHP

Archives

August 2019

Delphi Delimited String to Fields

June 2019

Delphi A Professional VCL DBGrid Part Four

May 2019

Delphi A Professional VCL DBGrid Part Three

April 2019

Delphi A Professional VCL DBGrid Part Two

March 2019

Delphi A Professional VCL DBGrid Part One

November 2018

Delphi VCL Buttons in DBGrid

October 2018

Two Helper Apps for Delphi LibUSB

September 2018

Delphi Libusb Library Introduction

August 2018

Delphi Object directly to a Json string in a REST Client
Delphi using Environment Variables in your App

July 2018

Delphi FMX Leaflet Plotter using OSM Maps

June 2018

C2PAS32 Convertor Application
C to Delphi Open Source Convertors Shootout
Delphi command-line programs with DOSCommand

May 2018

Delphi PDF Embedded viewer with PDF.js

March 2018

Delphi FMX - Changing TCharacter to TCharHelper
Make Your Delphi App POP using Javascript!

January 2018

Delphi FMX Dashboard using Chart.JS
Delphi FMX Form Docking

December 2017

PHP Slim REST Server & Delphi Auth Part 5

November 2017

Delphi FMX REST Client App Part 4

October 2017

Delphi VCL REST Pricing Client App Part 3

September 2017

Delphi REST VCL Client Basic Auth Part 2B

August 2017

Delphi REST Client Part 2A
PHP PDO REST Server Part 1

July 2017

PHP REST Server and Delphi Client Intro

June 2017

Delphi SQLite Encryptor-Decryptor Tool
Updating Applications Manifest using Delphi

May 2017

Create a Visual IP Address Geolocation with PHP

March 2017

PHP Downloader using Countdown timer
PHP File Downloader from a Inbox Selection

February 2017

Javascript Image-File Uploader with ThumbViewer

January 2017

Morris Charts and PHP-PDO

December 2016

CSS to create a functional Toggle Button