Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

File Upload not validating in version 2 docs #534

Closed
eftichis0202 opened this issue Dec 18, 2024 · 2 comments
Closed

File Upload not validating in version 2 docs #534

eftichis0202 opened this issue Dec 18, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@eftichis0202
Copy link

eftichis0202 commented Dec 18, 2024

Description
After migrating to v2, the file upload stopped working. I then went through the docs and copied the exact same code as in the Single File Upload Doc example, and the validation keeps failing on the server side. I don't know how to solve this if even the example from the official superform docs doesn't work..

here are the versions of the dependencies i am using in my stack:

image

schema & server side

// NOTE: Import fail from Superforms, not from @sveltejs/kit!
import { superValidate, fail, message } from 'sveltekit-superforms';
import { zod } from 'sveltekit-superforms/adapters';
import { z } from 'zod';

const schema = z.object({
  image: z
    .instanceof(File, { message: 'Please upload a file.'})
    .refine((f) => f.size < 100_000, 'Max 100 kB upload size.')
});

export const load = async () => {
  return { 
    form: await superValidate(zod(schema))
  }
};

export const actions = {
  default: async ({ request }) => {
    const form = await superValidate(request, zod(schema));

    if (!form.valid) {
      return fail(400, { form });
    }

    // TODO: Do something with the image
    console.log(form.data.image);

    return message(form, 'You have uploaded a valid file!');
  }
};

frontend:

<script lang="ts">
  import { superForm, fileProxy } from 'sveltekit-superforms'
  import { zodClient } from 'sveltekit-superforms/adapters'
  import { schema } from './schema.js'

  let { data } = $props();

  const { form, enhance, errors } = superForm(data.form, {
    validators: zodClient(schema)
  })

  const file = fileProxy(form, 'image')
</script>

<form method="POST" enctype="multipart/form-data" use:enhance>
  <input
    type="file"
    name="image"
    accept="image/png, image/jpeg"
    bind:files={$file}
  />
  {#if $errors.image}<span>{$errors.image}</span>{/if}
  <button>Submit</button>
</form>
@eftichis0202 eftichis0202 added the bug Something isn't working label Dec 18, 2024
@eftichis0202
Copy link
Author

Using superdebug, this is when i chose the file:

image

and when i submit:
image

@eftichis0202
Copy link
Author

After 3 days of trial and error I found the issue - I had

+  define: {
+    SUPERFORMS_LEGACY: true
+  }

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant