Aplicación web para compartir archivos de forma segura utilizando Cloudflare R2 como almacenamiento. Permite subir archivos y generar enlaces de descarga únicos.

Sender File es una solución full-stack para compartir archivos que utiliza URLs pre-firmadas de Cloudflare R2, permitiendo subidas directas desde el navegador sin pasar por el servidor, optimizando el rendimiento y reduciendo costos de ancho de banda.

• 🚀 Subida directa a R2 - Los archivos se suben directamente a Cloudflare R2 usando URLs pre-firmadas
• 📊 Progreso en tiempo real - Barra de progreso con velocidad y tiempo estimado
• 🔗 Enlaces compartibles - Genera enlaces únicos para compartir archivos
• 📱 Diseño responsive - Interfaz adaptable a cualquier dispositivo
• 🛡️ Validación de archivos - Control de tipos y tamaño máximo permitido
• ⚡ Lazy loading - Carga diferida de componentes para mejor rendimiento

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│   Frontend  │────▶│   Backend   │────▶│ Cloudflare  │
│   (React)   │     │  (Express)  │     │     R2      │
└─────────────┘     └─────────────┘     └─────────────┘
       │                                       ▲
       └───────────────────────────────────────┘
              Subida directa con URL pre-firmada

sender-file/
├── frontend/                 # Aplicación React
│   ├── src/
│   │   ├── components/       # Componentes reutilizables
│   │   │   ├── download/     # Componentes de descarga
│   │   │   ├── upload/       # Componentes de subida
│   │   │   └── ui/           # Componentes UI generales
│   │   ├── hooks/            # Custom hooks
│   │   ├── pages/            # Páginas principales
│   │   └── routes/           # Configuración de rutas
│   └── package.json
│
├── backend/                  # API Node.js
│   ├── src/
│   │   ├── config/           # Configuración (R2)
│   │   ├── controllers/      # Controladores
│   │   ├── routes/           # Rutas API
│   │   ├── services/         # Servicios (R2)
│   │   └── types/            # Tipos TypeScript
│   └── package.json
│
└── README.md

• Node.js 20.x o superior
• Cuenta de Cloudflare con R2 habilitado
• npm o yarn

git clone https://github.com/tu-usuario/sender-file.git
cd sender-file

cd backend
npm install

Crear archivo .env en la carpeta backend/:

# Servidor
PORT=3000
NODE_ENV=development

# Cloudflare R2
R2_ACCOUNT_ID=tu_account_id
R2_ACCESS_KEY_ID=tu_access_key
R2_SECRET_ACCESS_KEY=tu_secret_key
R2_BUCKET_NAME=tu_bucket
R2_ENDPOINT=https://tu_account_id.r2.cloudflarestorage.com
R2_PUBLIC_URL=https://tu-dominio-publico.com

# Configuración de archivos
MAX_FILE_SIZE=104857600
ALLOWED_TYPES=mp3,wav,docx,pdf,xlsx,sql,zip,rar
URL_EXPIRY_SECONDS=300
R2_OBJECTS_PUBLIC=false

# CORS
ALLOWED_ORIGINS=https://tu-frontend.com

cd frontend
npm install

Crear archivo .env en la carpeta frontend/:

VITE_API_URL=http://localhost:3000/api/v1/files

# Terminal 1 - Backend
cd backend
npm run dev

# Terminal 2 - Frontend
cd frontend
npm run dev

# Backend
cd backend
npm run build
npm start

# Frontend
cd frontend
npm run build
npm run preview

POST /api/v1/files/upload-url
Content-Type: application/json

{
  "fileName": "documento.pdf",
  "contentType": "application/pdf",
  "expectedSize": 1024000
}

Respuesta exitosa:

{
  "success": true,
  "uploadUrl": "https://...",
  "key": "1702915200000-documento.pdf",
  "publicUrl": "https://...",
  "expiresIn": 300
}

GET /api/v1/files/download-url/:fileName

Respuesta exitosa:

{
  "success": true,
  "downloadUrl": "https://...",
  "key": "1702915200000-documento.pdf",
  "expiresIn": 300
}

1. Accede al Dashboard de Cloudflare
2. Ve a R2 Object Storage > Create bucket
3. Crea las credenciales API en R2 > Manage R2 API Tokens
4. Configura CORS en el bucket si es necesario:

[
  {
    "AllowedOrigins": ["http://localhost:5173", "https://tu-dominio.com"],
    "AllowedMethods": ["GET", "PUT", "HEAD"],
    "AllowedHeaders": ["*"],
    "MaxAgeSeconds": 3600
  }
]

1. Fork el proyecto
2. Crea tu rama (git checkout -b feature/nueva-funcionalidad)
3. Commit tus cambios (git commit -m 'feat: agregar nueva funcionalidad')
4. Push a la rama (git push origin feature/nueva-funcionalidad)
5. Abre un Pull Request

Este proyecto está bajo la licencia ISC. Ver el archivo LICENSE para más detalles.

Desarrollado con ❤️ usando React + Node.js + Cloudflare R2