example ipfs metadata

nft.ts

import { useState } from 'react';
import ipfsHttpClient from 'ipfs-http-client';

const IPFSUploader: React.FC = () => {
  const [name, setName] = useState<string>('');
  const [description, setDescription] = useState<string>('');
  const [budget, setBudget] = useState<number>(0);
  const [image, setImage] = useState<File | null>(null);
  const [ipfsResponse, setIPFSResponse] = useState<any | null>(null);

  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      setImage(file);
    }
  };

  const handleUpload = async () => {
    try {
      // Connect to your IPFS node
      const ipfs = ipfsHttpClient({ host: 'localhost', port: '5001', protocol: 'http' });

      // Upload the image to IPFS
      let imageCID = '';
      if (image) {
        const imageBuffer = await image.arrayBuffer();
        const imageResult = await ipfs.add(imageBuffer);
        imageCID = imageResult.cid.toString();
      }

      // Create the metadata object
      const metadata = {
        description: description,
        external_url: '', // You can set the external URL here
        image: imageCID ? `https://ipfs.io/ipfs/${imageCID}` : '',
        name: name,
        attributes: [
          {
            trait_type: "Name",
            value: name,
          },
          {
            trait_type: "Description",
            value: description,
          },
          {
            trait_type: "Budget",
            value: budget,
          },
        ],
      };

      // Upload the metadata to IPFS
      const metadataResult = await ipfs.add(JSON.stringify(metadata));
      const metadataCID = metadataResult.cid.toString();

      // Construct the IPFS URL for the metadata
      const metadataURL = `https://ipfs.io/ipfs/${metadataCID}`;

      // Update the state with the IPFS response
      setIPFSResponse(metadataURL);
    } catch (error) {
      console.error('Error uploading to IPFS:', error);
    }
  };

  return (
    <div>
      <h1>IPFS Uploader</h1>
      <div>
        <label>Name:</label>
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      </div>
      <div>
        <label>Description:</label>
        <input type="text" value={description} onChange={(e) => setDescription(e.target.value)} />
      </div>
      <div>
        <label>Budget:</label>
        <input type="number" value={budget} onChange={(e) => setBudget(Number(e.target.value))} />
      </div>
      <div>
        <label>Upload Image:</label>
        <input type="file" accept="image/*" onChange={handleImageUpload} />
      </div>
      <button onClick={handleUpload}>Upload to IPFS</button>

      {ipfsResponse && (
        <div>
          <h2>IPFS Metadata URL:</h2>
          <p>
            Metadata URL:{' '}
            <a href={ipfsResponse} target="_blank" rel="noopener noreferrer">
              {ipfsResponse}
            </a>
          </p>
        </div>
      )}
    </div>
  );
};

export default IPFSUploader;