Skip to content Skip to sidebar Skip to footer
Accueil / How to Upload a File by Drag and Drop

How to Upload a File by Drag and Drop

Enregistrer un commentaire

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

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

drag and drop file upload

Drag and drib meaning

Drag and drop is a method of moving computer files, images, videos, etc. from one place to another by clicking on them with the mouse and moving them across the screen. We tin can as well say, Drag and drop is a functionality by which users tin can select an image or file and tin can motion it to the desired location and "drop" information technology in that location.

How drag and drib work?

The following set of sequences involved in the drag and drop process:

  1. Move the pointer to the object (images, files, etc.)
  2. Press, and concord downward, the button on the mouse or other pointing device, to "take hold of" the object
  3. "Drag" the object to the desired location by moving the pointer to this 1
  4. "Drop" the object by releasing the button

Drag and drop file upload HTML CSS

Here, we will create a drag and driblet file upload user interface using basic HTML and CSS just.

Basic HTML

Get-go of all, nosotros define the basic HTML for file upload:

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

Permit's sympathize the higher up HTML,

  • Hither we divers an upload container area to drib uploading files.
  • The HTML <input> chemical element is defined with attribute blazon="file" to hold the uploading file.
  • The HTML <button> element is defined to submit the uploading files.

Drag and drop multiple file upload

Nosotros can also upload multiple files at a fourth dimension using drag and driblet. Just nosotros need to modify the <input> to accept multiple files. Nosotros have to add the aspect "multiple" like the below code. The aspect multiple="true" is defined to take one or more than i file at a time.

<input type="file" id="file_upload" multiple="true" />

Bones CSS for the file upload

Permit's define the basic CSS for the above HTML structure to provide the await and feel of the drag and drop file uploader.

Define the beneath CSS lawmaking 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; 		lesser: 50px; 		left: 245px; 		content: " (or) Drag and Drop files hither. "; 		color: #3f8188; 		font-weight: 900; 	} 	 	.upload-btn { 		margin-left: 300px; 		padding: 7px 20px; 	}

Drag and drop file upload javascript

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

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

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

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

Drag and driblet file upload example with submit button

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

filesupload.html 

              <!DOCTYPE html> <html> <head> <meta proper name="viewport" content="width=device-width, initial-scale=i">     <style> 	.upload-container { 		position: relative; 	} 	.upload-container input { 		edge: 1px solid #92b0b3; 		background: #f1f1f1; 		outline: 2px dashed #92b0b3; 		outline-showtime: -10px; 		padding: 100px 0px 100px 250px; 		text-align: center !important; 		width: 500px; 	} 	.upload-container input:hover { 		background: #ddd; 	}	 	.upload-container:earlier { 		position: absolute; 		lesser: 50px; 		left: 245px; 		content: " (or) Drag and Driblet files here. "; 		colour: #3f8188; 		font-weight: 900; 	}	 	.upload-btn { 		margin-left: 300px; 		padding: 7px 20px; 	}         </style> <script> 			 	office uploadFiles() { 		var files = document.getElementById('file_upload').files; 		if(files.length==0){ 			alert("Please first choose or drib whatever file(s)..."); 			return; 		} 		var filenames=""; 		for(var i=0;i<files.length;i++){ 			filenames+=files[i].name+"\north"; 		} 		alert("Selected file(s) :\n____________________\due north"+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>

Preview and Live Demo

If you open the higher up HTML page in the browser it will look like the below prototype:

drag and drop file uploader

Conclusion

In this article, you have seen how y'all tin blueprint a drag and driblet file uploader user interface and read uploading files to submit using javascript. You can employ this UI to upload unmarried every bit well as multiple files to the server past using whatsoever backend technologies such as Servlet, Spring boot, etc.

Visit the below link if y'all want to do file upload in Spring boot,

Jump Boot File Upload with Advance Progress bar in Ajax

Visit the below link to exercise the file upload in Java Servlet,

Ajax File Upload with Accelerate Progress Bar in Java

Related Manufactures:

  • File upload validations in javascript
  • Preview an image before uploading using Javascript
  • Preview an image earlier uploading using jQuery
  • File Upload in Coffee Servlet Instance
  • Multiple file upload in Coffee with Progress bar – Ajax
  • Pace by stride Coffee file upload | Ajax Progress bar

You might similar this:

  • How to create a Stopwatch in JavaScript?
  • Apache POI – Read and Write Excel files in java
  • How to create countersign-protected Excel in java?
  • How to Read password-protected Excel in java?
  • How to write information to an existing Excel file in coffee?
  • [Java code] Catechumen Excel file to CSV with Apache POI

tsebessil.blogspot.com

Source: https://javacodepoint.com/drag-and-drop-file-upload-using-javascript/

Enregistrer un commentaire for "How to Upload a File by Drag and Drop"