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.
Similar Code Snippets:
- Live Markdown Editor With Preview Using Codemirror JS
- Input Error Shake Animation in CSS
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.