Fun with Files File-Upload-to-IPFS

Overview

Fun with Files is a web application that allows users to upload files to the InterPlanetary File System (IPFS) using Pinata's API. This application provides a user-friendly interface with drag-and-drop functionality, real-time upload feedback, and displays the IPFS hash for easy access to uploaded files.

Technologies Used

• Frontend: HTML, CSS, JavaScript
• Backend: Node.js, Express
• Database: N/A (IPFS for decentralized storage)
• API: Pinata for IPFS integration

Installation

1. Clone the repository:

   git clone <repository-url>
   cd fun-with-files/backend

1. Install the necessary packages:

   npm install

1. Set up environment variables in a .env file:

   PINATA_API_KEY=<your_api_key>
   PINATA_SECRET_API_KEY=<your_secret_api_key>

1. Start the server:

   node app.js

1. Access the application source codes at https://github.com/SuleimanSoftDev/File-Upload-to-IPFS

Usage

1. Open the web application in your browser.
2. Use the drag-and-drop area or click to select files for upload.
3. Click the "Upload" button to initiate the upload.
4. View the IPFS link displayed after a successful upload.

File Upload Process

When a file is uploaded:

• The file is sent to the backend server.
• The server processes the file and uploads it to IPFS via the Pinata API.
• The IPFS hash is returned and displayed on the frontend.

Accessibility Considerations

• Keyboard Navigation: Users can navigate the application using the keyboard.
• Color Contrast: Colors used meet WCAG guidelines for sufficient contrast.
• Alt Text: All images will have descriptive alt attributes (if applicable).

Installation

1. Clone the repository:

   git clone <repository-url>
   cd fun-with-files/backend

1. Install the necessary packages:

   npm install

1. Set up environment variables in a .env file:

   PINATA_API_KEY=<your_api_key>
   PINATA_SECRET_API_KEY=<your_secret_api_key>

1. Start the server:

   node app.js

1. Access the application in your browser at http://localhost:5000/index.html.

Usage

1. Open the web application in your browser.
2. Use the drag-and-drop area or click to select files for upload.
3. Click the "Upload" button to initiate the upload.
4. View the IPFS link displayed after a successful upload.

File Upload Process

When a file is uploaded:

• The file is sent to the backend server.
• The server processes the file and uploads it to IPFS via the Pinata API.
• The IPFS hash is returned and displayed on the frontend.

Accessibility Considerations

• Keyboard Navigation: Users can navigate the application using the keyboard.
• Color Contrast: Colors used meet WCAG guidelines for sufficient contrast.
• Alt Text: All images will have descriptive alt attributes (if applicable).

Contributing

Contributions are welcome! Please feel free to submit a pull request or create an issue for any feature requests or bug reports.

License

This project is licensed under the MIT License.

## License
This project is licensed under the MIT License.