差分

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

--- blockchain:dappsからipfsにファイルをアップロードする [2022/06/12 06:49] – 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';
@@ 行 146: / 行 152: @@
     const [version, setVersion] = useState("");
     const [MFSEntlies, setMFSEntlies] = useState<MFSEntry[]>();
-    const [cid, setCID] = useState("");
     useEffect(() => {
@@ 行 189: / 行 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 blob = new Blob([ab], {type: "application/octet-binary"});
+                let ab = fileReader.result as ArrayBuffer;
-            const u8a = new Uint8Array(ab);
+                const u8a = new Uint8Array(ab);
-            console.log(u8a);
+                console.log(`upload /upload-directory/${targetFile.name}`);
-            console.log(`upload /upload-directory/${targetFile.name}`);
+                await ipfs.files.write(`/upload-directory/${targetFile.name}`, u8a, {create: true});
-            await ipfs.files.write(`/upload-directory/${targetFile.name}`, u8a, {create: true});
+                await ls("/upload-directory");
-            await ls("/upload-directory");
+            };
-            /*
+        }
-            const flushCID = await ipfs.files.flush("/upload-directory");
-            console.log(flushCID.toString());
-            */
-        };
-        /*
-        const _result = await ipfs.add(targetFile);
-        //const _result = await ipfs.add('Hello world');
-        setCID(_result.path);
-        */
     };
     const ls = async (path: string) => {
@@ 行 238: / 行 234: @@
         <input id="input-file" type="file" onChange={fileSelected} disabled={!isIpfsReady}></input>
         <div>
-            <p>Uploaded File CID: { cid }</p>
             <p><button onClick={MFSStat}>MFS Stat</button></p>
-            <p><a href={`ipfs://${cid}`} target="_blank">open browser</a></p>
-            <p><a href={`https://ipfs.io/ipfs/${cid}`} target="_blank">open ipfs.io public gateway</a></p>
             <p>
                 { MFSEntlies?.map((file) => (
@@ 行 247: / 行 240: @@
                         <p>{file.name}: {file.cid.toString()}</p>
                         <p>
-                            <img src={`https://ipfs.io/ipfs/${file.cid.toString()}`}/>
+                            <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>
                     </div>
@@ 行 259: / 行 253: @@
 export default IPFSDirectoryUploader;
 </code>
+App.tsx に IPFSDirectoryUploader コンポーネントを記述する。