Skip to content

Commit 4ca1294

Browse files
authored
Merge pull request #205 from girder/js-readme
Add a readme for the Javascript client
2 parents 77cd38e + cbea24e commit 4ca1294

File tree

1 file changed

+40
-0
lines changed

1 file changed

+40
-0
lines changed

javascript-client/README.md

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# django-s3-file-field-client
2+
[![npm](https://img.shields.io/npm/v/django-s3-file-field)](https://www.npmjs.com/package/django-s3-file-field)
3+
4+
A Javascript (with TypeScript support) client library for django-s3-file-field.
5+
6+
## Usage
7+
```typescript
8+
import axios from 'axios';
9+
import S3FileFieldClient, { S3FileFieldProgress, S3FileFieldProgressState } from 'django-s3-file-field';
10+
11+
function onUploadProgress (progress: S3FileFieldProgress) {
12+
if (progress.state == S3FileFieldProgressState.Sending) {
13+
console.log(`Uploading ${progress.uploaded} / ${progress.total}`);
14+
}
15+
}
16+
17+
const apiClient = axios.create(...); // This can be used to set authentication headers, etc.
18+
19+
const s3ffClient = new S3FileFieldClient({
20+
baseUrl: process.env.S3FF_BASE_URL, // e.g. 'http://localhost:8000/api/v1/s3-upload/', the path mounted in urlpatterns
21+
onProgress: onUploadProgress, // This argument is optional
22+
apiConfig: apiClient.defaults, // This argument is optional
23+
});
24+
25+
// This might be run in an event handler
26+
const file = document.getElementById('my-file-input').files[0];
27+
28+
const fieldValue = await s3ffClient.uploadFile(
29+
file,
30+
'core.File.blob' // The "<app>.<model>.<field>" to upload to
31+
);
32+
33+
apiClient.post(
34+
'http://localhost:8000/api/v1/file/', // This is particular to the application
35+
{
36+
'blob': fieldValue, // This should match the field uploaded to (e.g. 'core.File.blob')
37+
...: ..., // Other fields for the POST request
38+
}
39+
);
40+
```

0 commit comments

Comments
 (0)