github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-25 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

Improve the file upload example via SDK in docs (#20534)

Browse Source 
Co-authored-by: Brainslug <br41nslug@users.noreply.github.com>
This commit is contained in:
Pascal Jufer
2023-11-27 19:54:14 +01:00
committed by GitHub
parent 4d4fa80f9b
commit 0a65c377a4
2 changed files with 58 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/mighty-years-occur.md Normal file
View File

@@ -0,0 +1,5 @@
---
"docs": patch
---
Improved the example for file upload via SDK

56
docs/reference/files.md
View File

@@ -4,6 +4,10 @@ readTime: 10 min read
pageClass: page-reference
---
<script setup lang="ts">
import { data as packages } from '@/data/packages.data.js';
</script>
# Accessing Files
> Every file managed by the platform is uploaded to the configured storage adapter, and its associated metadata is
@@ -597,22 +601,68 @@ Not supported by GraphQL
</template>
<template #sdk>
#### Web
::: code-group
```js-vue [index.js]
import { createDirectus, rest, uploadFiles } from 'https://unpkg.com/@directus/sdk@{{ packages['@directus/sdk'].version.major }}';
const client = createDirectus('https://directus.example.com').with(rest());
const form = document.getElementById('upload-file');
if (form) {
form.addEventListener('submit', async (event) => {
event.preventDefault();
const formData = new FormData(event.target);
const result = await client.request(uploadFiles(formData));
form.reset();
});
}
```
```html [index.html]
<!doctype html>
<html>
<head></head>
<body>
<form id="upload-file">
<input type="text" name="title" placeholder="Title..." />
<input type="file" name="file" />
<button type="submit">Upload</button>
</form>
<script src="/index.js" type="module"></script>
</body>
</html>
```
:::
#### Node.js
```js
import { createDirectus, rest, uploadFiles } from '@directus/sdk';
import { readFileSync } from 'node:fs';
const client = createDirectus('https://directus.example.com').with(rest());
const title = 'example';
const file = new Blob([readFileSync('example.txt')]);
const title = 'Example';
const file = new Blob([readFileSync('example.txt')], { type: 'text/plain' });
const fileName = 'example.txt';
const formData = new FormData();
formData.append('title', title);
formData.append('file', file);
formData.append('file', file, fileName);
const result = await client.request(uploadFiles(formData));
```
[Learn more about `FormData` ->](https://developer.mozilla.org/en-US/docs/Web/API/FormData)
</template>
</SnippetToggler>