This is a submission for the The Pinata Challenge

What I Built

I have built an Image Optimizer web application that integrates Pinata for decentralized file storage using IPFS. This application allows users to upload images, customize optimization settings such as width, height, format (WebP, JPEG, PNG), and quality, and then retrieve the optimized version directly from IPFS via Pinata's gateway.

The app offers an intuitive user interface for uploading an image, previewing both the original and optimized versions, and retrieving a shareable link to the optimized image stored on the decentralized web. It takes advantage of Pinata's powerful IPFS file pinning service, ensuring that the uploaded images are securely stored and can be accessed globally from any IPFS node.

Demo

Demo Link : Click Here

My Code

git clone https://github.com/chintanonweb/pinata-image-optimizer.git
cd image-optimizer-pinata

npm install

More Details

How I Used Pinata

1. Pinning Files to IPFS
   • The app uses Pinata's file upload API (pinFileToIPFS) to pin images to the IPFS network. Users can select any image from their local system, and the app seamlessly uploads the image to Pinata, generating an IPFS hash that points to the pinned file. This ensures decentralized storage of the image, making it accessible from any IPFS node worldwide.

• The file upload process leverages Pinata's JWT-based authentication, ensuring that only authorized users can pin files using their own Pinata credentials.

   const response = await fetch('https://api.pinata.cloud/pinning/pinFileToIPFS', {
     method: 'POST',
     body: formData,
     headers: {
       'Authorization': `Bearer ${import.meta.env.VITE_PINATA_JWT}`,
     },
   });

1. Retrieving Images from IPFS
   • Once an image is uploaded, the app constructs a retrievable URL using Pinata’s IPFS gateway (https://gateway.pinata.cloud). The user can customize the image optimization settings (width, height, quality, and format), and these parameters are appended to the Pinata gateway URL to retrieve the optimized version of the image dynamically.

• The app generates a customized URL with image transformations applied via query parameters. For example:
  

   https://gateway.pinata.cloud/ipfs/<IPFS_HASH>?img-width=400&img-height=400&img-quality=80&img-format=webp
  

1. Previewing the Original and Optimized Image

   • The original image is previewed immediately after selection using the local URL.createObjectURL() method. Once the image is uploaded to IPFS and optimized, the optimized version is previewed by loading it from the Pinata gateway with the selected transformations.

2. IPFS Gateway Customization

   • The application allows developers to specify a custom IPFS gateway via environment variables (VITE_GATEWAY_URL). This enables flexibility to use private or faster gateways depending on the needs of the application.

This project showcases the power and flexibility of Pinata’s IPFS integration for decentralized file management, using file upload, storage, and optimized content retrieval.