Getting form file input from server side (Svelte) | Appwrite | Page 1

foggy lagoon Jul 16, 2023, 9:36 PM

#

I am trying create a bucket in the server side then create a file within the bucket using only server-side. How do I get the form file input in the server-side?

sour dust Jul 16, 2023, 10:29 PM

#

In order to create file in the server side you can use InputFile.fromPath from path.

const promise = storage.createFile('[BUCKET_ID]', '[FILE_ID]', InputFile.fromPath('/path/to/file.png', 'file.png'));

Like here: https://appwrite.io/docs/server/storage?sdk=nodejs-default#storageCreateFile

If you want to send file to a function from the client side it can't be done right now out of the box. The reason for that is when calling the executeFunction you can send only string as data.

A quick workaround would be to send the base64 of it. for that you'll need to remember that you're limit to 8K characters. but you can also find a way around it. check this: #1121497324145868873 message

foggy lagoon Jul 16, 2023, 10:30 PM

#

Crap.

sour dust Jul 16, 2023, 10:30 PM

#

Yep

foggy lagoon Jul 16, 2023, 10:31 PM

#

I want to do a client side version also like create the bucket server-side then send the id to the client-side. then make the file their but the issue is I have to set a timeout to wait for the bucket to be created then I cant access the form data

sour dust Jul 16, 2023, 10:33 PM

#

You mean like this

User executing a function
The function creates the bucket using the server side SDK, and gives the current user permissions.
The function sends the user the bucket id back
The users uses storage client side SDK to upload the file

foggy lagoon Jul 16, 2023, 10:38 PM

#

Yes

sour dust Jul 16, 2023, 10:38 PM

#

Then this should work

#

What is the problem

foggy lagoon Jul 16, 2023, 10:39 PM

#

The issue is that I have to wait 250ms for the bucket to be created and grab the id and send it to the client side for it to create the file. once that is all done I can no longer get the file from the form

#

if I don't set a timeout I get undefined

sour dust Jul 16, 2023, 10:40 PM

#

Can you show example of the code
So I can see more details of the big picture

foggy lagoon Jul 16, 2023, 10:40 PM

#

Yes one second

#

Do you want it in a pastebin or something?

sour dust Jul 16, 2023, 10:41 PM

#

Sure, whatever suites you

#

But

#

You can send the exact part in which you're getting the undefined

foggy lagoon Jul 16, 2023, 10:44 PM

#

    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 }) => {}
};
``` This gets the action of the form then runs the code. The id is then sent to the client-side using this
```export async function load() {
    return {
        post: {
            bucketId: createBucket
        }
    };
}

This all takes 250ms or so

#

One sec getting the rest

sour dust Jul 16, 2023, 10:45 PM

#

This is your function code?

foggy lagoon Jul 16, 2023, 10:46 PM

#

This is the server side. I am getting the client side rn only what is needed. Code is a mess rn so cleaning it up

sour dust Jul 16, 2023, 10:46 PM

#

Ohh, So this is server side on your own server code, not inside an Appwrite function?

foggy lagoon Jul 16, 2023, 10:47 PM

#

Correct

sour dust Jul 16, 2023, 10:47 PM

#

Good

foggy lagoon Jul 16, 2023, 10:47 PM

#

I am not using functions

sour dust Jul 16, 2023, 10:47 PM

#

In this function

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

Where is the createBucket
Is it this one?

  createBucket = await storage.createBucket....

foggy lagoon Jul 16, 2023, 10:48 PM

#

It is defined outside as a global var.

#

        //
        //    When this is ran as there is no timeout, the BucketId.$id is undefined
        //
        console.log(data.post.BucketId.$id);

        setTimeout(async () => {
            //
            //    When this is ran as there is a timeout of 250ms, the BucketId.$id is defined
            //
            console.log(data.post.BucketId.$id);
        }, 250);
    }```

sour dust Jul 16, 2023, 10:49 PM

#

What framework is it?

foggy lagoon Jul 16, 2023, 10:49 PM

#

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
        }
    };
}```

#

Show you the whole picture sorry

#

Svelte/Sveltekit

sour dust Jul 16, 2023, 10:51 PM

#

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

foggy lagoon Jul 16, 2023, 10:51 PM

#

    return {
        post: {
            bucketId: await createBucket
        }
    };
}```
I can do this

sour dust Jul 16, 2023, 10:53 PM

#

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()
        }
    };
}

foggy lagoon Jul 16, 2023, 10:55 PM

#


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

sour dust Jul 16, 2023, 10:58 PM

#

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.

foggy lagoon Jul 16, 2023, 10:59 PM

#

        action="?/createProject"
        method="post"
        on:submit|preventDefault={onSubmit}
        class="flex flex-col justify-center mt-5"
        use:enhance
    >```

#

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

sour dust Jul 16, 2023, 11:02 PM

#

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

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

foggy lagoon Jul 16, 2023, 11:03 PM

#

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)

grim yew Jul 17, 2023, 1:28 AM

#

foggy lagoon The issue is that I have to wait 250ms for the bucket to be created and grab the...

Why are you creating buckets at runtime like this?

foggy lagoon Jul 17, 2023, 1:40 AM

#

grim yew 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

grim yew Jul 17, 2023, 1:42 AM

#

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

What do you mean by set of image?

foggy lagoon Jul 17, 2023, 1:43 AM

#

Set of images sorry.

#

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

#

@grim yew

grim yew Jul 17, 2023, 1:52 AM

#

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

For each user? I still don't really understand

foggy lagoon Jul 17, 2023, 2:08 AM

#

grim yew 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

grim yew Jul 17, 2023, 2:23 AM

#

foggy lagoon Each of these is a project. This is for a portfilio page, I want to have a set o...

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

foggy lagoon Jul 17, 2023, 2:24 AM

#

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

Interresting why is that?

#

just like complications

grim yew Jul 17, 2023, 2:26 AM

#

foggy lagoon Interresting why is that?

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

#Getting form file input from server side (Svelte)