Upload Image with unique ID but check file extension

Hi all,

I'm new to appwrite and bulding my first Nuxt3 Application with appwrite.

I have a form to upload images. I set in my storage policies that only jpg, png and gifs are allowed. For the filename I used ID.unique() to generate unique id from appwrite. But I can't add than the file extension.

Is there a best practice for file upload with the web SDK?

const response: ImageMetadata = await storage.createFile(
        "64be9c5a5a386bde94e2",
        ID.unique(),
        renamedFile,
      );

Is this client side or server side?

For the filename I used ID.unique() to generate unique id from appwrite

btw, that's the file ID not file name. the file name automatically comes from the file on the web

Upload is on the client side. Yes I renamed also the file for this.

How are you renaming the file client side?

for (let i = 0; i < imagesToUpload.value.length; i++) {
    const file = imagesToUpload.value[i];
    const fileid = `${uuidv4()}`;
    const renamedFile = new File([file], fileid);

    try {
      const response: ImageMetadata = await storage.createFile(
        "64be9c5a5a386bde94e2",
        fileid,
        renamedFile,
      );

I used uuidv4 as Unique ID library after it doesn't worked with ID.unique() but it feels a little bit odd. This is why I asked for best pratice.

And it only works without storage policy. 😦

interesting i didn't think you could rename files in the browser...

why do you need to rename it anyways?

because it will be always images taken by smartphones and there could be double ids if it just increment the number in your image roll.

renaming works this way. 🙂

there's nothing wrong with duplicate file names. Why not use ID.unique() for unique file ids?

then perhaps you can add the file extension to the file name

and how do I access the file later if I want to display it on a website? By ID or by the file name?

always by ID