🌐 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.

✨ 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

{
  "@helia/unixfs": "latest",
  "@helia/http": "latest",
  "helia": "latest",
  "@helia/strings": "latest",
  "@libp2p/websockets": "latest"
}

UI & Styling

{
  "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

   git clone <repository-url>
   cd ipfs-upload
   

2. Install dependencies

   npm install
   

3. Start the development server

   npm start
   

4. Open in browser Navigate to 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:

{
  "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

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:

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.

🙏 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

Powered by Helia - 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

Making a Progressive Web App

This section has moved here: 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

Deployment

This section has moved here: 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