File Upload Handling

Introduction

File upload handling in the boda-cris project is primarily focused on the management of wedding-related media and data assets, such as hero background images, gallery photos, and guest list imports. The system utilizes a client-side processing approach where files are converted into Base64 data strings for persistence in the application's state and local storage.

The architecture centralizes upload logic within a custom React hook, which provides validation and asynchronous processing. This system ensures that media and data files meet specific size and type requirements before being integrated into the global ContentContext. Sources: src/hooks/useFileUpload.js, src/context/ContentContext.jsx:1-10

Architecture and Core Logic

The useFileUpload Hook

The useFileUpload.js hook serves as the primary engine for file processing. It encapsulates the FileReader API logic to transform File objects into Base64 strings.

Key functionalities include:

• Validation: Checks if the file is an image and ensures the file size does not exceed a configurable maximum (defaulting to 5MB).
• Single File Upload: The uploadFile function handles individual file processing.
• Multiple File Upload: The uploadMultipleFiles function allows for batch processing, useful for the gallery section.
• State Management: Tracks isUploading status and error states to provide UI feedback.

Sources: src/hooks/useFileUpload.js:4-53

Data Flow Diagram

The following diagram illustrates the flow from a user selecting a file in the ContentEditor to the data being saved in the application state.

The flow ensures that only validated data reaches the application's persistent state. Sources: src/hooks/useFileUpload.js:10-40, src/context/ContentContext.jsx:48-52

Implementation Components

Media Uploads (Hero and Gallery)

The ContentEditor component implements specific handlers for different media types.

Sources: src/components/admin/ContentEditor.jsx:53-73

In the handleBackgroundUpload implementation, a single file is processed and passed to the hero section's backgroundImage property. For the gallery, the uploadMultipleFiles method is used to process an array of files, which are then iteratively added to the gallery state. Sources: src/components/admin/ContentEditor.jsx:55-73

Sequence of Media Processing

Guest Data Import

While media uses the useFileUpload hook, guest data (CSV/JSON) uses a separate parsing logic within the GuestImportExport component. This component uses FileReader.readAsText to process text-based file uploads.

1. JSON Parsing: Validates the JSON structure and maps fields to the internal guest model.
2. CSV Parsing: Implements a parseCSVLine function to handle commas and quotes within CSV data.
3. Normalization: The normalizeAttendance function ensures external data matches internal status enums ('confirmed', 'declined', 'pending').

Sources: src/components/admin/GuestImportExport.jsx:75-163

Configuration and Constraints

File Constraints

Constraints are enforced at the application layer within the hook and component logic.

// Example validation from useFileUpload.js
const maxSize = maxSizeMB * 1024 * 1024;
if (file.size > maxSize) {
  setError(`El archivo no debe superar ${maxSizeMB}MB`);
  setIsUploading(false);
  reject(new Error('File too large'));
  return;
}

Sources: src/hooks/useFileUpload.js:20-27

Server/Platform Configuration

The netlify.toml file includes specific configurations for handling static assets and images, defining cache policies for optimized delivery once files are uploaded or referenced in the build.

Sources: netlify.toml:31-48

Summary

The File Upload Handling system in boda-cris provides a streamlined, client-side approach for managing wedding content. By centralizing logic in the useFileUpload hook and delegating state management to ContentContext, the application maintains a responsive UI while ensuring data persistence through LocalStorage. The system effectively handles both binary image data (via Base64 encoding) and structured text data (via CSV/JSON parsing), providing robust validation and feedback for administrative users. Sources: src/hooks/useFileUpload.js, src/context/ContentContext.jsx, src/components/admin/ContentEditor.jsx