iam newbie and now it is my 1rst steps iam using

 Set address:
          {file}

but i take local adress ! How i can take Cid adress.I can find it(Cid) in console but i cant show it at website !!! thanks for all !!!

enter image description here

import React from 'react';
import { Web3Storage } from "web3.storage";
import { useState } from "react";
import "../css/App.css";


const apiToken =
  "meow";

const client = new Web3Storage({ token: apiToken });

const RegBuilding = () => {
    const [file, setFile] = useState("");
    const handleUpload = async () => {
      console.log(document.getElementById("input").files[0]);
      var fileInput = document.getElementById("input");
  
      const rootCid = await client.put(fileInput.files, {
        name: "cat pics",
        maxRetries: 3
      });
  
      console.log(rootCid);
  
      const res = await client.get(rootCid);
      const files = await res.files();
      console.log(files);
      const url = URL.createObjectURL(files[0]);
      console.log(url);
      setFile(url);
    };
    return (

      <div className="App">
            <header className="App-header">
            <label htmlFor="blogs_name">Meow system</label>
            Set address:
          {file}
          
       
  
        <div>
          <label htmlFor="file">Choose file to upload</label>
          <br></br>
          <input type="file" id="input" name="file" multiple />
          
        </div>
        <div>
          <button onClick={handleUpload}>Submit</button>

        </div></header>
      </div>
    );
  }
export default RegBuilding;

CodePudding user response：

import React from 'react';
import { Web3Storage } from "web3.storage";
import { useState } from "react";
import "../css/App.css";


const apiToken =
  "meow";

const client = new Web3Storage({ token: apiToken });

const RegBuilding = () => {
    const [file, setFile] = useState("");
    const [cid, setCid] = useState(""); // added
    const handleUpload = async () => {
      console.log(document.getElementById("input").files[0]);
      var fileInput = document.getElementById("input");

      // added
      const rootCid = await client.put(fileInput.files, {
        name: "cat pics",
        maxRetries: 3
      });
      setCid(rootCid); // added

      const res = await client.get(rootCid);
      const files = await res.files();
      console.log(files);
      const url = URL.createObjectURL(files[0]);
      console.log(url);
      setFile(url);
    };
    return (

      <div className="App">
            <header className="App-header">
            <label htmlFor="blogs_name">Meow system</label>
            Set address:
            {/* added */}
            {cid}
          
       
  
        <div>
          <label htmlFor="file">Choose file to upload</label>
          <br></br>
          <input type="file" id="input" name="file" multiple />
          
        </div>
        <div>
          <button onClick={handleUpload}>Submit</button>

        </div></header>
      </div>
    );
  }
export default RegBuilding;