Getting form file input from server side (Svelte)

I'm not sure about SvelteKit But I think this line

 post: {
  bucketId: createBucket
 }

Will be sent sync, meaning you won't get the createBucket value. You must add some await in that post

But you'll to wait to the createProject function

Or something similar to this

async function getBucket() {
  const bucketId = await actions.createProject(/* Pass your data*/);
  return bucketId;
}

export async function load() {
    return {
        post: {
            bucketId: await getBucket()
        }
    };
}

import sdk, { ID, Permission, Role } from 'node-appwrite';
import { PUBLIC_API_ENDPOINT, PUBLIC_PROJECT_ID } from '$env/static/public';
import { PRIVATE_API_KEY } from '$env/static/private';

const client = new sdk.Client();
// const account = new sdk.Account(client);
// const databases = new sdk.Databases(client);
const storage = new sdk.Storage(client);

client
    .setEndpoint(PUBLIC_API_ENDPOINT) // Your API Endpoint
    .setProject(PUBLIC_PROJECT_ID) // Your project ID
    .setKey(PRIVATE_API_KEY); // Your secret API key

let createBucket;

export const actions = {
    createProject: async ({ request }) => {
        const formData = await request.formData();
        const Client = formData.get('Client');

        createBucket = await storage.createBucket(ID.unique(), Client, [
            Permission.create(Role.user('64b1c7848008d470d744')),
            Permission.update(Role.user('64b1c7848008d470d744')),
            Permission.read(Role.user('64b1c7848008d470d744'))
        ]);

        // bucketId = createBucket.$id

        console.log(createBucket.$id);

        // console.log(Client);
    },
    imgUpload: async ({ request }) => {}
};

export async function load() {
    return {
        post: {
            bucketId: createBucket
        }
    };
}

This works just fine. So here is the output of the id on the client-side

This one is the id of the bucket it created before this last one. 64b4752051094e8fd08f Outside timeout

This one is correct 64b4753caa58d8fe56de Outside timeout

So you first send a form action to createPost and only then you're checking for data.post.bucketId? From what I see the second will happened first make you get the bucket ID each time.

use:enhance allows me to send form data to both client and server side using post method for server side and on:submit for client side function

I see, Probably it best to wait for some one more expert in using <:svelte:1084088345824591912>

What I think it has to do with the fact that bucketId is sent back before the form has ben submitted

The form is submitted when the onSubmit funtion runs and when the from actions is ran

Thank you for your time

Getting form file input from server side (Svelte)

Why are you creating buckets at runtime like this?

I was going to create a bucket for each set of image to keep database organized

What do you mean by set of image?

Set of images sorry.

Like one project Might have 4 img and I want then to all be together

@Steven

For each user? I still don't really understand

Each of these is a project. This is for a portfilio page, I want to have a set of img for each project that is in their own buckets

I typically advise against creating collections or buckets at runtime like this

Interresting why is that?

just like complications

A simple flat design is easier to maintain. A collection or bucket should be a type of data. If you have the same type of data in multiple collections or buckets, you should really have a good reason for it

Ok thank you I will just stay with one storage bucket then