差分

このページの2つのバージョン間の差分を表示します。

--- blockchain:dappsからipfsにファイルをアップロードする [2022/06/12 11:29] – dot
+++ blockchain:dappsからipfsにファイルをアップロードする [2022/06/16 12:54] (現在) – dot
@@ 行 19: / 行 19: @@
   * [[https://github.com/ipfs-examples/js-ipfs-examples|js-ipfs-examples]]
+  * [[https://github.com/ipfs/js-ipfs/tree/master/docs/core-api|IPFS Core API]]
 ===== IPFSUploader.tsx の実装 =====
@@ 行 30: / 行 31: @@
 <code JavaScript>
-import React, { BaseSyntheticEvent, useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import type { IPFS } from 'ipfs-core-types';
 import * as IPFSCore from 'ipfs-core';
@@ 行 69: / 行 70: @@
         setIpfsReady(Boolean(ipfs));
     };
-    const fileSelected = async (event: BaseSyntheticEvent) => {
+    const fileSelected = async (event: React.ChangeEvent<HTMLInputElement>) => {
         if(!isIpfsReady) return;
-        const targetFile = event.target.files[0];
+        const targetFile = event.target.files?.[0];
-        const _result = await ipfs.add(targetFile);
+        if(targetFile){
-        //const _result = await ipfs.add('Hello world');
+            const _result = await ipfs.add(targetFile);
-        setCID(_result.path);
+            //const _result = await ipfs.add('Hello world');
+            setCID(_result.path);
+        }
     };
@@ 行 133: / 行 136: @@
 MFS を利用してファイルをアップロードする。
+<code PowerShell>
+IPFS\ipfs-web> code src\components\IPFSDirectoryUploader.tsx
+</code>
 <code JavaScript>
-import React, { BaseSyntheticEvent, useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import type { IPFS } from 'ipfs-core-types';
 import * as IPFSCore from 'ipfs-core';
@@ 行 188: / 行 194: @@
         setIpfsReady(Boolean(ipfs));
     };
-    const fileSelected = async (event: BaseSyntheticEvent) => {
+    const fileSelected = async (event: React.ChangeEvent<HTMLInputElement>) => {
         if(!isIpfsReady) return;
-        const targetFile = event.target.files[0];
+        const targetFile = event.target.files?.[0];
-        const fileReader = new window.FileReader();
+        if(targetFile){
-        fileReader.readAsArrayBuffer(targetFile);
+            const fileReader = new window.FileReader();
-        fileReader.onloadend = async () => {
+            fileReader.readAsArrayBuffer(targetFile);
-            let ab = fileReader.result as ArrayBuffer;
+            fileReader.onloadend = async () => {
-            const u8a = new Uint8Array(ab);
+                let ab = fileReader.result as ArrayBuffer;
-            console.log(`upload /upload-directory/${targetFile.name}`);
+                const u8a = new Uint8Array(ab);
-            await ipfs.files.write(`/upload-directory/${targetFile.name}`, u8a, {create: true});
+                console.log(`upload /upload-directory/${targetFile.name}`);
-            await ls("/upload-directory");
+                await ipfs.files.write(`/upload-directory/${targetFile.name}`, u8a, {create: true});
-        };
+                await ls("/upload-directory");
+            };
+        }
     };
     const ls = async (path: string) => {
@@ 行 232: / 行 240: @@
                         <p>{file.name}: {file.cid.toString()}</p>
                         <p>
-                            <a href={`https://ipfs.io/ipfs/${file.cid.toString()}`}>Open</a>
+                            <a href={`https://ipfs.io/ipfs/${file.cid.toString()}`} target="_blank" rel="noreferrer">Open</a>
                             <img src={`https://ipfs.io/ipfs/${file.cid.toString()}`} alt="IPFS img link."/>
                         </p>
@@ 行 245: / 行 253: @@
 export default IPFSDirectoryUploader;
 </code>
+App.tsx に IPFSDirectoryUploader コンポーネントを記述する。