remove upload images
Browse files- index.html +0 -14
- script.js +0 -76
index.html
CHANGED
|
@@ -28,20 +28,6 @@
|
|
| 28 |
</button>
|
| 29 |
</div>
|
| 30 |
</div>
|
| 31 |
-
|
| 32 |
-
<div class="mb-6">
|
| 33 |
-
<label class="block text-sm font-medium text-gray-700 mb-2">Upload Images</label>
|
| 34 |
-
<div id="drop-area" class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center cursor-pointer hover:border-blue-500 transition duration-200">
|
| 35 |
-
<div id="drop-content">
|
| 36 |
-
<i data-feather="upload" class="w-8 h-8 mx-auto text-gray-400 mb-2"></i>
|
| 37 |
-
<p class="text-gray-500">Drag & drop images here or click to select</p>
|
| 38 |
-
<input type="file" id="file-input" class="hidden" accept="image/*" multiple>
|
| 39 |
-
</div>
|
| 40 |
-
<div id="preview-container" class="grid grid-cols-3 gap-4 mt-4 hidden">
|
| 41 |
-
<p class="col-span-3 text-sm text-gray-500">Selected images:</p>
|
| 42 |
-
</div>
|
| 43 |
-
</div>
|
| 44 |
-
</div>
|
| 45 |
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
| 46 |
<div>
|
| 47 |
<label class="block text-sm font-medium text-gray-700 mb-2">File Filter</label>
|
|
|
|
| 28 |
</button>
|
| 29 |
</div>
|
| 30 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 31 |
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
| 32 |
<div>
|
| 33 |
<label class="block text-sm font-medium text-gray-700 mb-2">File Filter</label>
|
script.js
CHANGED
|
@@ -1,82 +1,6 @@
|
|
| 1 |
|
| 2 |
document.addEventListener('DOMContentLoaded', function() {
|
| 3 |
const fetchBtn = document.getElementById('fetch-btn');
|
| 4 |
-
const dropArea = document.getElementById('drop-area');
|
| 5 |
-
const fileInput = document.getElementById('file-input');
|
| 6 |
-
const previewContainer = document.getElementById('preview-container');
|
| 7 |
-
const dropContent = document.getElementById('drop-content');
|
| 8 |
-
|
| 9 |
-
// Drag and drop functionality
|
| 10 |
-
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
| 11 |
-
dropArea.addEventListener(eventName, preventDefaults, false);
|
| 12 |
-
});
|
| 13 |
-
|
| 14 |
-
function preventDefaults(e) {
|
| 15 |
-
e.preventDefault();
|
| 16 |
-
e.stopPropagation();
|
| 17 |
-
}
|
| 18 |
-
|
| 19 |
-
['dragenter', 'dragover'].forEach(eventName => {
|
| 20 |
-
dropArea.addEventListener(eventName, highlight, false);
|
| 21 |
-
});
|
| 22 |
-
|
| 23 |
-
['dragleave', 'drop'].forEach(eventName => {
|
| 24 |
-
dropArea.addEventListener(eventName, unhighlight, false);
|
| 25 |
-
});
|
| 26 |
-
|
| 27 |
-
function highlight() {
|
| 28 |
-
dropArea.classList.add('border-blue-500', 'bg-blue-50');
|
| 29 |
-
}
|
| 30 |
-
|
| 31 |
-
function unhighlight() {
|
| 32 |
-
dropArea.classList.remove('border-blue-500', 'bg-blue-50');
|
| 33 |
-
}
|
| 34 |
-
|
| 35 |
-
dropArea.addEventListener('drop', handleDrop, false);
|
| 36 |
-
dropArea.addEventListener('click', () => fileInput.click());
|
| 37 |
-
|
| 38 |
-
fileInput.addEventListener('change', handleFiles);
|
| 39 |
-
|
| 40 |
-
function handleDrop(e) {
|
| 41 |
-
const dt = e.dataTransfer;
|
| 42 |
-
const files = dt.files;
|
| 43 |
-
handleFiles({ target: { files } });
|
| 44 |
-
}
|
| 45 |
-
|
| 46 |
-
function handleFiles(e) {
|
| 47 |
-
const files = e.target.files;
|
| 48 |
-
if (!files.length) return;
|
| 49 |
-
|
| 50 |
-
dropContent.classList.add('hidden');
|
| 51 |
-
previewContainer.classList.remove('hidden');
|
| 52 |
-
previewContainer.innerHTML = '<p class="col-span-3 text-sm text-gray-500">Selected images:</p>';
|
| 53 |
-
|
| 54 |
-
Array.from(files).forEach(file => {
|
| 55 |
-
if (!file.type.match('image.*')) return;
|
| 56 |
-
|
| 57 |
-
const reader = new FileReader();
|
| 58 |
-
reader.onload = function(e) {
|
| 59 |
-
const preview = document.createElement('div');
|
| 60 |
-
preview.className = 'relative group';
|
| 61 |
-
preview.innerHTML = `
|
| 62 |
-
<img src="${e.target.result}" class="w-full h-32 object-cover rounded-lg" alt="${file.name}">
|
| 63 |
-
<button class="absolute top-1 right-1 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
| 64 |
-
<i data-feather="x" class="w-4 h-4"></i>
|
| 65 |
-
</button>
|
| 66 |
-
`;
|
| 67 |
-
preview.querySelector('button').addEventListener('click', () => {
|
| 68 |
-
preview.remove();
|
| 69 |
-
if (previewContainer.childElementCount <= 1) {
|
| 70 |
-
dropContent.classList.remove('hidden');
|
| 71 |
-
previewContainer.classList.add('hidden');
|
| 72 |
-
}
|
| 73 |
-
});
|
| 74 |
-
previewContainer.appendChild(preview);
|
| 75 |
-
feather.replace();
|
| 76 |
-
};
|
| 77 |
-
reader.readAsDataURL(file);
|
| 78 |
-
});
|
| 79 |
-
}
|
| 80 |
const repoUrlInput = document.getElementById('repo-url');
|
| 81 |
const fileFilterSelect = document.getElementById('file-filter');
|
| 82 |
const templateSelect = document.getElementById('template');
|
|
|
|
| 1 |
|
| 2 |
document.addEventListener('DOMContentLoaded', function() {
|
| 3 |
const fetchBtn = document.getElementById('fetch-btn');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 4 |
const repoUrlInput = document.getElementById('repo-url');
|
| 5 |
const fileFilterSelect = document.getElementById('file-filter');
|
| 6 |
const templateSelect = document.getElementById('template');
|