Creating an Avatar File Upload Selector and Preview using HTML, CSS, and JS Tutorial

Submitted by oretnom23 on Friday, March 24, 2023 - 16:34.

In this tutorial, you can learn to create an Avatar File Upload Selector and Preview component for web applications using HTML, CSS, and JavaScript. The tutorial aims to provide students and beginners with a reference for learning to build useful website components. Here, I will be providing a simple web page script that demonstrates the creation of an Avatar File Upload Selector and Preview Component.

What is an Avatar File Upload Selector and Preview?

The Avatar File Upload Selector and Preview are of common components in websites or web applications nowadays. It is often used in social networking sites, CMS (Content Management Systems), and mobile apps. This component is an avatar viewer that comes with an option or feature to select a new image to upload and display the selected image on the preview container.

How to create an Avatar File Upload Selector and Preview?

The Avatar File Upload Selector and Preview can be easily achieved or built using HTML elements, CSS codes, and JavaScript built-in events and methods. To create an Avatar File Upload, we will be needing multiple HTML elements that will be used as Preview wrapper/container, Image input file field, and other related containers and wrappers. We can design the Avatar Preview and Selector using CSS codes to our desired looks for the component. Then, using some JS event listeners such as click and change we can detect and trigger the changes of the avatar selected. Check out the web page scripts that I created below to understand more about how it being done.

Sample Web Page Scripts

The scripts below result in a simple web page that contains the Avatar File Upload Selector and Preview Container. The user can simply browse the new avatar to upload by clicking the camera icon located at the button-right side of the Avatar Preview Wrapper/Container.

Page Interface

The script below is the HTML file script named index.html. It contains the page layout and other elements that are needed for this demonstration. Make sure to replace the default image and camera icon paths with the paths that are available on your end.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>JS - HTML CSS Avatar File Upload</title>
  8.     <link rel="preconnect" href="https://fonts.googleapis.com">
  9.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  10.     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
  11.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  12.     <link rel="stylesheet" href="style.css">
  13.     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  14. </head>
  15. <body>
  16.     <div class="content-md-lg py-3">
  17.         <div class="col-lg-6 col-md-10 col-sm-12 col-12 mx-auto">
  18.             <div class="page-title">Creating an Avatar File Upload using HTML and CSS</div>
  19.         </div>
  20.         <hr style="margin:auto; width:25px" class="border-light opacity-100">
  21.         <div class="container-lg">
  22.             <div class="row py-3">
  23.                 <div class="col-lg-4 col-md-5 col-sm-10 col-12 mx-auto">
  24.                     <div class="card bg-dark rounded-0 border-dark-subtle">
  25.                         <div class="card-body rounded-0">
  26.                             <!-- Avatar File Input Wrapper  -->
  27.                                 <div id="AvatarFileUpload">
  28.                                     <!-- Image Preview Wrapper -->
  29.                                     <div class="selected-image-holder">
  30.                                         <img src="default-avatar.png" alt="AvatarInput">
  31.                                     </div>
  32.                                     <!-- Image Preview Wrapper -->
  33.                                     <!-- Browse Image to Upload Wrapper -->
  34.                                     <div class="avatar-selector">
  35.                                         <a href="#" class="avatar-selector-btn">
  36.                                             <img src="camera.svg" alt="cam">
  37.                                         </a>
  38.                                         <input type="file" accept="images/jpg, images/png" name="avatar">
  39.                                     </div>
  40.                                     <!-- Browse Image to Upload Wrapper -->
  41.                                 </div>
  42.                             <!-- Avatar File Input Wrapper  -->
  43.                         </div>
  44.                     </div>
  45.                 </div>
  46.             </div>
  47.         </div>
  48.     </div>
  49.     <script src="script.js"></script>
  50. </body>
  51. </html>

Stylesheet

