Blockchain code Metaverse VR

Crypto×VR×SmartContract(543)

スポンサーリンク

//tips

それそれ冷房テストしないと今年はまずいかもしれない。暑い。

//smart contract

現在edit部分にstorageへのimageアップロードの仕組みを組み込めていないので、そちらの設定を行う。その際にはフォルダ名部分はuseridにしたいので工夫する必要がある。

follow,followerの下に配置する。

<Button variant="contained" color="primary" component="span">
画像を選択
</Button>

ボタンを組み込みonclickを設置。

onChange={handlenftChange}

//nft画像選択
const handlenftChange = e => {
setImage(e.target.files[0])
}

ここはフォームを使用した方がいいようなので修正。

<form onSubmit={handlenftSubmit}>
<input type="file" onChange={handlenftChange} />
<button className="button">送信</button>
</form>

Submitの関数でログを確認。

const handlenftSubmit = e => {
e.preventDefault()

console.log(nftimage)
}

File {name: 'alex-moiseev-rKZm75IwzJc-unsplash.jpg', などの形でのログが確認できた。

このsubmit部分でstorageへの格納作業が行えれば良い。

Firebaseへの保存先を指定するために、refを使用。

const imageRef = ref(firestorage, nftimage.name)

try {
const thisfirestorage = firebaseApp.firestorage
const imageRef = ref(thisfirestorage, nftimage.name)
} catch (err) {
console.log(err)
}
}

Firestorageを使用すると他の箇所との重複が発生したのでthisを付与。

uploadBytes(imageRef, nftimage).then(() => {
console.log("Uploaded a file!")
})

こちらでアップロード内容を確認する。

https://firebase.google.com/docs/storage/web/upload-files?hl=ja

送信を押すと下記のエラーが発生。

TypeError: Cannot read properties of undefined (reading '_location')

何回かエラーが発生し、新たなstorageを設定しなくても既に宣言しているものを利用できることがわかった。

const handlenftSubmit = e => {
e.preventDefault()

console.log(nftimage.name)

try {
const imageRef = ref(firestorage, nftimage.name)
console.log(imageRef)

uploadBytes(imageRef, nftimage).then(() => {
console.log("Uploaded a file!")
})

} catch (err) {
console.log(err)
}
}

こちらで無事に対応できた。

さらに意図したフォルダの下にimageを配置できるかを試す。

const imageRef = ref(firestorage, '10/'+nftimage.name)

参照先をこちらでfirestorageの10フォルダの下にimage画像名で保存することができた。

なので、下記にすることで、ninjaでキャッチしたuseridを活用する。

const imageRef = ref(firestorage, ninja[0].userid+'/'+image.jpg)

これを実行しようと/4/editに入ると/4/に戻される現象が発生。

Authhistoryの問題のような気がする。

signInWithEmailAndPassword(auth,email,password)
.then((cred)=>{
//console.log('user loged in:',cred.user)
localStorage.setItem('authhistory',email)
setUmail('')
setUpass('')

}).then(()=>{
console.log('localStorage.getItem(authhistory)')
console.log(localStorage.getItem('authhistory'))

})

indexページのhandleOnAuthInを確認。

signInWithEmailAndPassword(auth,email,password)
.then((cred)=>{
console.log('user loged in:',cred.user)
localStorage.setItem('authhistory',email)
setUmail('')

でしっかりauth設定はされているように思われる。

ここから無事に入れた。

const imageRef = ref(firestorage, ninja[0].userid+'/'+'image.jpg')

きちんとuserid4で入り、設定することで、4フォルダと中身にimage.jpgを作成し、アップロードすることができた。

この4/image.jpgが設定されていないときに

FirebaseError: Firebase Storage: Object '4/image.jpg' does not exist. (storage/object-not-found)

がすごい勢いで表示されるのでifなどで制御する。

エラーの該当箇所は下記だった。きちんとエラーがキャッチされ続けていたことが原因。

getDownloadURL(gsReference)
.then(url => {
setImage(url)
})
.catch(err => console.log(err))

Flagを設定し、再読み込みさせないようにするか。

if(!noimage){
getDownloadURL(gsReference)
.then(url => {
setImage(url)
})
.catch(() => {
setnoImage(true)
})
//.catch(err => console.log(err))

}
const [noimage,setnoImage]=useState(false)

きちんと機能した。ただ、flagの変更が反映されるまでの若干数エラーをキャッチしてしまう。むむむ。

{image && (
<div>
<img src={image} alt="" width="250" height="250"/>
</div>
)}

Imageが存在する場合に表示されるように組んだら真っ白になりどうも微妙。

汎用初期イメージなどを作って切り替えられるようにしておくとベストか。ここは要検討。あまり404エラーは表示させたくないので公開時に再度検討する。

edit.jsにも同じ仕組みを適用。

表示がなんだかぼさっとしているので画像の下に画像選択アイコンを移動。

<Grid item xs={12} md={4} lg={3}>
<img src={image} alt="" width="250" height="250"/>
<br />
Set My Avatar
<form onSubmit={handlenftSubmit}>
<input type="file"  onChange={handlenftChange} />
<button className="button">送信</button>
</form>
<br /><br />
</Grid>

input[type=”file”]のダサさは後でなんとかする。ブラウザによって日本語表示は英語表示に変わるのか気になり調べたらきちんと参照ボタン等のラベルは、ブラウザ自体の対応言語で決まるとのこと。素晴らしい。

このしたにNFTであることを示すためのopen seanなどのリンク場所を作成していく。その流れで、Linkを自動でカスタムして生成できる仕組みも組み込む。

人気の記事

1

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

3

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.