thecodejack/svelte-file-dropzone

File upload is ignored unless I add a new name prop

EnigmaCurry opened this issue · 1 comments

I am testing uploading a single file in a form usiung svelte-file-dropzone, like this:

<script>
 import Dropzone from "svelte-file-dropzone";

  let files = {
    accepted: [],
    rejected: []
  };

  function handleFilesSelect(e) {
    const { acceptedFiles, fileRejections } = e.detail;
    files.accepted = [...acceptedFiles];
    files.rejected = [...fileRejections];
  }
</script>

<form action="/api/negative_harmony" method="post" enctype="multipart/form-data">
    <Dropzone on:drop={handleFilesSelect} multiple={false} accept="audio/midi" name="midi">Drag and
        drop a single MIDI file here or click to select a file.</Dropzone>

    {#if files.accepted.length}
        ✅ Selected file: {files.accepted[0].name}
    {:else if files.rejected.length}
        ❌ Invalid MIDI file: {files.rejected[0].name}
    {/if}

    <input type="checkbox" id="adjust_octaves" name="adjust_octaves" />

    <button type="submit">
        Download MIDI
    </button>

</form>

Because Dropzone currently does not have a name prop, the rendered tag does not receive any name attribute either. In my testing, not having a name field causes the input field to be skipped and not included in the request. This causes the file to not be uploaded by the form (verified in the browser network tab on submit, looking at the request, the request only includes the checkbox field).

So, I tried fixing this by forking this repository and adding the name prop here in my branch: 65f915b

And that works for me, so I'm wondering if this is a valid fix or if I am I misusing this software? (or html forms in general?) I cannot figure out how to upload a file without adding the name of the field, admittedly its been awhile since I've done this sort of thing, but I could not find an example with upload via form POST. I suspect this might break for the case of multiple files? I only cared about uploading a single file...

looks legit usecase.

Please create a PR. I will look into same.