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 uploa…


This content originally appeared on DEV Community and was authored by Suleiman Alhaji Mohammed

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.


This content originally appeared on DEV Community and was authored by Suleiman Alhaji Mohammed


Print Share Comment Cite Upload Translate Updates
APA

Suleiman Alhaji Mohammed | Sciencx (2024-10-13T20:26:03+00:00) Fun with Files File-Upload-to-IPFS. Retrieved from https://www.scien.cx/2024/10/13/fun-with-files-file-upload-to-ipfs/

MLA
" » Fun with Files File-Upload-to-IPFS." Suleiman Alhaji Mohammed | Sciencx - Sunday October 13, 2024, https://www.scien.cx/2024/10/13/fun-with-files-file-upload-to-ipfs/
HARVARD
Suleiman Alhaji Mohammed | Sciencx Sunday October 13, 2024 » Fun with Files File-Upload-to-IPFS., viewed ,<https://www.scien.cx/2024/10/13/fun-with-files-file-upload-to-ipfs/>
VANCOUVER
Suleiman Alhaji Mohammed | Sciencx - » Fun with Files File-Upload-to-IPFS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/10/13/fun-with-files-file-upload-to-ipfs/
CHICAGO
" » Fun with Files File-Upload-to-IPFS." Suleiman Alhaji Mohammed | Sciencx - Accessed . https://www.scien.cx/2024/10/13/fun-with-files-file-upload-to-ipfs/
IEEE
" » Fun with Files File-Upload-to-IPFS." Suleiman Alhaji Mohammed | Sciencx [Online]. Available: https://www.scien.cx/2024/10/13/fun-with-files-file-upload-to-ipfs/. [Accessed: ]
rf:citation
» Fun with Files File-Upload-to-IPFS | Suleiman Alhaji Mohammed | Sciencx | https://www.scien.cx/2024/10/13/fun-with-files-file-upload-to-ipfs/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts