jirawatee/storage5.html

## storage5.html
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
  <title>Listing files in Cloud Storage for Firebase</title>
  <link rel="shortcut icon" href="favicon.ico">
  <style>
    ul { list-style-type: none; padding:0 }
    li { float: left; width:200px; height:232px; margin:8px; text-align:center; border:1px solid #ddd }
    img { width: 200px; max-height:200px }
  </style>
</head>
<body>
  <ul id="ul"></ul>
  <script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.4.2/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.4.2/firebase-storage.js"></script>
  <script>
    var firebaseConfig = {
      apiKey: "xxxxx",
      authDomain: "xxxxx",
      databaseURL: "xxxxx",
      projectId: "xxxxx",
      storageBucket: "xxxxx",
      messagingSenderId: "xxxxx",
      appId: "1:xxxxx:web:xxxxx",
      measurementId: "G-xxxxx"
    };
    firebase.initializeApp(firebaseConfig);

    async function main() {
      await liff.init({ liffId: "LIFF-ID" })
      if (liff.isLoggedIn()) {
        const profile = await liff.getProfile()
        getImageList(profile)
      } else {
        liff.login()
      }
    }
    main()

    async function getImageList(profile) {
      const storage = firebase.storage()
      const storageRef = storage.ref()
      const listRef = storageRef.child(`photos/${profile.userId}/thumbs`)

      let listImage = await listRef.listAll()
      if (listImage.items.length == 0) {
        document.getElementById("ul").innerHTML = `You don't have any images. Please upload photos via chatbot and try again.`
        return
      }

      let i = 1
      listImage.items.forEach(async itemRef => {
        let thumbUrl = await itemRef.getDownloadURL()
        document.getElementById("ul").insertAdjacentHTML(
          'beforeend',
          `<li><img src="${thumbUrl}" onclick="shareMsg(${i}, '${thumbUrl}')">${i}</li>`
        )
        i++
      })
    }

    function shareMsg(i, thumbUrl) {
      if (confirm(`Share photo ${i}?`)) {
        const origitalUrl = thumbUrl.replace('%2Fthumbs', '').replace('_200x200', '')
        liff.shareTargetPicker([
          {
            type: 'image',
            previewImageUrl: thumbUrl,
            originalContentUrl: origitalUrl
          }
        ])
      }
    }
  </script>
</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
	<title>Listing files in Cloud Storage for Firebase</title>
	<link rel="shortcut icon" href="favicon.ico">
	<style>
	ul { list-style-type: none; padding:0 }
	li { float: left; width:200px; height:232px; margin:8px; text-align:center; border:1px solid #ddd }
	img { width: 200px; max-height:200px }
	</style>
	</head>
	<body>
	<ul id="ul"></ul>
	<script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
	<script src="https://www.gstatic.com/firebasejs/8.4.2/firebase-app.js"></script>
	<script src="https://www.gstatic.com/firebasejs/8.4.2/firebase-storage.js"></script>
	<script>
	var firebaseConfig = {
	apiKey: "xxxxx",
	authDomain: "xxxxx",
	databaseURL: "xxxxx",
	projectId: "xxxxx",
	storageBucket: "xxxxx",
	messagingSenderId: "xxxxx",
	appId: "1:xxxxx:web:xxxxx",
	measurementId: "G-xxxxx"
	};
	firebase.initializeApp(firebaseConfig);

	async function main() {
	await liff.init({ liffId: "LIFF-ID" })
	if (liff.isLoggedIn()) {
	const profile = await liff.getProfile()
	getImageList(profile)
	} else {
	liff.login()
	}
	}
	main()

	async function getImageList(profile) {
	const storage = firebase.storage()
	const storageRef = storage.ref()
	const listRef = storageRef.child(`photos/${profile.userId}/thumbs`)

	let listImage = await listRef.listAll()
	if (listImage.items.length == 0) {
	document.getElementById("ul").innerHTML = `You don't have any images. Please upload photos via chatbot and try again.`
	return
	}

	let i = 1
	listImage.items.forEach(async itemRef => {
	let thumbUrl = await itemRef.getDownloadURL()
	document.getElementById("ul").insertAdjacentHTML(
	'beforeend',
	`<li><img src="${thumbUrl}" onclick="shareMsg(${i}, '${thumbUrl}')">${i}</li>`
	)
	i++
	})
	}

	function shareMsg(i, thumbUrl) {
	if (confirm(`Share photo ${i}?`)) {
	const origitalUrl = thumbUrl.replace('%2Fthumbs', '').replace('_200x200', '')
	liff.shareTargetPicker([
	{
	type: 'image',
	previewImageUrl: thumbUrl,
	originalContentUrl: origitalUrl
	}
	])
	}
	}
	</script>
	</body>
	</html>