Question 184747 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – In React JS, how can I send a SVG file to a smart contract function?

Below is a snippet of my React Js code where I pass the SVG file to a smart contract. The problem is the SVG is blank when it is passed to the smart contract function.

Also, when I console log the SVG I get the following:

{name: ‘gorilla-head.svg’, lastModified: 1684910840362, lastModifiedDate: Wed May 24 2023 15:47:20 GMT+0900 (Japan Standard Time), webkitRelativePath: ”, size: 9720, …}

try {
        console.log(svg);
        console.log("Made it to the minting function");
        //console.log(svg.name);

        if (svg.toString() == "") {
          console.log("svg file cannot be empty");
        } else {
          console.log(svg);
          const response = await contract.mintNft(svg); //This is where the svg file is pass to the contract
          console.log("response: ", response);
          await response.wait(1);
          console.log(
            `Create SVG to NFT index 0 has tokenURI: ${await contract.tokenURI(
              1
            )}`
          );
        }
      } catch (err) {
        console.log("error: ", err);
      }

I also display the SVG file to the user whenever it is uploaded using:

{svgFile && <img src={URL.createObjectURL(svg)} alt="SVG Preview" />}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the following solution:

    const svg = await svgFile.text(); //svgFile is the uploaded SVG from the user

    When you console.log(svg) it will print out the text of the SVG and when I pass the data to the contract it performs correctly.

    Hope this helps someone in the future.


  2. 0

    Since SVG files are essentially XML-based text files, you can convert the SVG file into a string representation and then pass it to the smart contract function as a string parameter.

    import { ReactComponent as svg } from './path/to/svg.svg';
const svgString = new XMLSerializer().serializeToString(svg);

    and then …

    console.log(svgString);
const response = await contract.mintNft(svgString);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search