daviszhen commited on
Commit
e073a4f
·
verified ·
1 Parent(s): db3509f

remove upload images

Browse files
Files changed (2) hide show
  1. index.html +0 -14
  2. 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');