Custom File Upload Input In JavaScript

Custom File Upload Input In JavaScript
Code Snippet:File Upload Web Component
Author: Dzajew
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 458
License: MIT
Edit Code online: View on CodePen
Read More

This code creates a custom file upload input in JavaScript. It enables users to upload files with specified size limits. The code generates a file input with error handling and a preview of the uploaded image. It ensures the uploaded file doesn’t exceed the set size limit and displays corresponding error messages if necessary.

You can integrate this code into your project to create customized file upload sections on websites. This is especially handy for profile picture uploads or any file uploads requiring size restrictions.

How to Create Custom File Upload Input In JavaScript

1. First of all, include the Normalize.css stylesheet to ensure consistent styling across different browsers. Add the following link to your HTML file’s <head> section:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

2. Create a custom file upload section in your HTML, like this:

<custom-upload maxsize="1000000" nojs>
 <div class="file">
   <label for="file">
     Upload your profile picture
   </label>
   <input type="file" name="file" id="file">
 </div>
  <p class="error"></p>
  <p class="file-name"></p>
    <img src="" alt="" class="preview">
 </custom-upload>

Customize the maxsize attribute to set your desired file size limit in bytes.

3. Copy the following CSS code into your stylesheets. This CSS ensures a visually appealing and responsive design for the file upload component.

*, ::before, ::after {
  box-sizing:border-box;
}
body {
  padding: 20px;
}
custom-upload {
display:block;
margin: 0 auto;
--radius: 8px;
font-size: 1rem;
}
.file {
display:flex;
flex-direction: column;
gap:1em;
margin:0 auto;
position:relative;
width:max(10em,20vmin);
height:max(10em,20vmin);
  }
label[for="file"] {
position: absolute;
left:0;
top:0;
width:100%;
height:100%;
background-color: #9BB5F3;
color:#000000;
text-align:center;
display:flex;
justify-content:center;
align-items:center;
padding:0 10px;
cursor:pointer;
border-radius: var(--radius);
font-size: 1.2em;
}
label[for="file"]:hover {
background-color: #6FE594;
}
custom-upload[nojs] label {
position: relative;
}
input[type="file"] {
width:100%;
height:100%;
border-radius: var(--radius);
}
input[type="file"]:focus {
outline: 2px solid #000;
}
.preview {
max-width: 640px;
margin: 1em auto 0;
}
.file-name {
  padding: 10px 0;
  font-size: 1em;
  line-height:1.2;
}
.file-name:empty {
  display: none;
}
.error {
padding: 10px 0;
color: red;
font-size: 1em;
line-height: 1.2;
}
.error:empty {
display: none;
}

4. Finally, include the JavaScript code either directly in your HTML file or in an external script file. This code defines a custom HTML element, custom-upload, and handles its functionality.

class CustomUpload extends HTMLElement {
  static observedAttributes = ["imagesrc", "filename","error"];
  constructor() {
    super();
    this.input = this.querySelector("input");
    this.img = this.querySelector("img");
    this.filename = this.querySelector(".file-name");
    this.error = this.querySelector(".error");
    this.maxSize = this.getAttribute("maxsize");
    this.mappedAttributes = {
      imagesrc : {
        default: '',
        target: {
          name: this.img,
          innerHTML: false,
          attribute: 'src'
        }
      },
      filename : {
        default: '',
        target: {
          name: this.filename,
          innerHTML: true,
        }
      },
      error : {
        default: '',
        target: {
          name: this.error,
          innerHTML: true,
        }
      },
    } 
  }
  connectedCallback() {
    this.removeAttribute("nojs");
    this.input.addEventListener('change',(e)=>{
      this.setAttribute('error', '');
      const files = e.target.files
      const isValid = this.validate(files);
      if(isValid) {
        this.onUpload(files);  
      }
    })
  }
  attributeChangedCallback(name, oldValue, newValue) {
    if(this.mappedAttributes[name]) {

      const mapped = this.mappedAttributes[name];
      const target = mapped.target.name;

      mapped.target?.innerHTML ? target.innerHTML = newValue : target.setAttribute(mapped.target.attribute, newValue);
    }
  }
  onUpload(files) {
    const imageSrc = URL.createObjectURL(files[0]);
    const fileName = files[0].name;
    this.setAttribute('filename', "Uploaded file: " + fileName);
    this.setAttribute('imagesrc',imageSrc);
  }
  validate(files) {
    const file = files[0];
    if(file.size > this.maxSize) {
      this.setAttribute("error", "File's weight shouldn't exceed 1 MB")
      return false;
    }
    return true;
  }
}
customElements.define("custom-upload", CustomUpload);

Feel free to customize the appearance further by adjusting CSS styles or modifying the JavaScript code to suit your project’s specific needs.

That’s all! hopefully, you have successfully created Custom File Upload Input In Javascript. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X