@@ -126,13 +126,13 @@ function collectFormData(form) {
126
126
const json_data = { } ;
127
127
const inputText = form . querySelector ( '[name="input_text"]' ) ;
128
128
const token = form . querySelector ( '[name="token"]' ) ;
129
- const slider = document . getElementById ( 'file_size ' ) ;
129
+ const hiddenInput = document . getElementById ( 'max_file_size_kb ' ) ;
130
130
const patternType = document . getElementById ( 'pattern_type' ) ;
131
131
const pattern = document . getElementById ( 'pattern' ) ;
132
132
133
133
if ( inputText ) { json_data . input_text = inputText . value ; }
134
134
if ( token ) { json_data . token = token . value ; }
135
- if ( slider ) { json_data . max_file_size = slider . value ; }
135
+ if ( hiddenInput ) { json_data . max_file_size = hiddenInput . value ; }
136
136
if ( patternType ) { json_data . pattern_type = patternType . value ; }
137
137
if ( pattern ) { json_data . pattern = pattern . value ; }
138
138
@@ -206,6 +206,14 @@ function handleSubmit(event, showLoadingSpinner = false) {
206
206
207
207
if ( ! form ) { return ; }
208
208
209
+ // Ensure hidden input is updated before collecting form data
210
+ const slider = document . getElementById ( 'file_size' ) ;
211
+ const hiddenInput = document . getElementById ( 'max_file_size_kb' ) ;
212
+
213
+ if ( slider && hiddenInput ) {
214
+ hiddenInput . value = logSliderToSize ( slider . value ) ;
215
+ }
216
+
209
217
if ( showLoadingSpinner ) {
210
218
showLoading ( ) ;
211
219
}
@@ -226,12 +234,32 @@ function handleSubmit(event, showLoadingSpinner = false) {
226
234
headers : { 'Content-Type' : 'application/json' } ,
227
235
body : JSON . stringify ( json_data )
228
236
} )
229
- . then ( ( response ) => response . json ( ) )
230
- . then ( ( data ) => {
231
- // Hide loading overlay
237
+ . then ( async ( response ) => {
238
+ let data ;
239
+
240
+ try {
241
+ data = await response . json ( ) ;
242
+ } catch {
243
+ data = { } ;
244
+ }
232
245
setButtonLoadingState ( submitButton , false ) ;
233
246
234
- // Handle error
247
+ if ( ! response . ok ) {
248
+ // Show all error details if present
249
+ if ( Array . isArray ( data . detail ) ) {
250
+ const details = data . detail . map ( ( d ) => `<li>${ d . msg || JSON . stringify ( d ) } </li>` ) . join ( '' ) ;
251
+
252
+ showError ( `<div class='mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700'><b>Error(s):</b><ul>${ details } </ul></div>` ) ;
253
+
254
+ return ;
255
+ }
256
+ // Other errors
257
+ showError ( `<div class='mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700'>${ data . error || JSON . stringify ( data ) || 'An error occurred.' } </div>` ) ;
258
+
259
+ return ;
260
+ }
261
+
262
+ // Handle error in data
235
263
if ( data . error ) {
236
264
showError ( `<div class='mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700'>${ data . error } </div>` ) ;
237
265
@@ -327,14 +355,16 @@ function logSliderToSize(position) {
327
355
function initializeSlider ( ) {
328
356
const slider = document . getElementById ( 'file_size' ) ;
329
357
const sizeValue = document . getElementById ( 'size_value' ) ;
358
+ const hiddenInput = document . getElementById ( 'max_file_size_kb' ) ;
330
359
331
- if ( ! slider || ! sizeValue ) { return ; }
360
+ if ( ! slider || ! sizeValue || ! hiddenInput ) { return ; }
332
361
333
362
function updateSlider ( ) {
334
363
const value = logSliderToSize ( slider . value ) ;
335
364
336
365
sizeValue . textContent = formatSize ( value ) ;
337
366
slider . style . backgroundSize = `${ ( slider . value / slider . max ) * 100 } % 100%` ;
367
+ hiddenInput . value = value ; // Set hidden input to KB value
338
368
}
339
369
340
370
// Update on slider change
0 commit comments