IPFS Push

MintForm.tsx

/** @jsxRuntime classic */
/** @jsx jsx */
import React, { useEffect, useState } from 'react'
import { FileDrop } from 'react-file-drop'
import { jsx, Field, Flex, Button, Label, Box } from 'theme-ui'
import { pinFilesToIPFS } from '../utils/pinFilesToIPFS'

type MintFormProps = {}

let formData

const MintForm = ({}: MintFormProps) => {
  const handleChange = () => {}
  useEffect(() => {
    formData = new FormData()
  }, [])

  const logFormData = (formData) => {
    for (var key of formData.entries()) {
      console.log(key[0] + ', ' + key[1])
    }
  }

  const dropFiles = (files, e) => {
    formData.append('gltf', files[0])
    formData.append('usdz', files[1])
    formData.append('poster', files[2])
    logFormData(formData)
  }

  const handleSubmit = (e) => {
    e.preventDefault()
    formData.append('name', e.target.elements.name.value)
    formData.append('description', e.target.elements.description.value)
    formData.append('image', e.target.elements.image.value)
    formData.append('external_url', e.target.elements.external_url.value)
    logFormData(formData)

    formData.append('_boundary','FORM_BOUNDARY')
    formData['_boundary'] = 'FORM_BOUNDARY'
    
    let response = pinFilesToIPFS(formData)
    console.log({response})
  }

  return (
    <form onSubmit={handleSubmit} sx={{ width: '50%', border: '1px solid', p: 3 }}>
      <Flex sx={{ justifyContent: 'space-between', '> *': { flex: 1 } }}>
        <Flex sx={{ flexDirection: 'column', flex: 1 }}>
          <Label sx={{ fontWeight: 'bold' }}>3D Files and Poster image</Label>
          <FileDrop
            sx={{
              border: '1px solid black',
              display: 'flex',
              flexDirection: 'column',
              flex: 1,
              mr: 4,
              alignItems: 'center',
              justifyContent: 'center',
            }}
            onDrop={(files, event) => dropFiles(files, event)}
          >
            Drop some files here!
          </FileDrop>
        </Flex>
        <div className="metaData">
          <Field label="name" name="name" defaultValue="" />
          {/* string */}
          <Field label="description" name="description" defaultValue="" />
          {/* string */}
          <Field label="image" name="image" defaultValue="" />
          {/* string --> ipfs://ipfs/{{ IPFS_HASH )) */}
          <Field label="external_url" name="external_url" defaultValue="" />
          {/* This is the link to Rarible which we currently don't have, we can fill this in shortly */}
        </div>
      </Flex>
      <Button type="submit" variant="primary" sx={{ width: '100%', mt: 4 }}>
        Submit
      </Button>
    </form>
  )
}

export default MintForm

pinFilesToIPFS.ts

// Copied and modfied from https://docs.rarible.com/asset/creating-an-asset
import axios from 'axios'

type UploadImageToIPFSProps = {
  data: any
}

export const pinFilesToIPFS = ({data}: UploadImageToIPFSProps) => {
  const url = `https://api.pinata.cloud/pinning/pinJSONToIPFS`;
  
  return axios.post(url, data, {
      headers: {
        "Content-Type": `multipart/form-data; boundary= ${data._boundary}`,
        pinata_api_key: 'f936674c31680659d273',
        pinata_secret_api_key: 'f7f0d11808633d5bc7fb20bf63c71d8906dd681041aae4d59797a2e9d661e2b6',
      },
    })
    .then(function (response: any) {
      console.log(response.IpfsHash); 
      return response
    })
    .catch(function (error) {
      console.log(error)
    });
};

 // RETURNS THIS JSON
      // {
      //   IpfsHash: // This is the IPFS multi-hash provided back for your content,
      //   PinSize: // This is how large (in bytes) the content you just pinned is,
      //   Timestamp: // This is the timestamp for your content pinning (represented in ISO 8601 format)
      // }