React를 사용하여 IPFS infura.io에 파일을 업로드하는 방법.

infura가 퍼블릭 게이트웨이의 가치를 떨어뜨린 후 많은 개발자가 IPFS infura에 파일을 업로드하는 동안 문제에 직면합니다.

우리가 할 일.

infura 계정

을 생성하고 설정합니다.

IPFS

에 파일을 업로드합니다.

IPFS에서 콘텐츠에 액세스합니다.

infura 계정 설정.

공식 웹사이트infura.io로 이동하여 계정을 생성하고 서명한 후 계정이 없으면 새 계정을 생성하고 새 키 생성을 클릭합니다.


네트워크 IPFS를 선택하고 원하는 프로젝트 이름을 언급하고 생성하십시오.



여기에서 프로젝트 비밀 키, API 키 비밀 및 IPFS 엔드포인트에 다음 자격 증명이 표시되면 여기에서 원하는 또 다른 사항은 전용 게이트웨이 도메인 링크이므로 전용 게이트웨이 옵션을 활성화하여 얻을 수 있습니다. 원하는 도메인 이름을 입력하고 도메인을 저장합니다.



이제 계정을 설정했으며 이제 전용 게이트웨이가 생겼습니다. 나중에 프로젝트에서 이 모든 자격 증명을 사용할 것입니다.

프로젝트의 IPFS에 파일을 업로드하는 방법.

React 프로젝트에는 ipfs-http-client라는 npm 패키지가 필요합니다. 이 명령을 사용하여 설치하세요.
npm i ipfs-http-client
반응 프로젝트에서 App.js 파일을 열고 우리가 가져오는 ipfs-http-clientcreate 기능을 ipfsHttpClient에서 제공하는 ipfs-http-client로 가져오고 반응 프로젝트에서 infura 자격 증명을 설정합니다.
import { create as ipfsHttpClient } from "ipfs-http-client";
App.js 구성 요소에 infura 키를 추가하면 함수base64를 사용하여 btoa 키를 생성하여 권한 부여 키를 생성하는 데 사용할 것입니다.

const projectId = "<YOUR PROJECT ID>";
const projectSecret = "<YOUR PROJECT SECRET>";
const authorization = "Basic " + btoa(projectId + ":" + projectSecret);

참고: 더 안전한 대안을 위해 환경 변수를 자유롭게 사용하십시오.

이제 우리는 변수ipfs를 생성할 것입니다. 이것은 create 함수에 의해 반환된 ipfs http 클라이언트를 저장할 것입니다. create 함수 includeurl 및 headers includeauthorization에 인수를 전달할 것입니다.

   const ipfs = create({
      url: "https://ipfs.infura.io:5001/api/v0",
      headers:{
        authorization
      }
    })

IPFS와 연결을 설정한 후 입력 양식에서 파일을 업로드합니다.

    <div className="App">
      {ipfs && (
        <>
          <h3>Upload file to IPFS</h3>
          <form onSubmit={onSubmitHandler}>
            <input type="file" name="file"/>
            <button type="submit">Upload file</button>
          </form>
        </>
      )}
    </div>

onSubmitHandler는 모든 구현을 처리하는 주요 기능으로 코드를 작성할 수 있습니다.

const onSubmitHandler = async (event) => {
    event.preventDefault();
    const form = event.target;
    const files = (form[0]).files;

    if (!files || files.length === 0) {
      return alert("No files selected");
    }

    const file = files[0];
    // upload files
    const result = await ipfs.add(file);

    setImages([
      ...images,
      {
        cid: result.cid,
        path: result.path,
      },
    ]);

    form.reset();
  };

이 함수의 논리는 간단합니다.

파일을 선택한 경우 파일을 확인하십시오. 그렇지 않으면 파일이 선택되지 않았다는 경고 메시지가 표시됩니다.

ipfs.add(file)가 파일을 IPFS에 업로드 중입니다

.

add 메서드는 cid , path , size 및 mtime를 포함하는 다음 속성을 반환합니다. 가장 중요한 속성은 cid입니다(업로드된 파일에 지정된 콘텐츠 식별자 또는 고유한 콘텐츠 식별자입니다. ) 및 path(파일을 표시하는 데 사용함).

새 파일을 추가하여 이미지 상태를 업데이트합니다

.

구성 요소의 시작 부분에 이 줄을 추가합니다.

    const [images, setImages] = useState([])

IPFS에서 업로드된 파일 표시

onSubmitHandler 함수에 로직이 이미 구현되어 있습니다. 이제 jsx에서 이 로직을 사용할 것입니다.
Infura API 키에서 전용 게이트웨이 도메인 링크를 마지막으로 복사하고 이를 dedicated-gateway-link로 대체하여 파일을 표시하는 템플릿과 할 일을 추가할 수 있습니다.

<div>
        {images.map((image, index) => (
          <img
          alt={`Uploaded #${index + 1}`}
          src={"<dedicated-gateway-link>/ipfs/" + image.path}
            style={{ maxWidth: "400px", margin: "15px" }}
            key={image.cid.toString() + index}
          />
        ))}
      </div>

이제 우리는 이 Github repo에서 전체 코드를 확인할 수 있는 모든 것을 성공적으로 구현했습니다.

결론

infura 프로젝트 업로드 파일을 설정하고 React 애플리케이션에서 액세스하는 방법을 배웠습니다. 그러나 P2P 스토리지 네트워크를 사용하여 파일을 저장하는 분산 솔루션이라는 IPFS의 혁신적인 개념입니다.