@@ -126,13 +126,13 @@ function collectFormData(form) {
126126 const json_data = { } ;
127127 const inputText = form . querySelector ( '[name="input_text"]' ) ;
128128 const token = form . querySelector ( '[name="token"]' ) ;
129- const slider = document . getElementById ( 'file_size ' ) ;
129+ const hiddenInput = document . getElementById ( 'max_file_size_kb ' ) ;
130130 const patternType = document . getElementById ( 'pattern_type' ) ;
131131 const pattern = document . getElementById ( 'pattern' ) ;
132132
133133 if ( inputText ) { json_data . input_text = inputText . value ; }
134134 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 ; }
136136 if ( patternType ) { json_data . pattern_type = patternType . value ; }
137137 if ( pattern ) { json_data . pattern = pattern . value ; }
138138
@@ -206,6 +206,14 @@ function handleSubmit(event, showLoadingSpinner = false) {
206206
207207 if ( ! form ) { return ; }
208208
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+
209217 if ( showLoadingSpinner ) {
210218 showLoading ( ) ;
211219 }
@@ -226,12 +234,32 @@ function handleSubmit(event, showLoadingSpinner = false) {
226234 headers : { 'Content-Type' : 'application/json' } ,
227235 body : JSON . stringify ( json_data )
228236 } )
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+ }
232245 setButtonLoadingState ( submitButton , false ) ;
233246
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
235263 if ( data . error ) {
236264 showError ( `<div class='mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700'>${ data . error } </div>` ) ;
237265
@@ -327,14 +355,16 @@ function logSliderToSize(position) {
327355function initializeSlider ( ) {
328356 const slider = document . getElementById ( 'file_size' ) ;
329357 const sizeValue = document . getElementById ( 'size_value' ) ;
358+ const hiddenInput = document . getElementById ( 'max_file_size_kb' ) ;
330359
331- if ( ! slider || ! sizeValue ) { return ; }
360+ if ( ! slider || ! sizeValue || ! hiddenInput ) { return ; }
332361
333362 function updateSlider ( ) {
334363 const value = logSliderToSize ( slider . value ) ;
335364
336365 sizeValue . textContent = formatSize ( value ) ;
337366 slider . style . backgroundSize = `${ ( slider . value / slider . max ) * 100 } % 100%` ;
367+ hiddenInput . value = value ; // Set hidden input to KB value
338368 }
339369
340370 // Update on slider change
0 commit comments