Image Downloader – HTML, CSS, JavaScript Project

Published on June 4, 2024

Welcome back to our YouTube channel! In today’s tutorial, we’re going to learn how to create a simple image download feature using PHP, HTML, CSS, and JavaScript.

Let’s dive right into the code! Here, we have a basic HTML structure.

This is the skeleton of our webpage. We have the usual <!DOCTYPE html> declaration, followed by the opening <html> tag with the lang attribute set to “en” for English language.

Inside the <head> section, we define the character encoding with <meta charset=”UTF-8″>, which ensures proper handling of special characters.

The <title> tag sets the title of our webpage, which in this case is “Image Download in PHP”.

We’re linking an external CSS file named style.css to style our webpage. This helps us keep our HTML clean and organized.

Additionally, we’re linking the Font Awesome library to incorporate icons into our design. This library provides a wide range of icons that we can use for our project.

That wraps up the <head> section. Now let’s move on to the <body>.

Alright, now let’s take a look at the body of our HTML document.

Inside the <body>, we have a <div> element with the class “wrapper“. This acts as a container for our content.

Within the wrapper, we have another <div> with the class “preview-box“. This is where we’ll display a preview of the image before downloading.

Inside the preview box, there’s a cancel icon represented by <i class=”fas fa-times”></i>. This icon allows users to close the preview box if needed.

Next, we have a <div> with the class “img-preview”. This is where the image selected for download will be displayed.

The content div contains an icon and text prompting users to paste the image URL for download.

Lastly, we have a <form> element with the class “input-data” for user input. It contains an input field for the image URL and a submit button labelled “Download”.

CSS

Now, let’s move on to the CSS part of our project where we’ll design the user interface for our image download feature.

We’re going to explain each line of CSS code to create an attractive and functional UI for our image download page.

First, we set the background colour of the entire webpage to a soothing shade of teal using the background-colour property.

Within the wrapper class, we define the dimensions, layout, and styling for the main container of our content. This container will hold both the image preview and the input form.

Inside the wrapper, we have the preview-box class which holds the image preview area. We set its dimensions, alignment, border, and styling to create a visually appealing placeholder for the image.

The cancel-icon class positions the close icon at the top right corner of the preview box. This icon allows users to dismiss the preview if they change their mind.

The img-preview class defines the dimensions and positioning of the image preview within its container. It ensures that the image occupies the entire space while maintaining its aspect ratio.

Next, we style the icon displayed when no image is selected. We use a large font size and apply a gradient effect to make it visually appealing.

Moving on to the input-data class, we set the dimensions, layout, and styling for the input form where users can paste the image URL.

Within the input form, the field ID styles the input field for the image URL. We set its width, height, margins, borders, and transitions to make it visually consistent and interactive.

Finally, the button ID styles the download button. We define its dimensions, colours, fonts, cursor behaviour, and transitions to make it visually appealing and responsive to user interactions.

JAVASCRIPT

Now, let’s move on to the JavaScript part of our project to give functionality to our image download feature.

We’ll break down each line of JavaScript code to understand how it enhances the user experience on our webpage.

We begin by wrapping our JavaScript code inside $(document).ready() to ensure it runs after the DOM has loaded.

Next, we attach a focusout event listener to the input field with the ID “field”. This event triggers when the field loses focus, indicating that the user has finished inputting the image URL.

We retrieve the value entered in the input field and store it in the imgURL variable.

Here, we define a regular expression pattern to validate the image URL. We check if the URL ends with common image file extensions like JPEG, PNG, GIF, or BMP.

If the URL passes the validation, we dynamically create an <img> tag with the src attribute set to the image URL entered by the user.

We then append this image tag to the .img-preview div, displaying a preview of the selected image.

Additionally, we add the “imgActive” class to the preview box and the “active” class to the download button to indicate that an image has been selected.

Lastly, we attach a click event listener to the cancel icon. When clicked, it removes the image preview, resets the button and input field states, and clears the input field.

And there you have it! With this JavaScript code, we’ve added functionality to our webpage, allowing users to preview and download images with ease.

PHP

Now that we’ve added functionality with JavaScript, let’s dive into the PHP part of our project to handle the image download process.

We’ll break down each line of PHP code to understand how it facilitates the image download feature on our webpage.

We begin by checking if the download button has been clicked, indicated by the presence of the ‘downloadBtn’ key in the `$_POST` superglobal.

We retrieve the image URL from the ‘file’ input field and store it in the `$imgURL` variable.

Here, we define a regular expression pattern to validate the image URL. We check if the URL ends with common image file extensions like JPEG, PNG, GIF, or BMP.

If the URL passes the validation, we initialise a cURL session (`curl_init()`) to fetch the image from the provided URL.

We set `CURLOPT_RETURNTRANSFER` to true to instruct cURL to return the transfer as a string instead of outputting it directly.

We execute the cURL session and store the downloaded image data in the `$downloadIng Link’ variable.

Once the download is complete, we close the cURL session to free up resources.

We then set the appropriate headers to indicate that the response contains an image file. This includes the content type (`image/jpg`) and the `Content-Disposition` header to prompt the browser to download the image with the filename “image.jpg”.

Finally, we echo the downloaded image data, which triggers the download process in the user’s browser.

So, there you have it! With this PHP code, we’ve successfully implemented the image download functionality on our webpage.

In the upcoming part of this tutorial, we’ll seamlessly integrate this PHP script with our HTML and JavaScript to enhance the user experience and create a smooth image download process. Stay tuned for more exciting developments!

Our Latest Blog

Java Spring Boot

Java Spring Boot: A Comprehensive Introduction to Microservices

Introduction to Java Spring Boot and Microservices Java Spring Boot has emerged as an important...
Read More
Fundamentals of Scala Programming

Mastering the Fundamentals of Scala Programming: A Complete Guide to Functional Programming

Introduction to Scala Programming Scala programming has gained immense popularity in recent years thanks to...
Read More
Java Programming

Java Basics for Beginners: A Step-by-Step Guide to Mastering Java Programming

Introduction to Java programming Java, a versatile and extensively utilised programming language, is popular among...
Read More