//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の１０フォルダの下に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を自動でカスタムして生成できる仕組みも組み込む。
