[FIXED] Kann keine Videodatei von +page.svelte zu +page.server.ts in einem Formular übergeben

Ausgabe

Ich versuche, meine Video-Upload-Funktion vom Client auf den Server zu verschieben. Ich habe jedoch Probleme damit, die Videodatei in einem Formular an den Server zu übergeben.

Ich verwende “svelte-file-dropzone”, um die Datei abzurufen, einige Verarbeitungen werden durchgeführt und dann versuche ich, die Datei über ein verstecktes Dateieingabe-Tag wie folgt zu übermitteln:

<form  action="?/upload" method="POST" enctype="multipart/form-data" use:enhance={handleSubmit} id="upload" name="upload">
    <input hidden type="file" id="accepted-file" name="accepted-file" accept="video/*" bind:value={accepted}>

    <div class="field">
        <div class="control">
            <button type="submit" class="button is-success is-fullwidth">Submit Video</button>
        </div>
    </div>
</form>

Wenn ich auf der Client-Seite den Wert “akzeptiert” logge, ist alles so, wie es sein sollte:

{
    path: "test.mov"
    lastModified: 1640425487561
    lastModifiedDate: Sat Dec 25 2021 01:44:47 GMT-0800 (Pacific Standard 
        Time) 
    name: "test.mov"
    size: 12458107
    type: "video/quicktime"
    webkitRelativePath: ""
}

… aber wenn ich versuche, auf die Datei auf dem Server zuzugreifen:

export const actions: Actions = {
    async upload({ request }) {
        const uploadFormData = await request.formData();

        const accepted = uploadFormData.get('accepted-file') as File;
        console.log("accepted file: ", accepted);

        return { accepted };
    }
}

…es gibt keine Datei, dh “accepted” ist leer.

Ich denke, dass das Problem etwas damit zu tun haben könnte, wie ich die Datei an die versteckte Eingabe anhänge, bin mir aber nicht sicher.

Es ist erwähnenswert, dass mein Code unter allen anderen Umständen funktioniert, er scheint nur in diesem Fall fehlzuschlagen. Ich habe viele Problemumgehungen ausprobiert, kann aber anscheinend nicht auf die Datei zugreifen, egal was ich versuche.

Ich habe mit diesen neuen SvelteKit-Änderungen zu kämpfen, und dies ist auch mein erster Versuch, TypeScript zu verwenden. Irgendwelche Gedanken oder Vorschläge würden sehr geschätzt, da ich derzeit völlig verloren bin. Vielen Dank für Ihre Zeit.

Lösung

Sie können eine Dateieingabe nicht einfach valueso setzen. Um Ihre Datei tatsächlich zu senden, müssen Sie die filesListe der Dateieingabe ändern.

Z.B

<input type="file" name="accepted-file"
    style:display="none"
    use:setFile />

/** Svelte action to transfer the file to the input */
function setFile(input: HTMLInputElement) {
    const data = new DataTransfer();
    data.items.add(accepted); // Assuming that `accepted` is a File instance
    input.files = data.files;
}

(Wenn die Eingabe immer vorhanden ist und nicht nur einmal erstellt wird, nachdem die Datei verarbeitet wurde, können Sie bind:thisanstelle einer Aktion verwenden, um eine Referenz auf die Eingabe zu erhalten, und dann aktualisieren files, wo immer Sie die Verarbeitung durchführen. Sie könnten die Eingabe auch einschließen #key acceptedum seine Wiederherstellung zu erzwingen.)

Beantwortet von – HB

Antwort geprüft von – Mary Flores (FixError Volunteer)