Input File Preview
<section class="p-6 bg-white rounded-lg shadow-sm">
<div class="max-w-md mx-auto space-y-6">
<!-- File Input with Image Preview -->
<div class="space-y-2">
<label for="image-upload" class="block text-sm font-medium text-gray-700">Upload Image</label>
<div class="flex items-center justify-center w-full">
<label for="image-upload" class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100">
<div class="flex flex-col items-center justify-center pt-5 pb-6" id="upload-placeholder">
<svg class="w-10 h-10 mb-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
</svg>
<p class="mb-2 text-sm text-gray-500"><span class="font-semibold">Click to upload</span> or drag and drop</p>
<p class="text-xs text-gray-500">PNG, JPG or GIF (MAX. 2MB)</p>
</div>
<div id="image-preview" class="hidden w-full h-full">
<img id="preview-image" class="w-full h-full object-contain" src="#" alt="Preview" />
</div>
<input id="image-upload" type="file" accept="image/*" class="hidden" />
</label>
</div>
<div class="flex justify-between items-center">
<p class="text-xs text-gray-500" id="file-name">No file selected</p>
<button type="button" id="remove-button" class="hidden text-sm text-red-600 hover:text-red-700">
Remove
</button>
</div>
</div>
<!-- File Input with Document Preview -->
<div class="space-y-2">
<label for="document-upload" class="block text-sm font-medium text-gray-700">Upload Document</label>
<div class="flex items-center justify-center w-full">
<label for="document-upload" class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100">
<div class="flex flex-col items-center justify-center pt-5 pb-6" id="document-placeholder">
<svg class="w-8 h-8 mb-2 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
<p class="text-sm text-gray-500">Click to upload document</p>
</div>
<div id="document-preview" class="hidden w-full flex items-center justify-center">
<div class="flex items-center space-x-2 px-4 py-2 bg-gray-100 rounded-md">
<svg class="w-6 h-6 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
<span id="document-name" class="text-sm font-medium text-gray-700 truncate max-w-xs"></span>
</div>
</div>
<input id="document-upload" type="file" accept=".pdf,.doc,.docx,.txt" class="hidden" />
</label>
</div>
<div class="flex justify-between items-center">
<p class="text-xs text-gray-500" id="document-size">No file selected</p>
<button type="button" id="remove-document" class="hidden text-sm text-red-600 hover:text-red-700">
Remove
</button>
</div>
</div>
</div>
<script>
// Image preview functionality
const imageUpload = document.getElementById('image-upload');
const previewImage = document.getElementById('preview-image');
const imagePreview = document.getElementById('image-preview');
const uploadPlaceholder = document.getElementById('upload-placeholder');
const fileName = document.getElementById('file-name');
const removeButton = document.getElementById('remove-button');
imageUpload.addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
previewImage.src = e.target.result;
imagePreview.classList.remove('hidden');
uploadPlaceholder.classList.add('hidden');
fileName.textContent = file.name;
removeButton.classList.remove('hidden');
};
reader.readAsDataURL(file);
}
});
removeButton.addEventListener('click', function() {
imageUpload.value = '';
previewImage.src = '#';
imagePreview.classList.add('hidden');
uploadPlaceholder.classList.remove('hidden');
fileName.textContent = 'No file selected';
removeButton.classList.add('hidden');
});
// Document preview functionality
const documentUpload = document.getElementById('document-upload');
const documentPreview = document.getElementById('document-preview');
const documentPlaceholder = document.getElementById('document-placeholder');
const documentName = document.getElementById('document-name');
const documentSize = document.getElementById('document-size');
const removeDocument = document.getElementById('remove-document');
documentUpload.addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
documentName.textContent = file.name;
documentPreview.classList.remove('hidden');
documentPlaceholder.classList.add('hidden');
// Format file size
const size = file.size;
let formattedSize;
if (size < 1024) {
formattedSize = size + ' bytes';
} else if (size < 1024 * 1024) {
formattedSize = (size / 1024).toFixed(2) + ' KB';
} else {
formattedSize = (size / (1024 * 1024)).toFixed(2) + ' MB';
}
documentSize.textContent = formattedSize;
removeDocument.classList.remove('hidden');
}
});
removeDocument.addEventListener('click', function() {
documentUpload.value = '';
documentPreview.classList.add('hidden');
documentPlaceholder.classList.remove('hidden');
documentSize.textContent = 'No file selected';
removeDocument.classList.add('hidden');
});
</script>
</section>
Copied to clipboard