Skip to content

Add ID import to storage quick start examples #2417

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.

Sign up for GitHub

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

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add ID import to storage quick start examples #2417

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a2d71fb
Add ID import to storage quick start examples
suhasdeshpande Sep 17, 2025
0cb120f
Refactor code snippets for file upload examples
suhasdeshpande Sep 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
241 changes: 125 additions & 116 deletions src/routes/docs/products/storage/quick-start/+page.markdoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ To upload a file, add this to your app. For web apps, you can use the File objec

{% multicode %}
```client-web
import { Client, Storage } from "appwrite";
import { Client, Storage, ID } from "appwrite";

const client = new Client()
.setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
Expand All @@ -39,149 +39,154 @@ To upload a file, add this to your app. For web apps, you can use the File objec
}, function (error) {
console.log(error); // Failure
});
```
````

```server-nodejs
const sdk = require('node-appwrite');
const { InputFile } = require('node-appwrite/file');
const { ID } = require('node-appwrite');

const client = new sdk.Client()
.setEndpoint('https://cloud.appwrite.io/v1')
.setProject('<PROJECT_ID>')
.setKey('<API_KEY>');

const storage = new sdk.Storage(client);

// If running in a browser environment, you can use File directly
const browserFile = new File(['hello'], 'hello.txt');
await storage.createFile({
bucketId: '<BUCKET_ID>',
fileId: ID.unique(),
file: browserFile
});

```server-nodejs
const sdk = require('node-appwrite');
const { InputFile } = require('node-appwrite/file');
// If running in Node.js, use InputFile
const nodeFile = InputFile.fromPath('/path/to/file.jpg', 'file.jpg');
await storage.createFile({
bucketId: '<BUCKET_ID>',
fileId: ID.unique(),
file: nodeFile
});
```
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 17, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix CommonJS top‑level await and remove browser‑only File usage in server‑nodejs block.

Top‑level await is invalid with require(); and File(['...']) is browser‑only. Keep the Node path using InputFile and wrap in an async IIFE.

Apply this diff:

-// If running in a browser environment, you can use File directly
-const browserFile = new File(['hello'], 'hello.txt');
-await storage.createFile({
-  bucketId: '<BUCKET_ID>',
-  fileId: ID.unique(),
-  file: browserFile
-});
-
-// If running in Node.js, use InputFile
-const nodeFile = InputFile.fromPath('/path/to/file.jpg', 'file.jpg');
-await storage.createFile({
-  bucketId: '<BUCKET_ID>',
-  fileId: ID.unique(),
-  file: nodeFile
-});
+(async () => {
+  // Node.js: use InputFile
+  const nodeFile = InputFile.fromPath('/path/to/file.jpg', 'file.jpg');
+  const response = await storage.createFile({
+    bucketId: '<BUCKET_ID>',
+    fileId: ID.unique(),
+    file: nodeFile
+  });
+  console.log(response);
+})().catch(console.error);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// If running in a browser environment, you can use File directly
const browserFile = new File(['hello'], 'hello.txt');
await storage.createFile({
bucketId: '<BUCKET_ID>',
fileId: ID.unique(),
file: browserFile
});
```server-nodejs
const sdk = require('node-appwrite');
const { InputFile } = require('node-appwrite/file');
// If running in Node.js, use InputFile
const nodeFile = InputFile.fromPath('/path/to/file.jpg', 'file.jpg');
await storage.createFile({
bucketId: '<BUCKET_ID>',
fileId: ID.unique(),
file: nodeFile
});
```
(async () => {
// Node.js: use InputFile
const nodeFile = InputFile.fromPath('/path/to/file.jpg', 'file.jpg');
const response = await storage.createFile({
bucketId: '<BUCKET_ID>',
fileId: ID.unique(),
file: nodeFile
});
console.log(response);
})().catch(console.error);
🤖 Prompt for AI Agents 
In src/routes/docs/products/storage/quick-start/+page.markdoc around lines 56 to
71, the example mixes a browser-only File constructor and uses top-level await
which breaks in CommonJS; remove the browser File example from the
server/Node.js section, keep the InputFile.fromPath usage, and wrap the async
call in an immediately-invoked async function (async () => { ... })() so there
is no top-level await; ensure the code block demonstrates only the Node.js
approach with InputFile.fromPath and await inside the IIFE.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@suhasdeshpande this is a valid review, seems like we are showing browser file in nodejs block

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!


const client = new sdk.Client()
.setEndpoint('https://cloud.appwrite.io/v1')
.setProject('<PROJECT_ID>')
.setKey('<API_KEY>');
```client-flutter
import 'package:appwrite/appwrite.dart';

