Multiple False Doesn't Work

[ghost]

I'm using the original code from the documentation and just adding multiple="false":

    <Dropzone multiple="false" on:drop={handleFilesSelect} />
    <ol>
        {#each files.accepted as item}
            <li>{item.name}</li>
        {/each}
    </ol>

but it doesn't seem to work? The list inside ol element still increase even with multiple="false". Here is the result:

[ghost]

Wait actually after more testing, the multiple="false" made you unable to SELECT more than 1 file. So the problem might lies in this code instead:

<ol>
    {#each files.accepted as item}
        <li>{item.name}</li>
    {/each}
</ol>

Which for some reason doesn't replace the old accepted files when multiple is false.

[thecodejack]

Can you please provide PR with the fix?

[nicholasvperry]

I don't know if you figured this out but you need to set multiple={false}

<div class="">
  <Dropzone
      on:drop={handleFilesSelect}
      on:droprejected={handleFilesRejected}
      accept=".xls,.xlsx,.csv"
      multiple={false}
  />
  <ol>
	{#each files.accepted as item}
		<li>{item.name}</li>
		<li>{item.size}</li>
	{/each}
  </ol>
  </div>

I also added some logic to my functions in case they try to drag multiple files in to the drag and drop. In this case I am using swal to alert if more than one file is added.

function handleFilesSelect(e) {
		const { acceptedFiles, fileRejections } = e.detail;
		// Clear the accepted files array before adding the new file
		files.accepted = acceptedFiles;
		files.rejected = fileRejections;
	}

function handleFilesRejected(event) {
        const { file, errors } = event.detail.fileRejections[0];
        if (errors[0].message === 'Too many files') {
	        Swal.fire({
		        icon: 'error',
		        title: `Only one file can be imported at a time!`,
		        background: `${backgroundColor}`,
		        color: `${textColor}`
	        });
        } else {
	        Swal.fire({
		        icon: 'error',
		        title: `File ${file.name} was rejected: ${errors[0].message}`,
		        background: `${backgroundColor}`,
		        color: `${textColor}`
	        });
        }
}

[arackaf]

multiple={false} should work