Как загружать и получать изображения из Arweave

Хранение данных децентрализованным способом невероятно важно при создании децентрализованного приложения, а arweave упрощает постоянное хранение данных в децентрализованной сети.

Вот как загрузить файл изображения и отобразить его из arweave в Javascript.

Я буду использовать Reactjs, Nodejs и функции Firebase, но вы можете использовать практически любой фреймворк или бэкэнд.

Шаг 1) Настройте наш интерфейс

import React from 'react'
const AddImage = () => {
    const hiddenFileInput = React.useRef(null)
    const [file, setFile] = React.useState(null)
    const handleChange = event => {
        const fileUploaded = event.target.files[0]
        setFile(fileUploaded)
    }
     return (
        <div>
            <button type="button" onClick={handleClick}>
            Upload a file
            </button>
            <input
            type="file"
            name="tokenImage"
            ref={hiddenFileInput}
            onChange={handleChange}
            style={{ display: 'none' }}
            />
        </div>
    )
}
export default AddImage

Этот компонент обрабатывает ввод изображения и сохраняет его в переменной состояния. Примечание. Я удалил все стили для простоты.

Шаг 2) Загрузите файл в хранилище Firebase

import { getStorage, ref, getDownloadURL, uploadBytes } from 'firebase/storage'
const filePath = await uploadFile(file)
const uploadFile = async file => {
  const storage = getStorage()
  const randomId = makeid(21)
  const filePath = 'files/' + randomId + file.name
  const storageRef = ref(storage, filePath)
  await uploadBytes(storageRef, file).then(snapshot => {
    console.log('Uploaded file!: ', filePath)
  })
 return getDownloadURL(storageRef).then(url => {
    return filePath
  })
}

Шаг 3) Настройка функции Arweave

Наша функция firebase будет обертывать пакет arweave JS.

Вы можете получить свой закрытый ключ arweave, создав новый кошелек Arweave:

• АрКоннект
• Арвей Коннект

const arweaveKey = "XXX...XX"
// Arweave Testnet
// const arweave = Arweave.init({
//   host: '127.0.0.1',
//   port: 1984,
//   protocol: 'http',
// })
// Arweave Mainnet
const arweave = Arweave.init({
  host: 'arweave.net',
  port: 443,
  protocol: 'https',
})
export const uploadToArweave = functions.https.onCall(async (data) => {
  const { filePath } = data
  // upload to arweave and get id
  async function createTransaction(arrayBuffer: ArrayBuffer) {
    if (!arrayBuffer) return
   try {
      /* creates and sends transaction to Arweave */
      const transaction = await arweave.createTransaction(
        { data: arrayBuffer },
        arweaveKey,
      )
      await arweave.transactions.sign(transaction, arweaveKey)
      const uploader = await      
      arweave.transactions.getUploader(transaction)
     /* upload indicator */
      while (!uploader.isComplete) {
        await uploader.uploadChunk()
        console.log(
          `${uploader.pctComplete}% complete,   ${uploader.uploadedChunks}/${uploader.totalChunks}`,
        )
      }
      console.log('transaction: ', transaction)
      return transaction.id
    } catch (err) {
      console.log('createTransaction error: ', err)
    }
   }
  // download file from google bucket
  const [bufferFile] = await admin
    .storage()
    .bucket('bucket-name')
    .file(filePath)
    .download()
  const toArrayBuffer = (buf: Buffer) => {
    const ab = new ArrayBuffer(buf.length)
    const view = new Uint8Array(ab)
    for (let i = 0; i < buf.length; ++i) {
      view[i] = buf[i]
    }
    return ab
  }
  const arrayBuffer = await toArrayBuffer(bufferFile)
  const id = await createTransaction(arrayBuffer)
  return id
})

Наша функция принимает путь к файлу, указывающий на расположение нашего файла в Google Cloud Storage, а затем преобразует его в ArrayBuffer для отправки в Arweave.

Оттуда Arweave возвращает идентификатор транзакции, который мы можем использовать для получения нашего файла.

Шаг 4) Отображение изображения в нашем интерфейсе

Мы можем использовать JS-пакет arweave для получения необработанных данных из транзакции или просто отобразить файл с удаленного URL-адреса arweave. Я выбрал последнее, потому что это проще, но вот как скачать транзакцию arweave

// Get the base64url encoded string
arweave.transactions.getData('bNbA3TEQVL60xlgCcqdz4ZPHFZ711cZ3hmkpGttDt_U').then(data => {
  console.log(data);
  // CjwhRE9DVFlQRSBodG1sPgo...
});
// Get the data decoded to a Uint8Array for binary data
arweave.transactions.getData('bNbA3TEQVL60xlgCcqdz4ZPHFZ711cZ3hmkpGttDt_U', {decode: true}).then(data => {
  console.log(data);
  // Uint8Array [10, 60, 33, 68, ...]
});
// Get the data decode as string data
arweave.transactions.getData('bNbA3TEQVL60xlgCcqdz4ZPHFZ711cZ3hmkpGttDt_U', {decode: true, string: true}).then(data => {
  console.log(data);
  // <!DOCTYPE HTML>...
});

Чтобы отобразить данные транзакции, вы можете просто добавить идентификатор транзакции к URL-адресу arweave:

const image = https://arweave.net/<tx-id-goes-here>

Тогда все, что вам нужно сделать, это добавить компонент изображения

<img alt="arweave" style={{ width: '200px' }} src={image}/>

Шаг 5) Празднуйте! 🎉

Теперь вы можете хранить и отображать файлы в децентрализованной сети с помощью arweave.

Если вы хотите узнать больше, ознакомьтесь с другими моими проектами Ownchain и Mortar, которые используют arweave для хранения файлов.