Files

Signed-off-by: ale <ale@manalejandro.com>

2025-08-24 00:59:13 +02:00

8.0 KiB

Original Blame Histórico

🌐 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

Clone the repository

git clone <repository-url>
cd ipfs-upload

Install dependencies
```
npm install
```
Start the development server
```
npm start
```
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

Click on the file input in the green "Upload Files" card
Select one or multiple files
Click "Upload Files"

Upload Folders

Click on the folder input in the red "Upload Folder" card
Select a folder (all files and subdirectories will be included)
Click "Upload Folder"

Upload from URL

Enter a direct file URL in the yellow "Upload URL" card
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

Follow existing code style
Add tests for new features
Update documentation as needed
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

8.0 KiB Original Blame Histórico