Next, the below script is the CSS file script named style.css. It contains the custom style codes for some of the design of the page elements.

  1. @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@200&family=Space+Mono&display=swap" rel="stylesheet');
  2. :root{
  3.     --space-mono-font: 'Space Mono', monospace;
  4.     --border-dark-subtle: #373838; 
  5. }
  6. *{
  7.     box-sizing: border-box;
  8. }
  9. body *{
  10.     font-family: var(--space-mono-font);
  11. }
  12. /**
  13. Page Design
  14. */
  15. body,
  16. html{
  17.     height: 100%;
  18.     width: 100%;
  19.     margin: 0;
  20.     padding: 0;
  21. }
  22. body{
  23.     background-color: #282A3A;
  24. }
  25. .page-title{
  26.     font-size: 2.5rem;
  27.     font-weight: 500;
  28.     color: #fff;
  29.     letter-spacing: 3px;
  30.     font-family: var(--secular-font);
  31.     text-align: center;
  32.     text-shadow: 0px 0px 3px #2020208c;
  33. }
  34. .border-dark-subtle{
  35.     border-color: var(--border-dark-subtle) !important;
  36. }
  37. /* Avatar File Input Wrapper */
  38. div#AvatarFileUpload {
  39.     position: relative;
  40.     width: 150px;
  41.     height: 150px;
  42.     background: #f9f9f9;
  43.     border: 3px solid #bbb;
  44.     border-radius: 50% 50%;
  45.     margin: auto;
  46. }
  47. /* Image Preview Wrapper and Container */
  48. div#AvatarFileUpload > .selected-image-holder{
  49.     width: 100%;
  50.     height: 100%;
  51.     border-radius: 50% 50%;
  52.  
  53. }
  54. div#AvatarFileUpload > .selected-image-holder{
  55.     width: 100%;
  56.     overflow: hidden;
  57. }
  58. div#AvatarFileUpload > .selected-image-holder>img{
  59.     width: 100%;
  60.     height: 100%;
  61.     object-fit: cover;
  62.     object-fit: center center;
  63. }
  64.  
  65. /* Image Selector to Browse Image to Upload */
  66. div#AvatarFileUpload > .avatar-selector{
  67.     position: absolute;
  68.     bottom: 8px;
  69.     right: 19%;
  70.     width: 20px;
  71.     height: 20px;
  72. }
  73. div#AvatarFileUpload > .avatar-selector input[type="file"]{
  74.     display: none;
  75. }
  76. div#AvatarFileUpload > .avatar-selector > .avatar-selector-btn{
  77.     width: 100%;
  78.     height: 100%;
  79.     background: #f5f5f59e;
  80.     padding: 5px 7px;
  81.     border-radius: 50% 50%;
  82. }
  83. div#AvatarFileUpload > .avatar-selector > .avatar-selector-btn>img{
  84.     width: 100%;
  85.     height: 100%;
  86.     object-fit: scale-down;
  87.     object-position: center center;
  88.     z-index: 2;
  89. }

JavaScript

Lastly, here is the JavaScript file script named script.js. It contains the codes for making the Avatar File Upload Component functional.

  1. // Main Wrapper Selector
  2. const avatarFileUpload = document.getElementById('AvatarFileUpload')
  3. // Preview Wrapper Selector
  4. const imageViewer = avatarFileUpload.querySelector('.selected-image-holder>img')
  5. // Image Selector button Selector
  6. const imageSelector = avatarFileUpload.querySelector('.avatar-selector-btn')
  7. // Image Input File Selector
  8. const imageInput = avatarFileUpload.querySelector('input[name="avatar"]')
  9.  
  10. /** Trigger Browsing Image to Upload */
  11. imageSelector.addEventListener('click', e => {
  12.     e.preventDefault()
  13.     // Trigger Image input click
  14.     imageInput.click()
  15. })
  16.  
  17. /** IF Selected Image has change */
  18. imageInput.addEventListener('change', e => {
  19.     // Open File eader
  20.     var reader = new FileReader();
  21.     reader.onload = function(){
  22.         // Preview Image
  23.         imageViewer.src = reader.result;
  24.     };
  25.     // Read Selected Image as DataURL
  26.     reader.readAsDataURL(e.target.files[0]);
  27. })

Snapshots

Here are the snapshots of the overall result of the scripts that I provided above.

Avatar File Upload Component

Avatar File Upload Component

Selecting/Browsing New Image

Avatar File Upload Component

There you go! I have provided also the complete source code zip file of the scripts that I provided above on this website and it is free to download. The download button is located below this tutorial's content. Feel Free to download and modify the script to enhance your own capabilities.

That's it! I hope this Creating an Avatar File Upload Selector and Preview using HTML, CSS, and JS Tutorial will help you with what you are looking for and will be useful for your current and future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding =)

Tags

Add new comment

About text formats
  • 1136 views