.setKey is not a function && .listStorage is not a function

Hi, I tried to create a listBuckets() function using your documentation. Unfortunately I have some errors, like for example that .setkey is supposedly not a function. When I remove this I am told that .listBuckets() is not a function. Please find attached the code. I am using nextjs 14.

import { Account, Storage, Client } from "appwrite";

const client = new Client();

client
    .setEndpoint('https://cloud.appwrite.io/v1')
    .setProject('my project id')
    .setKey('my api key')
;

async function listfolders () {
    const storage = new Storage(client);
    const promise = storage.listBuckets();

    promise.then(function (response) {
        console.log(response);
    }, function (error) {
        console.log(error);
    });
}

Yes, these methods are not available in the client SDK. Please see here for the difference between client and server SDKs: https://appwrite.io/docs/sdks

Okay, thank you I will have a look into it!

do you have an example on how I can use this function with next js?

You would need to use the server SDK. It's a different package. Make sure it only runs server side

Hmm, I currently have a project in which I am creating a front end for a 360 degree tour. I thought Appwrite is a good way to store this data, but I just realized myself that you can't create multiple subfolders. A 360 degree tour is created from several 360 degree images and then has the following folder structure:
[project_name] ->
/app-files
/index.html
i/mg (there will be all the controll icons be saved)
/data.js
/style.css
/tiles (where the 360 degree photos will be stored)
/0
/1
/2 ... for each room a new folder in which there is another folder in which there is another folder in which there is another folder in which the 360 degree pictures are stored
In the Index.html you can see the complete 360 degree tour. I need a way to safely transfer the data between my backend server (if needed) and my front end where the index.html is then displayed.

Do you know any good methods to implement this?

I thought I could maybe make an api request in the frontend to my backend server, on which I then return the index.html in the api request

For folder structure, I recommend creating a collection for your files and you can include metadata that you need. Maybe you could have a collection of rooms and each room document has a files attribute that's an array of file IDs

Uhh your index.html usually has little to do with the images ... usually you have an img element with a src attribute that's a URL. So, the browser, then fetches the file.

Sorry, I think I expressed myself slightly unclear.

So I'll explain it again from the beginning :). There is a program with which you can create 360 degree tours. I implement this program with a frame on my website.

So now someone creates a 360 degree tour and saves it. This consists of a zip folder with:
a js, css, metadata folder and an index.html.

I can display the 360 degree tour correctly in the browser via the index.html.

If, for example, this 360 degree tour is uploaded to my dashboard, I would like to store it securely (I had hoped that this could somehow be done via the AppWrite storage).

If it were only images, it would be clear how I could do it, via the storage and store the images in a database in an array, but since this is a whole folder that you can't really split up, it proves to be a challenge.

If you weren't using Appwrite, how would you do this?