Skip to content
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.

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

docs: Add React Native samples to Storage Quick Start #1064

Open
wants to merge 35 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 32 commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
27f75d5
docs: add client react native code snippet sample to docs/products/st…
choir27 Jun 20, 2024
ebb00f7
docs: update code snippets based on client-react-native manual test
choir27 Jun 21, 2024
6ec110e
docs: add specific parameters for FILE type in client-react-native
choir27 Jun 24, 2024
c7fc26b
docs: add field to uri object in code snippet
choir27 Jun 25, 2024
fe4b26f
docs: update file type object properties with FILE properties from co…
choir27 Jun 25, 2024
678f269
docs: update file object properties in code snippet based on testing …
choir27 Jun 25, 2024
655c0d3
docs: replace double quotes with single quotes, change object to mult…
choir27 Jun 26, 2024
56c1460
docs: replace double quotes with single quotes for react-native-appwrite
choir27 Jun 26, 2024
2ffe92b
docs: replace placeholder [] for <> in code snippets
choir27 Jun 26, 2024
a22e4f7
docs: remove Permission from code snippets to remove optional paramet…
choir27 Jun 27, 2024
7234c11
chore: fix spacing in blog post
choir27 Jun 27, 2024
9598a60
docs: revert flutter, android-kotlin, and client-apple file object pr…
choir27 Jun 28, 2024
6da8fb5
chore: remove extra space
choir27 Jun 28, 2024
b5759ef
update http code snipeet
choir27 Jun 28, 2024
b21be3f
Update src/routes/docs/products/storage/quick-start/+page.markdoc
choir27 Jul 2, 2024
2a7caa3
Update src/routes/docs/products/storage/quick-start/+page.markdoc
choir27 Jul 2, 2024
4e57243
docs: revert web file object to previous iteration, include imports f…
choir27 Jul 2, 2024
180aaa0
docs: replace double quotes for single quotes and update image type f…
choir27 Jul 2, 2024
0280cc3
replace setProject argument with placeholder <PROJECT_ID for consistency
choir27 Jul 2, 2024
dd9610e
Merge branch 'main' into docs-react-native-samples
choir27 Jul 2, 2024
0e45184
Merge branch 'main' into docs-react-native-samples
choir27 Jul 8, 2024
babfa8e
docs: change file comment to sentence case for consistency, update qu…
choir27 Jul 8, 2024
e7f0d1e
Merge branch 'docs-react-native-samples' of https://github.com/appwri…
choir27 Jul 8, 2024
3a8a58d
Merge branch 'main' into docs-react-native-samples
choir27 Jul 15, 2024
113112b
Update src/routes/docs/products/storage/quick-start/+page.markdoc
choir27 Jul 15, 2024
4c001ab
Update src/routes/docs/products/storage/quick-start/+page.markdoc
choir27 Jul 15, 2024
9e24a53
docs: fix duplicate import to ensure accuracy. Add underscore to main…
choir27 Jul 15, 2024
48debf9
docs: remove redundant comment
choir27 Jul 15, 2024
3d32999
Merge branch 'main' into docs-react-native-samples
choir27 Jul 16, 2024
a23eff1
docs: Align comments and replace single quotes for double quotes in k…
choir27 Jul 19, 2024
aa9fd32
docs: update indentation for code snippet
choir27 Jul 19, 2024
27b8aeb
docs: remove setEndpoint from code snippets in storage quick start
choir27 Jul 20, 2024
605ad36
Update src/routes/docs/products/storage/quick-start/+page.markdoc
choir27 Jul 25, 2024
cf823e3
docs: add quotes to match consistency with other code snippet example…
choir27 Aug 13, 2024
dd67e5f
Merge branch 'main' into docs-react-native-samples
choir27 Aug 13, 2024
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
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ The latest version of Appwrite was built with the help of over 20 developers, tr
- [@amanpatel23](https://github.com/amanpatel23), who [fixed certain pattern input validation](https://github.com/appwrite/console/pull/702)
- [@programmingwithrp](https://github.com/programmingwithrp), who [updated links for the Cron syntax](https://github.com/appwrite/console/pull/639)
- [@sourabpramanik](https://github.com/sourabpramanik), who [helped fix table overflow in mobile view](https://github.com/appwrite/console/pull/666)
- [@sourabpramanik](https://github.com/sourabpramanik), who[ helped fix the console organization project count limit](https://github.com/appwrite/console/pull/699)
- [@sourabpramanik](https://github.com/sourabpramanik), who [helped fix the console organization project count limit](https://github.com/appwrite/console/pull/699)
- [@AmitGurbani](https://github.com/AmitGurbani), who [fixed clearing of the DateTime attribute](https://github.com/appwrite/console/pull/594)
- [@sahalsaad](https://github.com/sahalsaad), who [added nullable option to the DateTime field](https://github.com/appwrite/console/pull/608)
- [@FreSauce](https://github.com/FreSauce), who [fixed missing separator for keycodes comparison](https://github.com/appwrite/console/pull/585)
Expand Down
135 changes: 87 additions & 48 deletions src/routes/docs/products/storage/quick-start/+page.markdoc
Original file line number Diff line number Diff line change
Expand Up @@ -20,24 +20,29 @@ To upload a file, add this to you web, Flutter, Apple, or Android app.

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

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

const storage = new Storage(client);

const promise = storage.createFile(
'[BUCKET_ID]',
ID.unique(),
document.getElementById('uploader').files[0]
"<BUCKET_ID>",
ID.unique(),
{
name: "file.txt",
type: "text/plain",
size: 37967,
uri: "file://text.png",
choir27 marked this conversation as resolved.
Show resolved Hide resolved
},
);


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

Expand All @@ -46,30 +51,29 @@ To upload a file, add this to you web, Flutter, Apple, or Android app.

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

final storage = Storage(client);

final file = await storage.createFile(
bucketId: '[BUCKET_ID]',
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://cloud.appwrite.io/v1")
.setProject("<PROJECT_ID>")

let storage = Storage(client)

let file = try await storage.createFile(
bucketId: "[BUCKET_ID]",
bucketId: "<BUCKET_ID>",
fileId: ID.unique(),
file: InputFile.fromBuffer(yourByteBuffer,
filename: "image.jpg",
Expand All @@ -78,48 +82,69 @@ To upload a file, add this to you web, Flutter, Apple, or Android app.
)
}
```

```client-android-kotlin
import io.appwrite.Client
import io.appwrite.services.Storage
import io.appwrite.models.InputFile
import io.appwrite.ID

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

val storage = Storage(client)

val file = storage.createFile(
bucketId = "[BUCKET_ID]",
bucketId = "<BUCKET_ID>",
fileId = ID.unique(),
stnguyen90 marked this conversation as resolved.
Show resolved Hide resolved
file = File("./path-to-files/image.jpg"),
file = InputFile.fromPath("./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]
POST https://cloud.appwrite.io/v1/storage/buckets/<BUCKET_ID>/files HTTP/1.1
X-Appwrite-Project: <PROJECT_ID>
X-Appwrite-Response-Format: 1.5.0
Cookie: <COOKIE>
Content-Type: multipart/form-data; boundary=---1234
Content-Length: <LENGTH>
-----1234
Content-Disposition: form-data; name='fileId'
<FILE_ID>
-----1234
Content-Disposition: form-data; name='file'; filename='image.jpg'
Content-Type: image/jpg
<FILE_CONTENT>
-----1234
Copy link
Contributor

Choose a reason for hiding this comment

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

The new lines are incorrect. Please look at samples of how this should be formatted and make sure it matches.

```

--cec8e8123c05ba25
Content-Disposition: form-data; name="operations"
```client-react-native
import { Client, Storage, ID } from 'react-native-appwrite';

{ "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 client = new Client()
.setProject('<PROJECT_ID>'); // Your project ID

{ "0": ["variables.file"] }
--cec8e8123c05ba25
Content-Disposition: form-data; name="0"; filename="file.txt"
Content-Type: text/plain
const storage = new Storage(client);

File content.
const promise = await storage.createFile(
'<BUCKET_ID>',
ID.unique(),
{
name: 'image.jpg',
type: 'image/jpg',
uri: 'file://user/image.jpg',
size: 183799
}
stnguyen90 marked this conversation as resolved.
Show resolved Hide resolved
);

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

{% /multicode %}


Expand All @@ -128,21 +153,21 @@ To download a file, use the `getFileDownload` method.

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

const client = new Client();

const storage = new Storage(client);

client
.setEndpoint('https://cloud.appwrite.io/v1') // Your API Endpoint
.setProject('5df5acd0d48c2') // Your project ID
.setProject('<PROJECT_ID>') // Your project ID
;

const result = storage.getFileDownload('[BUCKET_ID]', '[FILE_ID]');
const result = storage.getFileDownload('<BUCKET_ID>', '<FILE_ID>');

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

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

Expand All @@ -151,13 +176,12 @@ void main() { // Init SDK
Storage storage = Storage(client);

client
.setEndpoint('https://cloud.appwrite.io/v1') // Your API Endpoint
.setProject('5df5acd0d48c2') // Your project ID
.setProject('<PROJECT_ID>') // Your project ID
;
// downloading file
Future result = storage.getFileDownload(
bucketId: '[BUCKET_ID]',
fileId: '[FILE_ID]',
bucketId: '<BUCKET_ID>',
fileId: '<FILE_ID>',
).then((bytes) {
final file = File('path_to_file/filename.ext');
file.writeAsBytesSync(bytes)
Expand All @@ -169,8 +193,8 @@ void main() { // Init SDK
//displaying image preview
FutureBuilder(
future: storage.getFileDownload(
bucketId: '[BUCKET_ID]',
fileId: '[FILE_ID]',
bucketId: '<BUCKET_ID>',
fileId: '<FILE_ID>',
), //works for both public file and private file, for private files you need to be logged in
builder: (context, snapshot) {
return snapshot.hasData && snapshot.data != null
Expand All @@ -181,22 +205,23 @@ FutureBuilder(
},
);
```

```client-apple
import Appwrite

func main() async throws {
let client = Client()
.setEndpoint("https://cloud.appwrite.io/v1") // Your API Endpoint
.setProject("5df5acd0d48c2") // Your project ID
.setProject("<PROJECT_ID>") // Your project ID
let storage = Storage(client)
let byteBuffer = try await storage.getFileDownload(
bucketId: "[BUCKET_ID]",
fileId: "[FILE_ID]"
bucketId: "<BUCKET_ID>",
fileId: "<FILE_ID>"
)

print(String(describing: byteBuffer))
}
```

```client-android-kotlin
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
Expand All @@ -211,17 +236,31 @@ class MainActivity : AppCompatActivity() {
setContentView(R.layout.activity_main)

val client = Client(applicationContext)
.setEndpoint("https://cloud.appwrite.io/v1") // Your API Endpoint
.setProject("5df5acd0d48c2") // Your project ID
.setProject("<PROJECT_ID>") // Your project ID

val storage = Storage(client)

val result = storage.getFileDownload(
bucketId = "[BUCKET_ID]",
fileId = "[FILE_ID]"
bucketId = "<BUCKET_ID>",
fileId = "<FILE_ID>"
)
println(result); // Resource URL
}
}
```

```client-react-native
import { Client, Storage, ID } from 'react-native-appwrite';

const client = new Client();

const storage = new Storage(client);

client
.setProject('<PROJECT_ID>');

const result = storage.getFileDownload('<BUCKET_ID>', '<FILE_ID>');

console.log(result); // Resource URL
```
{% /multicode %}
Loading