How to Create a File Uploader with HTML, CSS, JavaScript & PHP

Published on June 20, 2024

Hello everyone, and welcome back to our YouTube channel. Today, we’re diving into the world of web development, specifically focusing on creating a simple file upload feature using HTML, CSS, and JavaScript. By the end of this tutorial, you’ll have a good grasp of how to implement file uploading functionality into your web projects.

Let’s start by breaking down the HTML structure of our project. As you can see, we have a basic HTML file with the necessary elements to create our file uploader. We have a header section labelled “File Uploader“, a form element, and two sections: one for displaying the upload progress and another for displaying uploaded files.

The form element contains an input field of type file, which is hidden from view. This input field will be used to select files from the user’s device. We also have an icon and a paragraph prompting the user to browse for files to upload.

Now, let’s move on to the CSS styling. We’ve applied some basic styling to our elements to give our file uploader a clean and modern look. We’ve set the background colour, border radius, and box shadow to make the uploader visually appealing.

We have several CSS classes such as .wrapper, .progress-area, and .uploaded-area, each responsible for styling different sections of our file uploader. These classes help organise our CSS code and make it more manageable.

You may have noticed that we’re using Font Awesome icons to enhance the visual experience. We’ve included the Font Awesome library via a CDN link, allowing us to easily incorporate icons like the upload icon and checkmark icon throughout our project.

Lastly, we have a script tag at the bottom of our HTML file linking to a JavaScript file called script.js. In this JavaScript file, we’ll write the logic to handle file uploads and display upload progress.

CSS

Let’s move on to the CSS part to design our file uploader. In this video, we’ll be delving into the styling aspects using CSS to enhance the appearance of our file upload feature. By the end of this tutorial, you’ll have a visually appealing file uploader ready to integrate with your web projects.

First off, we’re importing the Google font Poppins to give our text a modern and sleek look. This font import ensures consistency and readability throughout our project.

We’re setting some global styles to ensure a consistent layout across different browsers. This includes resetting margins, paddings, and ensuring the box model behaves as expected. Additionally, we’re specifying “Poppins” as our default font family for the entire project.

Moving on to the body styling, we’re using flexbox properties to centre our content vertically and horizontally within the viewport. This ensures that our file uploader is nicely centred on the screen regardless of the device’s dimensions.

We’ve customised the text selection styling to maintain consistency with our colour scheme. When users select text within our file uploader, it will have a white text colour with a background colour matching our primary theme colour.

The wrapper class styles our main container for the file uploader. It sets the width, background colour, border radius, padding, and box shadow to give it a clean and polished appearance.

Within the wrapper, we have a header section labelled “File Uploader.” We’ve styled this header with a specific colour, font size, and font weight to make it stand out as the title of our uploader.

Moving to the form styling, we’re customising the appearance of our file upload area. We’ve set the height, border, cursor, and border radius to create a visually distinct area where users can drop their files or click to browse for files.

Inside the form, we have an icon and a paragraph prompting users to browse for files. We’ve styled these elements with specific colours, font sizes, and margins to make them visually appealing and intuitive for users.

We have sections for displaying upload progress and uploaded files. These sections are styled with background colours, padding, border radius, and list-style properties to provide a clear visual separation and structure.

The progress area displays upload progress with a progress bar. We’ve styled the progress bar with appropriate colours and dimensions to indicate the current upload status visually.

Finally, the uploaded area displays successfully uploaded files. We’ve styled this area to allow scrolling if there are many files and customised the appearance of file details for better readability.

JAVASCRIPT

Let’s move on to the JavaScript part to give functionality to our file uploader. In this video, we’ll be diving into the JavaScript code to enable users to upload files and track the upload progress. By the end of this tutorial, you’ll understand how to implement file uploading functionality using JavaScript, enhancing the user experience of your web projects.

We start by setting up event listeners to handle user interactions. We select the form element and the file input field from our HTML document using querySelector. Then, we add an event listener to the form, so when it’s clicked, it triggers a click event on the file input, allowing users to select files.

Next, we define the behaviour when a file is selected using the file input field. When a file is chosen, we extract its name and check if it exceeds 12 characters. If it does, we truncate the name and append an ellipsis to maintain readability.

The uploadFile function is responsible for handling the file upload process. We create a new XMLHttpRequest object to handle the HTTP request. We set the method to POST and specify the URL to which the request will be sent, which in this case is “php/upload.php“.

We add an event listener to track the upload progress. As the file uploads, this event listener updates the progress bar dynamically, displaying the percentage of the file uploaded. We calculate the file size in kilobytes or megabytes and update the UI accordingly.

We dynamically update the HTML content within the progressArea element to display the upload progress. Once the file upload is complete, we replace the progress information with a confirmation message indicating that the file has been successfully uploaded.

We create a new FormData object, passing the form element as an argument. This object collects all the form data, including the selected file, to be sent with the HTTP request.

Finally, we send the form data using the send method of the XMLHttpRequest object, initiating the file upload process.

That wraps up the JavaScript code for our file uploader. In the next part of this tutorial, we’ll dive into the PHP backend to handle the uploaded files and store them on the server. Stay tuned for the next video where we’ll complete our file upload feature! If you found this video helpful, don’t forget to like, share, and subscribe for more web development tutorials. Thanks for watching, and I’ll see you in the next one!