# Advanced Image Gallery
This example demonstrates a sophisticated image gallery with drag-and-drop upload, file management, and S3 integration using the BuzzyFrameAPI.
## Key Features
* **Drag-and-drop file upload** with visual feedback
* **Multiple file selection** and batch upload
* **Progress tracking** during upload operations
* **Image preview** with hover actions
* **File deletion** with confirmation
* **Automatic URL refresh** for expired S3 links
* **Real-time updates** when images are added or removed
* **Responsive grid layout** using Bulma CSS framework
## Use Cases
Perfect for applications requiring:
* Photo galleries and portfolios
* Document management systems
* Product image management
* User-generated content platforms
* Media libraries and archives
## Implementation Overview
This widget uses the **Child Table Data** pattern, where images are stored as child records linked to a parent row through a file/image field. The implementation showcases:
* Modern React hooks (useState, useEffect, useCallback)
* Proper BuzzyFrameAPI initialization outside React components
* Real-time data synchronization with microapp listeners
* S3 file operations with presigned URLs
* Error handling and user feedback
## Code Example
```html
Advanced Image Gallery
```
## Key Concepts
### BuzzyFrameAPI Integration
* **Initialization Pattern**: API is initialized outside React components for proper async handling
* **Child Data Management**: Uses `getChildItemsByField()` to retrieve file attachments
* **Real-time Updates**: `addMicroappListener()` ensures immediate UI updates when data changes
* **S3 Operations**: Handles presigned URLs for secure file upload and access
### File Management Features
* **Drag-and-Drop**: Native HTML5 drag-and-drop with visual feedback
* **Progress Tracking**: Real-time upload progress with `onProgress` callbacks
* **URL Expiration**: Automatic refresh of expired S3 URLs to maintain access
* **Error Handling**: Comprehensive error handling with user feedback
### React Best Practices
* **Hooks Usage**: Modern React patterns with useState, useEffect, and useCallback
* **Memory Management**: Proper cleanup of event listeners and global functions
* **State Management**: Efficient state updates with minimal re-renders
This example demonstrates how code widgets can create professional-grade file management interfaces that rival dedicated file management applications.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.buzzy.buzz/the-building-blocks/code-widget-custom-code/examples/advanced-image-gallery.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.