@@ -7,18 +7,68 @@ let fileType;
7
7
let pendingFiles = 0 ;
8
8
let formatSelected = false ;
9
9
10
- dropZone . addEventListener ( "dragover" , ( ) => {
10
+ dropZone . addEventListener ( "dragover" , ( e ) => {
11
+ e . preventDefault ( ) ;
11
12
dropZone . classList . add ( "dragover" ) ;
12
13
} ) ;
13
14
14
15
dropZone . addEventListener ( "dragleave" , ( ) => {
15
16
dropZone . classList . remove ( "dragover" ) ;
16
17
} ) ;
17
18
18
- dropZone . addEventListener ( "drop" , ( ) => {
19
- dropZone . classList . remove ( "dragover" ) ;
19
+ dropZone . addEventListener ( "drop" , ( e ) => {
20
+ e . preventDefault ( ) ;
21
+ dropZone . classList . remove ( "dragover" ) ;
22
+
23
+ const files = e . dataTransfer . files ;
24
+
25
+ if ( files . length === 0 ) {
26
+ console . warn ( "No files dropped — likely a URL or unsupported source." ) ;
27
+ return ;
28
+ }
29
+
30
+ for ( const file of files ) {
31
+ console . log ( "Handling dropped file:" , file . name ) ;
32
+ handleFile ( file ) ;
33
+ }
20
34
} ) ;
21
35
36
+ // Extracted handleFile function for reusability in drag-and-drop and file input
37
+ function handleFile ( file ) {
38
+ const fileList = document . querySelector ( "#file-list" ) ;
39
+
40
+ const row = document . createElement ( "tr" ) ;
41
+ row . innerHTML = `
42
+ <td>${ file . name } </td>
43
+ <td><progress max="100"></progress></td>
44
+ <td>${ ( file . size / 1024 ) . toFixed ( 2 ) } kB</td>
45
+ <td><a onclick="deleteRow(this)">Remove</a></td>
46
+ ` ;
47
+
48
+ if ( ! fileType ) {
49
+ fileType = file . name . split ( "." ) . pop ( ) ;
50
+ fileInput . setAttribute ( "accept" , `.${ fileType } ` ) ;
51
+ setTitle ( ) ;
52
+
53
+ fetch ( `${ webroot } /conversions` , {
54
+ method : "POST" ,
55
+ body : JSON . stringify ( { fileType } ) ,
56
+ headers : { "Content-Type" : "application/json" } ,
57
+ } )
58
+ . then ( ( res ) => res . text ( ) )
59
+ . then ( ( html ) => {
60
+ selectContainer . innerHTML = html ;
61
+ updateSearchBar ( ) ;
62
+ } )
63
+ . catch ( console . error ) ;
64
+ }
65
+
66
+ fileList . appendChild ( row ) ;
67
+ file . htmlRow = row ;
68
+ fileNames . push ( file . name ) ;
69
+ uploadFile ( file ) ;
70
+ }
71
+
22
72
const selectContainer = document . querySelector ( "form .select_container" ) ;
23
73
24
74
const updateSearchBar = ( ) => {
@@ -106,62 +156,9 @@ const updateSearchBar = () => {
106
156
107
157
// Add a 'change' event listener to the file input element
108
158
fileInput . addEventListener ( "change" , ( e ) => {
109
- // Get the selected files from the event target
110
159
const files = e . target . files ;
111
-
112
- // Select the file-list table
113
- const fileList = document . querySelector ( "#file-list" ) ;
114
-
115
- // Loop through the selected files
116
160
for ( const file of files ) {
117
- // Create a new table row for each file
118
- const row = document . createElement ( "tr" ) ;
119
- row . innerHTML = `
120
- <td>${ file . name } </td>
121
- <td><progress max="100"></progress></td>
122
- <td>${ ( file . size / 1024 ) . toFixed ( 2 ) } kB</td>
123
- <td><a onclick="deleteRow(this)">Remove</a></td>
124
- ` ;
125
-
126
- if ( ! fileType ) {
127
- fileType = file . name . split ( "." ) . pop ( ) ;
128
- fileInput . setAttribute ( "accept" , `.${ fileType } ` ) ;
129
- setTitle ( ) ;
130
-
131
- // choose the option that matches the file type
132
- // for (const option of convertFromSelect.children) {
133
- // console.log(option.value);
134
- // if (option.value === fileType) {
135
- // option.selected = true;
136
- // }
137
- // }
138
-
139
- fetch ( `${ webroot } /conversions` , {
140
- method : "POST" ,
141
- body : JSON . stringify ( { fileType : fileType } ) ,
142
- headers : {
143
- "Content-Type" : "application/json" ,
144
- } ,
145
- } )
146
- . then ( ( res ) => res . text ( ) )
147
- . then ( ( html ) => {
148
- selectContainer . innerHTML = html ;
149
- updateSearchBar ( ) ;
150
- } )
151
- . catch ( ( err ) => console . log ( err ) ) ;
152
- }
153
-
154
- // Append the row to the file-list table
155
- fileList . appendChild ( row ) ;
156
-
157
- //Imbed row into the file to reference later
158
- file . htmlRow = row ;
159
-
160
-
161
- // Append the file to the hidden input
162
- fileNames . push ( file . name ) ;
163
-
164
- uploadFile ( file ) ;
161
+ handleFile ( file ) ;
165
162
}
166
163
} ) ;
167
164
0 commit comments