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

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

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

4

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

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.