Fun with Files File-Upload-to-IPFS

RMAG news

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

Clone the repository:

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

Install the necessary packages:

npm install

Set up environment variables in a .env file:

PINATA_API_KEY=<your_api_key>
PINATA_SECRET_API_KEY=<your_secret_api_key>

Start the server:

node app.js

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

Usage

Open the web application in your browser.
Use the drag-and-drop area or click to select files for upload.
Click the “Upload” button to initiate the upload.
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

Clone the repository:

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

Install the necessary packages:

npm install

Set up environment variables in a .env file:

PINATA_API_KEY=<your_api_key>
PINATA_SECRET_API_KEY=<your_secret_api_key>

Start the server:

node app.js

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

Usage

Open the web application in your browser.
Use the drag-and-drop area or click to select files for upload.
Click the “Upload” button to initiate the upload.
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.

Please follow and like us:
Pin Share