File Upload with Pinata’s Files API

This is a submission for the The Pinata Challenge

What I Built

I built a File Upload Application that leverages Pinata’s Files API to upload files to IPFS (InterPlanetary File System) and Pinata’s CDN. The application provides a seamless file-driven user experience, allowing users to upload images, documents, or any file type. Once uploaded, users can access the files via IPFS through a Pinata gateway link.

The project includes:

• Creativity: Handling various file types and giving users direct links to view their uploaded files on IPFS.
• Performance: Utilizing Pinata’s CDN to serve files quickly.
• Use of Underlying Technology: Using Pinata SDK to handle file uploads and Express.js for the backend.
• Usability and User Experience: Simple HTML interface with minimal input for users.
• Accessibility: User-friendly interface that allows easy interaction with the application.

Demo

Check out the live demo of the application:
Click here to try Live Demo Link

Screenshot:
File Upload Form

After the file is uploaded successfully click on the "UPLOAD ANOTHER FILE" button to upload more files

My Code

You can view the complete source code of the project on GitHub:

git clone https://github.com/yourusername/pinata-file-upload-app.git

More Technical Details

1. File Upload: Users can upload any file (images, documents, videos, etc.) through a simple HTML form. Once a file is selected and submitted, the backend (built with Node.js) uses the Pinata SDK to upload the file.

const { PinataSDK } = require("pinata-web3");

const pinata = new PinataSDK({
    pinataJwt: process.env.PINATA_JWT, 
    pinataGateway: process.env.PINATA_GATEWAY
});

async function fileUpload() {
    try {
        const file = new File(["Hello Pinata"], "TestFile.txt", { type: "text/plain" });
        const uploadResponse = await pinata.upload.file(file);
        console.log(uploadResponse); 
    } catch (error) {
        console.log(error);
    }
}

fileUpload();

This will return an object like the following

{
  IpfsHash: 'bafybeifmho6bs7aals5mui6x2qiz2b6ndjeob2e27v4o4fqyobarelpeku',
  PinSize: 336015,
  Timestamp: '2024-10-07T10:36:01.759Z'
}

2. CDN Integration: Once a file is successfully uploaded, the application generates a link using Pinata’s CDN (Content Delivery Network) gateway, allowing users to access their files via a fast and reliable service. This enhances performance, especially for large files.

• Example of a file access link: https://gateway.pinata.cloud/ipfs/YourFileHash

You can check out Pinata official documentation for more details.

Conclusion

Building this File Upload Application with Pinata's API provided valuable insights into leveraging decentralized storage systems. By combining IPFS with Pinata’s CDN, I was able to create a fast, reliable solution for uploading and accessing various file types. This project highlights the potential of decentralized technology in enhancing file accessibility and performance.

Looking ahead, I'm excited to continue exploring the capabilities of Pinata and IPFS to develop even more powerful decentralized applications.