File Storage & Uploads
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The File Storage & Uploads system in the ElmecV2 project provides a robust infrastructure for handling digital assets associated with user requests and chat messages. It leverages Supabase Storage as the primary backend, utilizing a dedicated bucket named request-files to store various media types, including images, PDFs, and general documents. The system is designed with a mobile-first approach, integrating native Expo libraries to handle camera access, gallery selection, and document picking.
This module ensures data integrity and security through strict Row Level Security (RLS) policies, file size limitations (5MB per file), and MIME type restrictions. It allows users to attach up to three files per request, providing real-time feedback and public URL generation for shared access within the application.
Sources: RESUMEN_FINAL.md, CONFIGURACION_SUPABASE.md
Architecture and Components
The storage architecture is divided between a React Native frontend for user interaction and a Supabase backend for persistence and security.
Core Storage Infrastructure
The system centers around the request-files bucket. This bucket is configured as "Public," allowing read access via generated URLs while restricting write operations to authenticated owners.
The diagram above illustrates the relationship between the mobile UI components and the Supabase Storage backend.
Sources: RESUMEN_FINAL.md, CONFIGURACION_SUPABASE.md
Frontend Components
- FileUploadComponent.tsx: The primary UI component providing three distinct interaction paths: "Archivo" (Document Picker), "Galería" (Image Picker), and "Cámara" (Native Camera access).
- fileUpload.ts: A utility module that abstracts Supabase SDK calls, handling file encoding (Base64), path generation, and error handling.
Sources: components/FileUploadComponent.tsx, utils/fileUpload.ts:1-50
Data Flow and Implementation
Upload Process
When a user selects a file, the system validates the file size against a 5MB limit and the total count against a 3-file maximum. Native files are converted to a format suitable for the Supabase API (often Base64 for mobile environments) before transmission.
This sequence demonstrates the validation and transmission steps required to secure a file in the cloud.
Sources: RESUMEN_FINAL.md, utils/fileUpload.ts:50-120
File Handling Specifications
| Parameter | Value | Description |
|---|---|---|
| Bucket Name | request-files | Target container for all request-related assets. |
| Max File Size | 5MB | Enforced at both frontend and backend levels. |
| Max Files | 3 per request | Limit to prevent excessive storage usage per entry. |
| Allowed MIME Types | image/*, application/pdf, text/* | Restricts uploads to safe and relevant formats. |
| Public Access | Enabled | Allows viewing via public URLs without temporary tokens. |
Sources: RESUMEN_FINAL.md, REPORTE_PRUEBAS_CRUD.md
Security and Policies (RLS)
Security is enforced via Row Level Security (RLS) on the storage.objects table. These policies ensure that while files can be read publicly, only authenticated owners can modify or delete them.
Implemented RLS Policies
| Policy Name | Operation | Logic |
|---|---|---|
| Public read access | SELECT | bucket_id = 'request-files' |
| Authenticated users can upload | INSERT | bucket_id = 'request-files' AND auth.uid()::text = owner_id |
| Users can update own files | UPDATE | bucket_id = 'request-files' AND auth.uid()::text = owner_id |
| Users can delete own files | DELETE | bucket_id = 'request-files' AND auth.uid()::text = owner_id |
Note: The system transitioned from using the deprecated owner field to owner_id for modern Supabase compatibility.
Sources: RESUMEN_FINAL.md, CONFIGURACION_SUPABASE.md, scripts/setup-storage-policies.js
Configuration and Setup Scripts
The project includes several scripts to automate the environment setup:
setup-storage-bucket.ts: Initializes therequest-filesbucket with public access settings and size limits.setup-storage-policies.js: Programmatically applies the SQL policies required for RLS.check-storage-bucket.js: A diagnostic tool used to verify bucket existence and accessibility.
// Example from setup-storage-bucket.ts
const { data, error } = await supabase.storage.createBucket('request-files', {
public: true,
fileSizeLimit: 5242880, // 5MB
allowedMimeTypes: ['image/*', 'application/pdf']
});
Sources: scripts/setup-storage-bucket.ts:10-25, RESUMEN_FINAL.md
Conclusion
The "File Storage & Uploads" system provides a scalable and secure way to handle user media in the ElmecV2 application. By combining native Expo capabilities with Supabase's robust storage and RLS features, the project ensures that file management is both user-friendly and architecturally sound. The implementation of specific validation scripts and automated setup processes further guarantees consistency across development and production environments.