|
| 1 | +# django-s3-file-field-client |
| 2 | +[](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