281 líneas
8.0 KiB
Markdown
281 líneas
8.0 KiB
Markdown
# 🌐 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
|
|
```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)
|