<!DOCTYPE html>
<html>
<head>
<title>Multi-file Upload</title>
<style>
fieldset {
display: none;
}
fieldset:first-child {
display: block;
}
button {
margin-top: 10px;
}
.prev {
margin-right: 10px;
}
.drop-zone {
border: 2px dashed #ccc;
width: 300px;
height: 200px;
padding: 20px;
text-align: center;
cursor: pointer;
}
.file-preview {
display: flex;
flex-wrap: wrap;
margin-top: 10px;
}
.file-item {
display: flex;
align-items: center;
margin-right: 10px;
margin-bottom: 10px;
}
.file-item img {
width: 50px;
height: 50px;
margin-right: 5px;
}
.remove-btn {
cursor: pointer;
color: red;
font-weight: bold;
}
.file_preview_error{
color:red;
}
.error{
color:red;
display:block;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
// Initialize validation for the form
$('#stepForm').validate({
rules: {
name: 'required',
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 6
},
confirmPassword: {
required: true,
equalTo: '#password'
},
username: 'required',
address: 'required',
city: 'required'
},
messages: {
// Customize error messages for each field if needed
},
errorPlacement: function(error, element) {
// Customize error placement if needed
error.insertAfter(element);
}
});
function thirdStepJqueryValidations(){
$("#stepForm").validate({
rules: {
username: "required",
},
// In 'messages' user have to specify message as per rules
messages: {
username: "Username is required."
}
});
return $("#stepForm").valid();
}
// Step navigation
var currentStep = 0;
var fieldsets = $('#stepForm fieldset');
var stepsCount = fieldsets.length;
function navigateTo(step) {
// Hide all fieldsets
fieldsets.hide();
// Show the selected step
$(fieldsets[step]).fadeIn('slow');
// Disable previous button if on the first step
$('.prev').prop('disabled', step === 0);
// Change the text of the next button on the last step
if (step === stepsCount - 1) {
$('.next').text('Submit');
} else {
$('.next').text('Next');
}
}
function dropFileValidation(){
var dropZone = $('#file_preview');
$(".file_preview_error").text("");
if (dropZone.is(':empty')) {
// The drop zone is empty
// Perform your validation logic here or take appropriate actions
/* console.log("The drop zone is empty."); */
$(".file_preview_error").text("This field is required.");
return false;
}
return true;
}
$('.next').click(function() {
console.log(currentStep);
if(currentStep == 2){
if(!thirdStepJqueryValidations() || !dropFileValidation()) {
dropFileValidation();
return false;
}
}
if ($('#stepForm').valid()) {
currentStep++;
navigateTo(currentStep);
}
});
$('.prev').click(function() {
currentStep--;
navigateTo(currentStep);
});
});
window.addEventListener("DOMContentLoaded", () => {
const dropZone = document.getElementById("dropzone");
const filePreview = document.getElementById("file_preview");
// Handle file drop
dropZone.addEventListener("drop", (e) => {
e.preventDefault();
const files = e.dataTransfer.files;
handleFiles(files);
});
// Handle file drag over
dropZone.addEventListener("dragover", (e) => {
e.preventDefault();
});
// Handle file input change
dropZone.addEventListener("click", () => {
const fileInput = document.createElement("input");
fileInput.type = "file";
fileInput.multiple = true;
fileInput.accept = "image/*";
fileInput.addEventListener("change", (e) => {
$(".file_preview_error").text("");
const files = e.target.files;
handleFiles(files);
});
fileInput.click();
});
// Handle file removal
filePreview.addEventListener("click", (e) => {
if (e.target.classList.contains("remove-btn")) {
const fileItem = e.target.parentElement;
const fileName = fileItem.getAttribute("data-file-name");
fileItem.remove();
}
});
function handleFiles(files) {
for (const file of files) {
const reader = new FileReader();
reader.onload = (e) => {
const fileContent = e.target.result;
displayFile(file, fileContent);
};
reader.readAsDataURL(file);
}
}
function displayFile(file, fileContent) {
const fileItem = document.createElement("div");
fileItem.classList.add("file-item");
fileItem.setAttribute("data-file-name", file.name);
const image = document.createElement("img");
image.src = fileContent;
// Create the input element
const inputElement = document.createElement("input");
// Set the input type and value attributes
inputElement.setAttribute("type", "hidden");
inputElement.setAttribute("name", "files[]");
inputElement.setAttribute("value", fileContent + "?filename=" + file.name);
const fileName = document.createElement("span");
fileName.innerText = file.name;
const removeBtn = document.createElement("span");
removeBtn.classList.add("remove-btn");
removeBtn.innerText = "Remove";
fileItem.appendChild(image);
fileItem.appendChild(inputElement);
fileItem.appendChild(fileName);
fileItem.appendChild(removeBtn);
filePreview.appendChild(fileItem);
}
});
</script>
</head>
<body>
<form id="stepForm" method="post">
<fieldset>
<h2>Step 1</h2>
<input type="text" name="name" id="name" placeholder="Name">
<input type="email" name="email" id="email" placeholder="Email">
<button type="button" class="next">Next</button>
</fieldset>
<fieldset>
<h2>Step 2</h2>
<input type="password" name="password" id="password" placeholder="Password">
<input type="password" name="confirmPassword" id="confirmPassword" placeholder="Confirm Password">
<button type="button" class="prev">Previous</button>
<button type="button" class="next">Next</button>
</fieldset>
<fieldset>
<h2>Uploader</h2>
<input type="text" name="username" >
<div class="drop-zone" id="dropzone">
<span>Drag and drop files here</span>
</div>
<div class="file-preview" id="file_preview"></div>
<div class="file_preview_error"></div>
<button type="button" class="prev">Previous</button>
<button type="button" class="next">Next</button>
</fieldset>
<fieldset>
<h2>Step 3</h2>
<input type="text" name="address" id="address" placeholder="Address">
<input type="text" name="city" id="city" placeholder="City">
<button type="button" class="prev">Previous</button>
<button type="submit">Submit</button>
</fieldset>
</form>
</body>
</html>
