SolidJS•11mo ago

Best way to upload files from a form with solid-start?

Hey folks, I was wondering what the best way to upload a file with solid-start would be? Is there an easy way to use createServerAction$ or should I expose an API-route? (I couldn't really find any fully fledged examples, so if you know any, I would be very happy if you'd share them with me 🙂 ) Thanks in advance!

7 Replies

wobsoriano•11mo ago

I assume something like this should work?

import { createServerAction$, json } from 'solid-start/server';

export default function EnrollmentPage() {
  const [upload, { Form }] = createServerAction$(async (form: FormData) => {
    // Do something with blob
    const blob = form.get('file') as Blob;

    // Send blob to external API
    // or save to folder

    return json({ success: true });
  });

  return (
    <Form enctype="multipart/form-data">
      <input type="file" name="file" />
      <button type="submit" disabled={upload.pending}>
        Upload
      </button>
    </Form>
  );
}

import { createServerAction$, json } from 'solid-start/server';

export default function EnrollmentPage() {
  const [upload, { Form }] = createServerAction$(async (form: FormData) => {
    // Do something with blob
    const blob = form.get('file') as Blob;

    // Send blob to external API
    // or save to folder

    return json({ success: true });
  });

  return (
    <Form enctype="multipart/form-data">
      <input type="file" name="file" />
      <button type="submit" disabled={upload.pending}>
        Upload
      </button>
    </Form>
  );
}

KarrotIsFake•11mo ago

What about dropping file on drag & drop surface, then stream it by websockets or how otherwise can we show progress bar?

oneiro•11mo ago

Thanks @wobsoriano I'll give that a try 🙂

wobsoriano•11mo ago

dont think that's possible with the current <Form> implementatiohn

KarrotIsFake•11mo ago

I've seen it on internet, drag and drop upload of files showing percentages...

wobsoriano•11mo ago

Check this solution with fetch and TransformStream - https://stackoverflow.com/a/69400632

KarrotIsFake•11mo ago

Cool.

Gaming

Programming

Best way to upload files from a form with solid-start?