<?php
function decode_base64($base64Data){
$extension = null;
$pattern = '/data:(.*);base64,([^"]*)/';
// Perform the regular expression match
preg_match($pattern, $base64Data, $matches);
if(!empty($matches[1])){
$mime = $matches[1];
// Map MIME type to extension
$mimeToExt = [
'image/jpeg' => 'jpg',
'image/png' => 'png',
'image/gif' => 'gif',
'image/bmp' => 'bmp',
'image/webp' => 'webp',
'application/pdf' => 'pdf',
'application/msword' => 'doc',
'application/vnd.openxmlformats-officedocument.wordprocessingml.document' => 'docx',
// Add more mappings as needed
];
// Check if the MIME type exists in the mapping
if (isset($mimeToExt[$mime])) {
$extension = $mimeToExt[$mime];
}
/* print_r($matches);
die('here'); */
// Remove the data:image/jpeg;base64, part from the string
$base64Data = str_replace('data:' . $matches[1] . ';base64,', '', $base64Data);
// $base64Data = str_replace('data:image/jpeg;base64,', '', $base64Data);
// Decode the base64 data into binary format
$image_data = base64_decode($base64Data);
$urlParts = parse_url($base64Data);
$queryString = $urlParts['query'];
parse_str($queryString, $queryParameters);
$original_filename = $queryParameters['filename'];
if(empty($original_filename)){
// Generate a unique file name for the uploaded file
$original_filename = uniqid() . "." . $extension;
}
// $filename = uniqid() . '.jpeg';
// Specify the file path where you want to save the uploaded file
$filepath = 'uploads/' . $original_filename;
// Write the decoded binary data to the file
if (file_put_contents($filepath, $image_data)) {
echo 'File uploaded successfully.';
} else {
echo 'Error uploading file.';
}
}
else{
/* print_r($base64Data); */
}
}
if(isset($_POST['submit'])){
echo 'starting';
echo "<pre>";
$files = $_POST["files"];
foreach($files as $file){
$data = decode_base64($file);
}
print_R($data);
die();
}
?>
<html>
<head>
<title>Multi-file Upload</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<style>
.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>
</head>
<body>
<form action="" method="post" id="my_form" enctype="multipart/form-data">
<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>
<input type="submit" name="submit" value="submit" id="submit_bt">
</form>
<script>
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);
}
});
$(document).ready(function() {
function jqueryValidations(){
$("#my_form").validate({
rules: {
username: "required",
},
// In 'messages' user have to specify message as per rules
messages: {
username: "Username is required."
}
});
return $("#my_form").valid();
}
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;
}
$('#submit_bt').click(function(e) {
if (!jqueryValidations() || !dropFileValidation()) {
dropFileValidation();
event.preventDefault(); // Prevent form submission if any validation fails
}
});
});
</script>
</body>
</html>
