Habilidades s3-upload-handler
☁️

s3-upload-handler

Seguro ⚙️ Comandos externos🌐 Acesso à rede📁 Acesso ao sistema de arquivos🔑 Variáveis de ambiente

Mettre en place des uploads de fichiers AWS S3 avec des patterns prêts à l'emploi

Créer des uploads de fichiers sécurisés vers AWS S3 nécessite de comprendre les URLs pré-signées, les SDK clients et le traitement côté serveur. Cette skill fournit une documentation complète avec des composants UI, des utilitaires client et des patterns serveur pour implémenter rapidement des uploads S3 prêts pour la production.

Suporta: Claude Codex Code(CC)
📊 69 Adequado
1

Baixar o ZIP da skill

2

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

3

Ative e comece a usar

Testar

A utilizar "s3-upload-handler". Show me how to set up the S3Uploader component for image uploads

Resultado esperado:

  • Importer le composant S3Uploader depuis votre répertoire de composants UI
  • Configurer la prop presignedRouteProvider avec le chemin de votre endpoint API
  • Définir la variante sur button ou dropzone selon l’UI souhaitée
  • Ajouter la prop accept avec image/* pour filtrer les types de fichiers
  • Implémenter le callback onUpload pour gérer les uploads réussis
  • Définir les props maxFiles et maxSize pour les limites de validation

A utilizar "s3-upload-handler". How do I upload files from the server side?

Resultado esperado:

  • Importer la fonction utilitaire uploadFromServer
  • Fournir le contenu du fichier en chaîne base64 dans le paramètre file
  • Spécifier le chemin de destination dans le bucket S3 via le paramètre path
  • Définir contentType sur le type MIME approprié
  • La fonction renvoie l’URL publique du fichier uploadé
  • S’assurer que les identifiants AWS sont configurés dans les variables d’environnement

A utilizar "s3-upload-handler". What environment variables do I need to configure?

Resultado esperado:

  • AWS_ACCESS_KEY_ID pour l’authentification avec les services AWS
  • AWS_SECRET_ACCESS_KEY pour un accès API sécurisé
  • AWS_REGION spécifiant la région du bucket S3
  • AWS_S3_BUCKET_NAME avec l’identifiant de votre bucket
  • Ajoutez-les au fichier .env.local pour les projets Next.js
  • Ne jamais commettre des identifiants dans le contrôle de version

Pontuação de qualidade

38
Arquitetura
100
Manutenibilidade
87
Conteúdo
22
Comunidade
100
Segurança
83
Conformidade com especificações

O Que Você Pode Construir

Ajouter des uploads de fichiers en glisser-déposer

Implémentez une UI d’upload conviviale avec suivi de progression et validation en utilisant les patterns de composants documentés

Traitement et upload de fichiers côté serveur

Uploader des fichiers traités depuis des actions serveur en utilisant les fonctions utilitaires documentées avec prise en charge du contenu base64

Fonctionnalités de stockage de fichiers pour un MVP rapide

Ajoutez rapidement l’upload d’avatars, le stockage de documents ou la gestion de médias grâce à des exemples de code prêts à implémenter

Tente Estes Prompts

Bouton d’upload de base 
Montre-moi comment ajouter un simple bouton d’upload pour les avatars utilisateurs avec le composant S3Uploader
Dropzone multi-fichiers 
Implémente une zone de glisser-déposer qui accepte jusqu’à 10 images et affiche la progression d’upload
Logique d’upload personnalisée 
Aide-moi à créer une interface d’upload personnalisée avec ClientS3Uploader et mon propre indicateur de progression
Endpoint d’URL pré-signée 
Crée une route API Next.js qui génère des URLs S3 pré-signées avec une limite de taille de fichier de 10MB et une validation de type

Melhores Práticas

  • Utiliser des URLs pré-signées pour uploader directement du navigateur vers S3 sans exposer les identifiants AWS dans le code client
  • Valider les types et tailles de fichiers côté client et côté serveur pour empêcher les uploads malveillants
  • Configurer des politiques CORS de bucket S3 et des listes de contrôle d’accès adaptées aux exigences de sécurité

Evitar

  • Ne jamais exposer AWS_SECRET_ACCESS_KEY ou d’autres identifiants dans le code côté client ou dans des dépôts publics
  • Ne pas ignorer la validation côté serveur même avec des vérifications côté client, car les clients peuvent contourner la validation front-end
  • Éviter de faire transiter de gros uploads de fichiers par votre serveur d’application, car cela gaspille la bande passante et le traitement

Perguntas Frequentes

Quelles permissions AWS sont nécessaires pour que cela fonctionne ?
Votre bucket S3 nécessite la permission s3:PutObject. L’utilisateur IAM qui génère les URLs pré-signées a besoin des permissions s3:PutObject et s3:GetObject pour le bucket.
Quelle est la taille maximale de fichier que je peux uploader ?
Les exemples documentés utilisent une limite de 10MB. Vous pouvez l’ajuster dans les conditions de post pré-signées et la prop maxSize du composant selon vos besoins.
Comment créer la route API pour les URLs pré-signées ?
Utilisez la fonction createPresignedPost de @aws-sdk/s3-presigned-post dans une route API Next.js. La documentation de la skill inclut un exemple complet fonctionnel.
Les fichiers uploadés seront-ils accessibles publiquement ?
L’exemple définit acl sur public-read. Supprimez ce champ et configurez les politiques de bucket de manière appropriée pour des uploads de fichiers privés.
Pourquoi ai-je des erreurs CORS pendant l’upload ?
Votre bucket S3 a besoin d’une configuration CORS autorisant les méthodes PUT et POST depuis l’origine de domaine de votre application.
Quel est l’avantage des URLs pré-signées par rapport aux uploads directs ?
Les URLs pré-signées permettent au navigateur d’uploader directement vers S3, en évitant la bande passante de votre serveur et en éliminant les goulots d’étranglement de traitement pour les fichiers volumineux.

Detalhes do Desenvolvedor

Licença

MIT

Repositório

https://github.com/AayushBaniya2006/blinkfund/tree/main/.claude/skills/s3-upload-handler

Referência

main

Estrutura de arquivos

📄 reference.md

📄 SKILL.md