bind:files doesn't work on safari. But works in chrome

[muhajirdev]

Here's the repl.

https://svelte.dev/repl/61c6df2593cf4667ac36fb4c75c56012?version=3.6.7

<script>
	let name = 'world';
	
	let files = []
	
	$: {
		console.log(files)
	}
</script>


<input
		type="file"
		accept="image/*"
		class="w-full h-full cursor-pointer"
		bind:files />

Tried to open console. And then input a file.

On chrome it should log something. But on safari it's not working

[joernroeder]

can confirm. receiving events in chrome and firefox.

[dishuostec]

You can use change event.
https://svelte.dev/repl/f4e2ed04dfda4b2f82ee870fafcd997e?version=3.6.7

<script>
	let name = 'world';
	
	let files = []
	
	$: {
		console.log(files)
	}
	const changed = (event)=>{
		console.log('changed', event)
		files = event.target.files;
	}
</script>


<input
		type="file"
		accept="image/*"
		class="w-full h-full cursor-pointer"
		bind:files
		on:change={changed}
/>

[muhajirdev]

Yup, can confirm @dishuostec's is working. Thanks man

I'll keep this issue still open tho. Perhaps bind:files is easier.

[Conduitry]

I'm assuming the issue here is that file input elements don't fire the input event when they're changed? I don't have access to Safari to check. MDN reports that change and input events are supported on file inputs. I don't see anything there about differences between what these events means, and change is what's used in the code example there. It might be safe in all browsers to just implement this binding with change instead of input.

[pngwn]

I've just checked this on safari and file inputs do indeed fire a change event when the input (file) is changed.