Post a data-item

This guide is in Javascript.

Save an Image

For this example we’ll use the image below and save it on Arweave.

Installing the required packages

This tutorial requires some packages to make uploading data easier.

npm install arweave arbundles

arweave is the official js library for interacting with the Arweave library. arbundles is the recommended library for converting data into data-item.

Uploading using a DataItem

A data-item is a special format to upload data onto Arweave. It is designed for upload a large number of transactions.

import { readFileSync } from "fs";
import { ArweaveSigner, createData } from "arbundles/node";
import Arweave from "arweave";

async function uploadFile() {
    const file = readFileSync("file.jpeg"); // The file to upload

    const jwk = JSON.parse(readFileSync("./keyfile.json").toString());
    console.log(jwk);

    const signer = new ArweaveSigner(jwk);
    const arweave = Arweave.init({
        host: "arweave.net",
        protocol: "https"
    });
    const dataItem = await createData(file, signer);
    await dataItem.sign(signer)
    console.log(dataItem.id);

    const size = dataItem.getRaw().length;

    const receipt = await postData(dataItem, size);

    const tx = await sendPaymentTransaction(size, jwk, arweave);

    await updatePaymentId(receipt.id, tx.id);
}

uploadFile().then(() => console.log("success"));

Posting the DataItem to the API

The data-item is sent to the API using a post request. The request expects a header "application/octet-stream" and the size of the data-item.

/**
 * @param dataItem {import("arbundles").DataItem}
 * @param size {number}
 * @returns {Promise<{id: string; owner: string; dataCaches: string[]; fastFinalityIndexes: string[]; version: string; deadlineHeight: number;}>}
 */
async function postData(dataItem, size) {
    const response = await fetch(`https://api.liteseed.xyz/tx`, {
        method: "POST",
        body: dataItem.getRaw(),
        headers: {"content-length": size.toString(), "content-type": "application/octet-stream"}
    });
    const receipt = await response.json();
    console.log("Receipt", receipt);
    return receipt;
}

The response would look something like this

{
  "id": "vclUklCqp6mTOoCZjkqcD2m06VRhnKtwVNSfMOPV7SM",
  "dataCaches": ["arweave.net"],
  "fastFinalityIndexes": ["arweave.net"],
  "deadlineHeight": "1460374",
  "owner": "",
  "version": "1.0.0"
}

Store the id in a database, so you can query your data later easily.

Calculating price of upload

Next we fetch the price of the upload and create a transaction to pay for the upload.

/**
 * @param {number} size
 * @param {any} jwk
 * @param {Arweave} arweave
 */
async function sendPaymentTransaction(size, jwk, arweave) {
    const response = await fetch(`https://api.liteseed.xyz/price/${size}`);
    const {price, address} = await response.json();
    console.log("Price in AR", price); // Price of upload
    console.log("Address to pay", address); // The wallet to pay
    const tx = await arweave.createTransaction({quantity: price, target: address}, jwk);
    await arweave.transactions.sign(tx, jwk);
    await arweave.transactions.post(tx);
    console.log("Transaction Id", tx.id);
    return tx;
}

Updating the Payment Information

Next, you need let the network know of the payment. Once the payment is confirmed (approximately >20 blocks on Arweave are mined), you data will be sent to Arweave in a bundle. Here the id is the id in the receipt object from the previous function call.

/**
 *
 * @param id {string}
 * @param paymentId {string}
 * @returns {Promise<any>}
 */
async function updatePaymentId(id, paymentId) {
    const response = await fetch(`https://api.liteseed.xyz/tx/${id}/${paymentId}`, {method: "PUT"});
    const payment = await response.json();
    console.log("Payment", payment);
}

You can view the file for this example here here.

Fetching the image

Fetching the image is super simple. To embed an image using an html tag you can simply use

<img src={`https://api.liteseed.xyz/tx/{id}`} alt="" />

Where id is the response of the API in the response of the upload.

To fetch the data you can simply send a GET request to /tx/{id}.

import { writeFileSync } from "fs";

/**
 *  @param {string} id
 */
async function fetchImage(id) {
  const response = await fetch(`https://api.liteseed.xyz/tx/${receipt.id}`);
  const arrayBuffer = await response.arrayBuffer();
  writeFileSync("fetched.jpg", Buffer.from(arrayBuffer));
}

fetchImage("vclUklCqp6mTOoCZjkqcD2m06VRhnKtwVNSfMOPV7SM");