LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-06 04:22:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into snyk-upgrade-d8d87e85f9cc62bdb61eb1ef908fbb9b

Browse Source
This commit is contained in:
Evan
2025-04-30 16:17:57 -07:00
committed by GitHub
parent 42f060ca4a 9619e24638
commit 69cd18954a
3 changed files with 279 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/routes/docs/products/storage/images/+page.markdoc
View File

@@ -106,8 +106,8 @@ void main() { // Init SDK
//displaying image preview
FutureBuilder(
future: storage.getFilePreview(
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
@@ -183,5 +183,43 @@ class MainActivity : AppCompatActivity() {
}
}
```
```client-react-native
import { Client, Storage, ImageGravity } from 'react-native-appwrite';
import { Image } from 'react-native';
const client = new Client()
.setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
.setProject('<PROJECT_ID>');
const storage = new Storage(client);
// Get image with transformations
const result = storage.getFilePreview(
'photos', // bucket ID
'sunset.png', // file ID
1800, // width, will be resized using this value
0, // height, ignored when 0
ImageGravity.Center,// crop center
90, // slight compression
5, // border width
'CDCA30', // border color
15, // border radius
1, // full opacity
0, // no rotation
'FFFFFF', // background color
'jpg' // output jpg format
);
console.log(result); // Resource URL
// Usage in a component
const ImagePreview = () => (
<Image
source={{ uri: result.toString() }}
style={{ width: 300, height: 200 }}
resizeMode="contain"
/>
);
```
{% /multicode %}

41
src/routes/docs/products/storage/quick-start/+page.markdoc
View File

@@ -117,6 +117,33 @@ To upload a file, add this to your app. For web apps, you can use the File objec
}
```
```client-react-native
import { Client, Storage, ID } from 'react-native-appwrite';
const client = new Client()
.setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
.setProject('<PROJECT_ID>');
const storage = new Storage(client);
const promise = storage.createFile(
'<BUCKET_ID>',
ID.unique(),
{
name: 'image.jpg',
type: 'image/jpeg',
size: 1234567,
uri: 'file:///path/to/file.jpg',
}
);
promise.then(function (response) {
console.log(response); // Success
}, function (error) {
console.log(error); // Failure
});
```
```http
POST /v1/storage/buckets/{bucketId}/files HTTP/1.1
Content-Type: multipart/form-data; boundary="cec8e8123c05ba25"
@@ -244,4 +271,18 @@ class MainActivity : AppCompatActivity() {
}
}
```
```client-react-native
import { Client, Storage } from 'react-native-appwrite';
const client = new Client()
.setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
.setProject('<PROJECT_ID>');
const storage = new Storage(client);
const result = storage.getFileDownload('<BUCKET_ID>', '<FILE_ID>');
console.log(result); // Resource URL
```
{% /multicode %}

249
src/routes/docs/products/storage/upload-download/+page.markdoc
View File

@@ -25,7 +25,7 @@ You can also upload files programmatically using our SDKs:
const storage = new Storage(client);
const promise = storage.createFile(
'[BUCKET_ID]',
'<BUCKET_ID>',
ID.unique(),
document.getElementById('uploader').files[0]
);
@@ -50,11 +50,11 @@ You can also upload files programmatically using our SDKs:
// If running in a browser environment, you can use File directly
const browserFile = new File(['hello'], 'hello.txt');
await storage.createFile('[BUCKET_ID]', ID.unique(), browserFile);
await storage.createFile('<BUCKET_ID>', ID.unique(), browserFile);
// If running in Node.js, use InputFile
const nodeFile = InputFile.fromPath('/path/to/file.jpg', 'file.jpg');
await storage.createFile('[BUCKET_ID]', ID.unique(), nodeFile);
await storage.createFile('<BUCKET_ID>', ID.unique(), nodeFile);
```
```client-flutter
@@ -68,7 +68,7 @@ You can also upload files programmatically using our SDKs:
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'),
);
@@ -87,13 +87,40 @@ You can also upload files programmatically using our SDKs:
val storage = Storage(client)
val file = storage.createFile(
bucketId = "[BUCKET_ID]",
bucketId = "<BUCKET_ID>",
fileId = ID.unique(),
file = File("./path-to-files/image.jpg"),
)
}
```
```client-react-native
import { Client, Storage, ID } from 'react-native-appwrite';
const client = new Client()
.setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
.setProject('<PROJECT_ID>');
const storage = new Storage(client);
const promise = storage.createFile(
'<BUCKET_ID>',
ID.unique(),
{
name: 'image.jpg',
type: 'image/jpeg',
size: 1234567,
uri: 'file:///path/to/file.jpg',
}
);
promise.then(function (response) {
console.log(response); // Success
}, function (error) {
console.log(error); // Failure
});
```
```client-apple
import Appwrite
@@ -105,7 +132,7 @@ You can also upload files programmatically using our SDKs:
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",
@@ -119,12 +146,12 @@ You can also upload files programmatically using our SDKs:
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]
X-Appwrite-Project: <PROJECT_ID>
--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 } }
{ "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"
@@ -158,7 +185,7 @@ For example, for the input tag `<input type="file" id="uploader">`, you would ca
```js
const promise = storage.createFile(
'[BUCKET_ID]',
'<BUCKET_ID>',
ID.unique(),
document.getElementById('uploader').files[0]
);
@@ -196,6 +223,61 @@ The Appwrite Apple SDK expects an `InputFile` class for file inputs.
| `InputFile.fromData(_ data: Data, filename: String, mimeType: String)` | Used to upload files from a [Data](https://developer.apple.com/documentation/foundation/data) object. Specify the file [MIME type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types) using the `mimeType` param. |
| `InputFile.fromBuffer(_ buffer: ByteBuffer, filename: String, mimeType: String)` | Used to upload files from a [NIO Buffer](https://swiftinit.org/reference/swift-nio/niocore/bytebuffer) object. Specify the file [MIME type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types) using the `mimeType` param. |
{% /tabsitem %}
{% tabsitem #react-native title="React Native" %}
The Appwrite React Native SDK expects a file object with the following properties for file inputs:
| Property | Description |
| -------- | ----------- |
| `name` | The name of the file. |
| `type` | The MIME type of the file. |
| `size` | The size of the file in bytes. |
| `uri` | The URI of the file on the device. |
This object structure aligns with what is typically returned from image picker libraries such as `react-native-image-picker`:
```js
// Example with react-native-image-picker
import { launchImageLibrary } from 'react-native-image-picker';
const pickImage = async () => {
const result = await launchImageLibrary({
mediaType: 'photo',
});
if (result.assets && result.assets[0]) {
const fileInfo = result.assets[0];
return {
name: fileInfo.fileName,
type: fileInfo.type,
size: fileInfo.fileSize,
uri: fileInfo.uri,
};
}
};
```
You can also use the file picker or document picker from Expo:
```js
// Example with expo-document-picker
import * as DocumentPicker from 'expo-document-picker';
const pickDocument = async () => {
const result = await DocumentPicker.getDocumentAsync();
if (result.assets && result.assets[0]) {
return {
name: result.assets[0].name,
type: result.assets[0].mimeType,
size: result.assets[0].size,
uri: result.assets[0].uri,
};
}
};
```
{% /tabsitem %}
{% /tabs %}
# Server SDKs {% #server-sdks %}
@@ -309,7 +391,7 @@ client
.setProject('<PROJECT_ID>') // Your project ID
;
const promise = storage.getFile('[BUCKET_ID]', '[FILE_ID]');
const promise = storage.getFile('<BUCKET_ID>', '<FILE_ID>');
promise.then(function (response) {
console.log(response); // Success
@@ -330,8 +412,8 @@ void main() { // Init SDK
;
// downloading file
Future result = storage.getFile(
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)
@@ -343,8 +425,8 @@ void main() { // Init SDK
//displaying image preview
FutureBuilder(
future: storage.getFile(
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
@@ -360,15 +442,17 @@ import Appwrite
func main() async throws {
let client = Client()
.setEndpoint("https://<REGION>.cloud.appwrite.io/v1") // Your API Endpoint
.setProject("<PROJECT_ID>") // Your project ID
let storage = Storage(client)
let byteBuffer = try await storage.getFile(
bucketId: "[BUCKET_ID]",
fileId: "[FILE_ID]"
)
.setEndpoint("https://<REGION>.cloud.appwrite.io/v1")
.setProject("<PROJECT_ID>")
print(String(describing: byteBuffer)
let storage = Storage(client)
let byteBuffer = try await storage.getFile(
bucketId: "<BUCKET_ID>",
fileId: "<FILE_ID>"
)
print(String(describing: byteBuffer)
}
```
```client-android-kotlin
@@ -391,13 +475,30 @@ class MainActivity : AppCompatActivity() {
val storage = Storage(client)
val result = storage.getFile(
bucketId = "[BUCKET_ID]",
fileId = "[FILE_ID]"
bucketId = "<BUCKET_ID>",
fileId = "<FILE_ID>"
)
println(result); // Resource URL
}
}
```
```client-react-native
import { Client, Storage } from 'react-native-appwrite';
const client = new Client()
.setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
.setProject('<PROJECT_ID>');
const storage = new Storage(client);
const promise = storage.getFile('<BUCKET_ID>', '<FILE_ID>');
promise.then(function (response) {
console.log(response); // Success
}, function (error) {
console.log(error); // Failure
});
```
{% /multicode %}
# Download file {% #download-file %}
@@ -416,7 +517,7 @@ client
.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
```
@@ -433,8 +534,8 @@ void main() { // Init SDK
;
// 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)
@@ -446,8 +547,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
@@ -467,8 +568,8 @@ func main() async throws {
.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))
@@ -494,13 +595,26 @@ class MainActivity : AppCompatActivity() {
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 } from 'react-native-appwrite';
const client = new Client()
.setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
.setProject('<PROJECT_ID>');
const storage = new Storage(client);
const result = storage.getFileDownload('<BUCKET_ID>', '<FILE_ID>');
console.log(result); // Resource URL
```
{% /multicode %}
# Get File Preview {% #get-file-preview %}
@@ -519,7 +633,7 @@ client
.setProject('<PROJECT_ID>') // Your project ID
;
const result = storage.getFilePreview('[BUCKET_ID]', '[FILE_ID]');
const result = storage.getFilePreview('<BUCKET_ID>', '<FILE_ID>');
console.log(result); // Resource URL
```
@@ -536,8 +650,8 @@ void main() { // Init SDK
;
// downloading file
Future result = storage.getFilePreview(
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)
@@ -549,8 +663,8 @@ void main() { // Init SDK
//displaying image preview
FutureBuilder(
future: storage.getFilePreview(
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
@@ -570,8 +684,8 @@ func main() async throws {
.setProject("<PROJECT_ID>") // Your project ID
let storage = Storage(client)
let byteBuffer = try await storage.getFilePreview(
bucketId: "[BUCKET_ID]",
fileId: "[FILE_ID]"
bucketId: "<BUCKET_ID>",
fileId: "<FILE_ID>"
)
print(String(describing: byteBuffer))
@@ -597,13 +711,33 @@ class MainActivity : AppCompatActivity() {
val storage = Storage(client)
val result = storage.getFilePreview(
bucketId = "[BUCKET_ID]",
fileId = "[FILE_ID]"
bucketId = "<BUCKET_ID>",
fileId = "<FILE_ID>"
)
println(result); // Resource URL
}
}
```
```client-react-native
import { Client, Storage, ImageGravity } from 'react-native-appwrite';
const client = new Client()
.setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
.setProject('<PROJECT_ID>');
const storage = new Storage(client);
const result = storage.getFilePreview(
'<BUCKET_ID>',
'<FILE_ID>',
200, // width
200, // height
ImageGravity.Center, // gravity
100 // quality
);
console.log(result); // Resource URL
```
{% /multicode %}
# View File {% #view-file%}
@@ -623,7 +757,7 @@ client
.setProject('<PROJECT_ID>') // Your project ID
;
const result = storage.getFileView('[BUCKET_ID]', '[FILE_ID]');
const result = storage.getFileView('<BUCKET_ID>', '<FILE_ID>');
console.log(result); // Resource URL
```
@@ -640,8 +774,8 @@ void main() { // Init SDK
;
// downloading file
Future result = storage.getFileView(
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)
@@ -653,8 +787,8 @@ void main() { // Init SDK
//displaying image preview
FutureBuilder(
future: storage.getFileView(
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
@@ -674,8 +808,8 @@ func main() async throws {
.setProject("<PROJECT_ID>") // Your project ID
let storage = Storage(client)
let byteBuffer = try await storage.getFileView(
bucketId: "[BUCKET_ID]",
fileId: "[FILE_ID]"
bucketId: "<BUCKET_ID>",
fileId: "<FILE_ID>"
)
print(String(describing: byteBuffer))
@@ -701,11 +835,24 @@ class MainActivity : AppCompatActivity() {
val storage = Storage(client)
val result = storage.getFileView(
bucketId = "[BUCKET_ID]",
fileId = "[FILE_ID]"
bucketId = "<BUCKET_ID>",
fileId = "<FILE_ID>"
)
println(result); // Resource URL
}
}
```
```client-react-native
import { Client, Storage } from 'react-native-appwrite';
const client = new Client()
.setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
.setProject('<PROJECT_ID>');
const storage = new Storage(client);
const result = storage.getFileView('<BUCKET_ID>', '<FILE_ID>');
console.log(result); // Resource URL
```
{% /multicode %}