# 🌐 IPFS Upload - Decentralized File Storage

A modern React application for uploading files, folders, and URLs to the InterPlanetary File System (IPFS) using the latest **Helia** technology.

![IPFS Upload Demo](https://img.shields.io/badge/IPFS-Upload-blue?style=for-the-badge&logo=ipfs)
![React](https://img.shields.io/badge/React-19.1.1-61dafb?style=for-the-badge&logo=react)
![Helia](https://img.shields.io/badge/Helia-Latest-orange?style=for-the-badge)
![Bootstrap](https://img.shields.io/badge/Bootstrap-5-7952b3?style=for-the-badge&logo=bootstrap)

## ✨ Features

### 📁 Multiple Upload Methods
- **Individual Files**: Upload single or multiple files at once
- **Entire Folders**: Upload complete directory structures
- **Remote URLs**: Download and upload files from external URLs

### 🔧 Flexible Configuration
- **Self-hosted Instance**: Run your own IPFS node
- **Custom Instance**: Connect to external IPFS instances
- **Content Pinning**: Ensure your content persists on the network

### 🎨 Modern Interface
- **Responsive Design**: Works perfectly on desktop and mobile
- **Dynamic Background**: Automatically changing pastel colors
- **Real-time Feedback**: Toast notifications and progress indicators
- **Beautiful UI**: Modern Bootstrap 5 styling with custom enhancements

### 🚀 Advanced Features
- **CID Copying**: One-click copy to clipboard
- **File Size Formatting**: Human-readable file sizes
- **Error Handling**: Comprehensive error messages
- **Memory Management**: Automatic cleanup of IPFS instances

## 🛠️ Technology Stack

- **Frontend**: React 19.1.1 with Hooks
- **IPFS**: Helia (next-generation IPFS implementation)
- **Styling**: Bootstrap 5 + React Bootstrap
- **Icons**: Emoji-based for universal compatibility
- **Build Tool**: Create React App

## 📦 Dependencies

### Core IPFS
```json
{
  "@helia/unixfs": "latest",
  "@helia/http": "latest",
  "helia": "latest",
  "@helia/strings": "latest",
  "@libp2p/websockets": "latest"
}
```

### UI & Styling
```json
{
  "bootstrap": "latest",
  "react-bootstrap": "latest"
}
```

## 🚀 Quick Start

### Prerequisites
- Node.js (v16 or higher)
- npm or yarn
- Modern web browser with JavaScript enabled

### Installation

1. **Clone the repository**
   ```bash
   git clone <repository-url>
   cd ipfs-upload
   ```

2. **Install dependencies**
   ```bash
   npm install
   ```

3. **Start the development server**
   ```bash
   npm start
   ```

4. **Open in browser**
   Navigate to [http://localhost:3000](http://localhost:3000)

## 🎯 Usage Guide

### 1. Configure Your IPFS Instance

**Self Instance (Recommended for beginners)**
- Select "Self Instance" radio button
- The app will create a local IPFS node automatically

**Custom Instance (For advanced users)**
- Select "Custom Instance" radio button
- Enter your IPFS instance URL (e.g., `http://localhost:5001/api/v0`)
- Ensure CORS is properly configured on your instance

### 2. Enable Content Pinning (Optional)

Check the "Persist content (pinned)" checkbox to ensure your uploaded content remains available on the IPFS network and won't be garbage collected.

### 3. Upload Your Content

**Upload Files**
1. Click on the file input in the green "Upload Files" card
2. Select one or multiple files
3. Click "Upload Files"

**Upload Folders**
1. Click on the folder input in the red "Upload Folder" card
2. Select a folder (all files and subdirectories will be included)
3. Click "Upload Folder"

**Upload from URL**
1. Enter a direct file URL in the yellow "Upload URL" card
2. Click "Upload URL"

### 4. Access Your Files

Once uploaded, you'll see:
- **File name** and size
- **IPFS CID** (Content Identifier)
- **Direct link** to view on IPFS
- **Copy CID** button for easy sharing
- **Pinned status** (if enabled)

## 🔗 IPFS Access

Your uploaded files can be accessed through:

- **IPFS Gateway**: `https://ipfs.io/ipfs/<CID>`
- **Local Gateway**: `http://localhost:8080/ipfs/<CID>` (if running IPFS locally)
- **Any IPFS Gateway**: Replace the domain with your preferred gateway

## ⚠️ Important Notes

### Security Considerations
- **Content Permanence**: Files uploaded to IPFS cannot be deleted
- **Public Network**: Content is publicly accessible via CID
- **CORS Requirements**: Custom instances must have CORS enabled

### Browser Compatibility
- Modern browsers (Chrome, Firefox, Safari, Edge)
- JavaScript must be enabled
- Local storage access required

### File Size Limitations
- Browser memory limitations apply
- Large files may take longer to process
- Consider file size when using self-hosted instances

## 🏗️ Project Structure

```
src/
├── components/
│   ├── FileList.js          # Component for displaying uploaded files
│   └── UploadCard.js        # Reusable upload card component
├── App.js                   # Main application component
├── App.css                  # Custom styles
├── index.js                 # Application entry point
└── index.css                # Global styles
```

## 🔧 Development

### Available Scripts

- `npm start` - Start development server
- `npm test` - Run test suite
- `npm run build` - Build for production
- `npm run eject` - Eject from Create React App (irreversible)

### Custom Scripts

You can add these to your `package.json`:

```json
{
  "scripts": {
    "analyze": "npm run build && npx serve -s build",
    "lint": "eslint src --ext .js,.jsx",
    "format": "prettier --write src/**/*.{js,jsx,css,md}"
  }
}
```

## 🚀 Deployment

### Build for Production

```bash
npm run build
```

This creates an optimized build in the `build/` folder.

### Deployment Options

- **GitHub Pages**: Use `gh-pages` package
- **Netlify**: Connect your repository for automatic deploys
- **Vercel**: Import your project for instant deployment
- **Static Hosting**: Upload the `build/` folder to any static host

### Environment Variables

Create a `.env` file for configuration:

```env
REACT_APP_DEFAULT_GATEWAY=https://ipfs.io
REACT_APP_ENABLE_ANALYTICS=false
```

## 🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

### Development Guidelines

1. Follow existing code style
2. Add tests for new features
3. Update documentation as needed
4. Ensure all tests pass before submitting

### Reporting Issues

Please include:
- Browser and version
- Steps to reproduce
- Expected vs actual behavior
- Console errors (if any)

## 📄 License

This project is open source and available under the [MIT License](LICENSE).

## 🙏 Acknowledgments

- **IPFS Team** for the amazing decentralized storage protocol
- **Helia Team** for the modern IPFS implementation
- **React Team** for the powerful UI framework
- **Bootstrap Team** for the beautiful CSS framework

## 📞 Support

- **Documentation**: Check this README and inline comments
- **Issues**: Use GitHub Issues for bug reports
- **Discussions**: Use GitHub Discussions for questions

---

**Made with ❤️ by [ale](https://manalejandro.com)**

*Powered by [Helia](https://helia.io/) - The next generation IPFS implementation*

### Analyzing the Bundle Size

This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)

### Making a Progressive Web App

This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)

### Advanced Configuration

This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)

### Deployment

This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)

### `npm run build` fails to minify

This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)