const storage = new sdk.Storage(client);
void main() { // Init SDK
final client = Client()
.setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
.setProject('<PROJECT_ID>');

// If running in a browser environment, you can use File directly
const browserFile = new File(['hello'], 'hello.txt');
await storage.createFile({
bucketId: '<BUCKET_ID>',
fileId: ID.unique(),
file: browserFile
});
final storage = Storage(client);

// If running in Node.js, use InputFile
const nodeFile = InputFile.fromPath('/path/to/file.jpg', 'file.jpg');
await storage.createFile({
final file = await storage.createFile(
bucketId: '<BUCKET_ID>',
fileId: ID.unique(),
file: nodeFile
});
```
file: InputFile.fromPath(path: './path-to-files/image.jpg', filename: 'image.jpg'),
);
}
```
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 17, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Flutter: make main async before using await.

Current snippet won’t compile as written.

Apply this diff:

-void main() { // Init SDK
+Future<void> main() async { // Init SDK
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
void main() { // Init SDK
final client = Client()
.setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
.setProject('<PROJECT_ID>');
// If running in a browser environment, you can use File directly
const browserFile = new File(['hello'], 'hello.txt');
await storage.createFile({
bucketId: '<BUCKET_ID>',
fileId: ID.unique(),
file: browserFile
});
final storage = Storage(client);
// If running in Node.js, use InputFile
const nodeFile = InputFile.fromPath('/path/to/file.jpg', 'file.jpg');
await storage.createFile({
final file = await storage.createFile(
bucketId: '<BUCKET_ID>',
fileId: ID.unique(),
file: nodeFile
});
```
file: InputFile.fromPath(path: './path-to-files/image.jpg', filename: 'image.jpg'),
);
}
```
Future<void> main() async { // Init SDK
final client = Client()
.setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
.setProject('<PROJECT_ID>');
final storage = Storage(client);
final file = await storage.createFile(
bucketId: '<BUCKET_ID>',
fileId: ID.unique(),
file: InputFile.fromPath(path: './path-to-files/image.jpg', filename: 'image.jpg'),
);
}
🤖 Prompt for AI Agents 
In src/routes/docs/products/storage/quick-start/+page.markdoc around lines 76 to
89, the Flutter snippet uses await inside main but declares it as a synchronous
void function; change the signature to an asynchronous main (e.g., Future<void>
main() async) so await is valid, and ensure any necessary async imports (if not
already present) are included so the snippet compiles.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@suhasdeshpande valid as well, main is not async

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!


```client-flutter
import 'package:appwrite/appwrite.dart';
```client-apple
import Appwrite

void main() { // Init SDK
final client = Client()
.setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
.setProject('<PROJECT_ID>');
func main() async throws {
let client = Client()
.setEndpoint("https://<REGION>.cloud.appwrite.io/v1")
.setProject("<PROJECT_ID>")

final storage = Storage(client);
let storage = Storage(client)

final file = await storage.createFile(
bucketId: '<BUCKET_ID>',
fileId: ID.unique(),
file: InputFile.fromPath(path: './path-to-files/image.jpg', filename: 'image.jpg'),
);
}
```
```client-apple
import Appwrite

func main() async throws {
let client = Client()
.setEndpoint("https://<REGION>.cloud.appwrite.io/v1")
.setProject("<PROJECT_ID>")

let storage = Storage(client)

let file = try await storage.createFile(
bucketId: "<BUCKET_ID>",
fileId: ID.unique(),
file: InputFile.fromBuffer(yourByteBuffer,
filename: "image.jpg",
mimeType: "image/jpeg"
)
)
}
```
```client-android-kotlin
import io.appwrite.Client
import io.appwrite.services.Storage

suspend fun main() {
val client = Client(applicationContext)
.setEndpoint("https://<REGION>.cloud.appwrite.io/v1") // Your API Endpoint
.setProject("<PROJECT_ID>") // Your project ID

val storage = Storage(client)

val file = storage.createFile(
bucketId = "<BUCKET_ID>",
fileId = ID.unique(),
file = File("./path-to-files/image.jpg"),
)
}
```

```client-react-native
import { Client, Storage, ID } from 'react-native-appwrite';
let file = try await storage.createFile(
bucketId: "<BUCKET_ID>",
fileId: ID.unique(),
file: InputFile.fromBuffer(yourByteBuffer,
filename: "image.jpg",
mimeType: "image/jpeg"
)
)
}
```

const client = new Client()
.setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
.setProject('<PROJECT_ID>');
```client-android-kotlin
import io.appwrite.Client
import io.appwrite.services.Storage
import io.appwrite.ID

const storage = new Storage(client);
suspend fun main() {
val client = Client(applicationContext)
.setEndpoint("https://<REGION>.cloud.appwrite.io/v1") // Your API Endpoint
.setProject("<PROJECT_ID>") // Your project ID

const promise = storage.createFile(
'<BUCKET_ID>',
ID.unique(),
{
name: 'image.jpg',
type: 'image/jpeg',
size: 1234567,
uri: 'file:///path/to/file.jpg',
}
);
val storage = Storage(client)

promise.then(function (response) {
console.log(response); // Success
}, function (error) {
console.log(error); // Failure
});
```
val file = storage.createFile(
bucketId = "<BUCKET_ID>",
fileId = ID.unique(),
file = File("./path-to-files/image.jpg"),
)
}
```

```http
POST /v1/storage/buckets/{bucketId}/files HTTP/1.1
Content-Type: multipart/form-data; boundary="cec8e8123c05ba25"
Content-Length: *Length of your entity body in bytes*
X-Appwrite-Project: <PROJECT_ID>
```client-react-native
import { Client, Storage, ID } from 'react-native-appwrite';

--cec8e8123c05ba25
Content-Disposition: form-data; name="operations"
const client = new Client()
.setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
.setProject('<PROJECT_ID>');

{ "query": "mutation CreateFile($bucketId: String!, $fileId: String!, $file: InputFile!) { storageCreateFile(bucketId: $bucketId, fileId: $fileId, file: $file) { id } }", "variables": { "bucketId": "<BUCKET_ID>", "fileId": "<FILE_ID>", "file": null } }
--cec8e8123c05ba25
Content-Disposition: form-data; name="map"
const storage = new Storage(client);

{ "0": ["variables.file"] }
--cec8e8123c05ba25
Content-Disposition: form-data; name="0"; filename="file.txt"
Content-Type: text/plain
const promise = storage.createFile(
'<BUCKET_ID>',
ID.unique(),
{
name: 'image.jpg',
type: 'image/jpeg',
size: 1234567,
uri: 'file:///path/to/file.jpg',
}
);
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 17, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

🧩 Analysis chain

React Native signature parity: confirm tuple vs object style.

Other JS SDKs use object params; RN here uses positional args. Verify the installed react-native-appwrite version and align the snippet accordingly.

🌐 Web query:

Does the latest react-native-appwrite Storage.createFile accept object parameters ({ bucketId, fileId, file }) or positional (bucketId, fileId, file)? Cite official docs and show the recommended example.

💡 Result:

Short answer: The current react-native-appwrite SDK uses an options object (named parameters). Example from the official React Native docs shows createFile({ bucketId, fileId, file, permissions }). [1] An older (1.5.x) docs page used positional args (bucketId, fileId, file). [2]

Recommended example (from official React Native docs):
const result = await storage.createFile({
bucketId: '<BUCKET_ID>',
fileId: '<FILE_ID>',
file: await pickSingle(),
permissions: ["read('any')"]
});
console.log(result);. [1]

Sources:
[1] Appwrite — Client React Native Storage (createFile example). (appwrite.io)
[2] Appwrite 1.5.x — Client React Native Storage (positional example). (appwrite.io)

Citations:

Update React Native example to use named (options) parameters

Replace the positional-argument example in src/routes/docs/products/storage/quick-start/+page.markdoc (lines 141–150) with the React Native SDK signature that accepts an options object — e.g.:

const result = await storage.createFile({
bucketId: '<BUCKET_ID>',
fileId: ID.unique(),
file: await pickSingle(),
permissions: ["read('any')"]
});

🤖 Prompt for AI Agents 
In src/routes/docs/products/storage/quick-start/+page.markdoc around lines 141
to 150, replace the positional-argument React Native example with the SDK's
named options signature: call storage.createFile with a single options object
containing bucketId, fileId (e.g., ID.unique()), file (e.g., await pickSingle()
for RN), and any permissions array (e.g., ["read('any')"]); make the example use
await to capture the result and rename the variable to result to match the
example in the comment.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@suhasdeshpande please fix this too, we shifted to using option params everywhere

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!


File content.
promise.then(function (response) {
console.log(response); // Success
}, function (error) {
console.log(error); // Failure
});
```

--cec8e8123c05ba25--
```
```http
POST /v1/storage/buckets/{bucketId}/files HTTP/1.1
Content-Type: multipart/form-data; boundary="cec8e8123c05ba25"
Content-Length: *Length of your entity body in bytes*
X-Appwrite-Project: <PROJECT_ID>

{% /multicode %}
--cec8e8123c05ba25
Content-Disposition: form-data; name="operations"

{ "query": "mutation CreateFile($bucketId: String!, $fileId: String!, $file: InputFile!) { storageCreateFile(bucketId: $bucketId, fileId: $fileId, file: $file) { id } }", "variables": { "bucketId": "<BUCKET_ID>", "fileId": "<FILE_ID>", "file": null } }
--cec8e8123c05ba25
Content-Disposition: form-data; name="map"

{ "0": ["variables.file"] }
--cec8e8123c05ba25
Content-Disposition: form-data; name="0"; filename="file.txt"
Content-Type: text/plain

File content.

--cec8e8123c05ba25--
```

{% /multicode %}

# Download file {% #download-file %}

To download a file, use the `getFileDownload` method.

{% multicode %}

```client-web
import { Client, Storage } from "appwrite";

Expand All @@ -201,6 +206,7 @@ const result = storage.getFileDownload({

console.log(result); // Resource URL
```

```client-flutter
import 'package:appwrite/appwrite.dart';

Expand Down Expand Up @@ -239,6 +245,7 @@ FutureBuilder(
},
);
```

```client-apple
import Appwrite

Expand All @@ -255,6 +262,7 @@ func main() async throws {
print(String(describing: byteBuffer))
}
```

```client-android-kotlin
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
Expand Down Expand Up @@ -299,4 +307,5 @@ const result = storage.getFileDownload({

console.log(result); // Resource URL
```

{% /multicode %}
Loading