bknd-file-upload_skill

Overview

This skill explains how to upload files to Bknd storage using the MediaApi SDK, REST endpoints, and common browser patterns. It covers direct uploads, attaching files to entity fields, React integration, progress tracking with XHR, and server-side uploads. Practical tips for error handling, configuration, and common pitfalls are included.

How this skill works

The skill inspects SDK methods like media.upload and media.uploadToEntity and the corresponding REST endpoints for single-file uploads and entity attachments. It shows browser flows: file inputs, previews, XHR progress events, and how to include auth headers. It also describes server-side adapter usage and how media fields store filenames rather than raw content.

When to use it

• Add programmatic uploads to your frontend app with progress and previews.
• Attach images or files directly to entity records (avatars, cover images).
• Test storage configuration via the admin Media UI for quick one-off uploads.
• Implement server-side seeding or batch uploads to the storage adapter.
• Use REST curl calls for scripted or CI uploads when SDK is unavailable.

Best practices

• Validate file type and size client-side before uploading.
• Show upload progress for large files and revoke object URLs after use.
• Set Content-Type on REST uploads; SDK files infer MIME automatically.
• Configure body_max_size in Bknd for expected upload limits (avoid 413).
• Add Authorization header for XHR uploads when using header transport.
• Use media() fields on entities to attach files; store filenames only.

Example use cases

• Image avatar upload component that validates, previews, and attaches to users via uploadToEntity.
• React file input that uploads images and returns server URL for display.
• Large file uploader using XMLHttpRequest to show percent progress to users.
• Server seed script that fetches remote images and stores them via the storage adapter.
• Automated curl upload in CI to populate media during deployment.