I am writing a file selection form that each time a file is selected, that file will be added to the existing file array. My intention is to submit that array via the form, but after submitting, the array is stringified. I don’t know how to handle it, please help me.
This is my code:
<script lang="ts">
let selectedFiles: File[] = [];
function handleSubmit(e: any) {
errorCode = validate(selectedFiles);
if (errorCode) {
console.log(errorCode);
e.preventDefault();
}
}
function handleFileSelect(e: any) {
selectedFiles = [...selectedFiles, e.target.files[0]];
}
// Create ref to DOM element
let fileInput: HTMLInputElement;
</script>
<form action="?/submit" method="post" on:submit={handleSubmit}>
<div>
<label for="files">Click "+" to add file</label>
<button on:click={(e) => {e.preventDefault(); fileInput.click();}}>
<span>+</span>
</button>
<input type="file" accept={allowedExtensions} on:change={handleFileSelect} on:invalid={handleInvalid} bind:this={fileInput} hidden/>
<input type="hidden" name="contest" value={contest.id} />
<input type="hidden" name="user" value={data.user.id} />
<input type="hidden" name="files" value={selectedFiles} />
<p>Selected files: {getFileNames(selectedFiles).join(', ')}</p>
<br />
<button type="submit" class="btn btn-primary w-full">Submit</button>
</div>
</form>
I logged request.formData() and it came out like this:
[Symbol(state)]: [
{
name: 'files',
value: '[object File],[object File],[object File]'
},
{ name: 'contest', value: '5bvod8teq8kh7yn' },
{ name: 'user', value: 'dvkw0v6uz31zag2' },
{ name: 'score', value: '0' }
]
I expected it like this:
[Symbol(state)]: [
{ name: 'files', value: [File] },
{ name: 'files', value: [File] },
{ name: 'files', value: [File] },
{ name: 'contest', value: '5bvod8teq8kh7yn' },
{ name: 'user', value: 'dvkw0v6uz31zag2' },
{ name: 'score', value: '0' }
]