Drag and drop file upload using Javascript

In this article, you will see how to create a standard drag & drop file uploader user interface(UI). Drag and drop upload makes it much easier for the user to upload data.

Here to create a drag and drop uploader, we are going to use basic HTML, CSS, and Javascript.

drag and drop file uploader ui

Basic HTML structure for file upload

First of all, we will create a basic HTML structure for file upload just like below:

<div class="upload-container">
      <input type="file" id="file_upload" multiple="true" />
</div>
<br>
<button class="upload-btn" onclick="uploadFiles()">Submit</button>

Let’s understand the above HTML structure,

  • Here we defined an upload container area to drop uploading files.
  • The HTML input element is defined with attribute type=”file” to hold the uploading files and attribute multiple=”true” is defined to accept one or more than one file at a time.
  • The HTML button element is defined to submit the uploading files.

Basic CSS for the file upload

Let’s defined the basic CSS for the above HTML structure to provides the look and feel of the drag and drop file uploader.

Define the below CSS code in <style> tag of HTML page:

	.upload-container {
		position: relative;
	}
	.upload-container input {
		border: 1px solid #92b0b3;
		background: #f1f1f1;
		outline: 2px dashed #92b0b3;
		outline-offset: -10px;
		padding: 100px 0px 100px 250px;
		text-align: center !important;
		width: 500px;
	}

	.upload-container input:hover {
		background: #ddd;
	}
	
	.upload-container:before {
		position: absolute;
		bottom: 50px;
		left: 245px;
		content: " (or) Drag and Drop files here. ";
		color: #3f8188;
		font-weight: 900;
	}
	
	.upload-btn {
		margin-left: 300px;
		padding: 7px 20px;
	}

How to read files from file uploader

Now we will use Javascript code to read the uploading files and submit them to upload.

Define the below javascript code in <script> tag of HTML page:

function uploadFiles() {
	var files = document.getElementById('file_upload').files;
	if(files.length==0){
		alert("Please first choose or drop any file(s)...");
		return;
	}
	var filenames="";
	for(var i=0;i<files.length;i++){
		filenames+=files[i].name+"\n";
	}
	alert("Selected file(s) :\n____________________\n"+filenames);
}

The above-defined function uploadFiles() will be called to submit the uploading file when the user clicks on submit button.

Putting all code together

Now, we can put all code together in a single HTML page like below filesupload.html file:

filesupload.html

 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">    
<style>
	.upload-container {
		position: relative;
	}
	.upload-container input {
		border: 1px solid #92b0b3;
		background: #f1f1f1;
		outline: 2px dashed #92b0b3;
		outline-offset: -10px;
		padding: 100px 0px 100px 250px;
		text-align: center !important;
		width: 500px;
	}
	.upload-container input:hover {
		background: #ddd;
	}	
	.upload-container:before {
		position: absolute;
		bottom: 50px;
		left: 245px;
		content: " (or) Drag and Drop files here. ";
		color: #3f8188;
		font-weight: 900;
	}	
	.upload-btn {
		margin-left: 300px;
		padding: 7px 20px;
	}        
</style>
<script>
			
	function uploadFiles() {
		var files = document.getElementById('file_upload').files;
		if(files.length==0){
			alert("Please first choose or drop any file(s)...");
			return;
		}
		var filenames="";
		for(var i=0;i<files.length;i++){
			filenames+=files[i].name+"\n";
		}
		alert("Selected file(s) :\n____________________\n"+filenames);
	}
		   
</script>
</head>
<body>
    <div class="upload-container">
        <input type="file" id="file_upload" multiple />
    </div>
	<br>
    <button class="upload-btn" onclick="uploadFiles()">Submit</button>	
</body>
</html>

Live Demo and Preview

If you open the above HTML page in the browser it looks like the below image:

drag and drop file uploader

Conclusion

In this article, you have seen how you can design a drag and drop file uploader user interface and read uploading files to submit using javascript. You can use this UI to upload single as well as multiple files to the server by using any backend technologies such as Servlet, Spring boot, etc.

You can visit the below link if you want to do file upload in Spring boot,

Spring Boot File Upload with Advance Progress bar in Ajax

You can visit the below link to do the file upload in Java Servlet,

Ajax File Upload with Advance Progress Bar in Java


Related Articles:

Share with friends

Leave a Comment

Your email address will not be published. Required fields are marked *