Uploading files to Arweave using arweave.js

Arweave.org

In this article, we will learn how to confidently upload files onto Arweave using its SDK library Arweave.js.

What is Arweave?

Arweave serves as a decentralized permanent storage solution for all types of files, using the AR token to incentivize usage. To store data on Arweave, you’ll need AR tokens, which are available for trading on centralized crypto exchanges, such as Deepcoin.

When developing a decentralized app or Dapp that requires file storage for images, NFT images, NFT metadata, or other file types, Arweave is an excellent choice.

This article provides an overview of Arweave and its capabilities. For more in-depth information, refer to the mentioned medium article.

What is Arweave?

Uploading to Arweave

In this tutorial, we will harness the power of Arlocal, an npm package, to set up a local blockchain Arweave network. By doing so, we can leverage all the features without depleting our AR Tokens. Our approach will solely rely on the frontend, with nextjs.

Let’s set our environment up!

1. Creating a next App

npm create vite@latest

Set up your next project as you normally would.

2. Installing sdk

npm install --save arweave

3. Getting keys from the wallet

When using arweave, files are sent as transactions similar to smart contracts, so private keys are required to sign the transaction. You can obtain the key using the arconnect wallet. To do this, go to the settings by clicking on the three dots. Once the settings window opens up, navigate to the wallets section, select your account, and then click on the purple “export keyfile” button as shown in the screenshot.

After exporting the file, in the project directory create a file named .env and create a variable named ARWEAVE_KEY and make the contents of the file equal to the contents of the exported keyfile.

3. Installing Arlocal

npm i arlocal

After resolving the dependencies, in another terminal run:

npx arlocal

This will start a local Arweave network on your local machine on port 1984.

Drafting a frontend

In this tutorial, We will be just creating a button to choose a file and uploading the file.

What are we doing to upload to arweave?

1. Intialization

First, the Arweave client is initialized with connection details for either a local node or the mainnet:

const initOptionsLocal = {
  host: "localhost",
  port: 1984,
  protocol: "http",
  timeout: 20000,
};

const arweave = Arweave.init(initOptionsLocal); // For local node
// For mainnet, use initOptionsMainnet and uncomment:
// const arweave = Arweave.init(initOptionsMainnet);

2. Wallet Setup

The wallet address and balance are retrieved, and for local use, tokens are minted to the wallet:

const arweaveUpload = async (key, data, contentType = "image/png") => {
  try {
    const arweaveWallet = await arweave.wallets.jwkToAddress(key);
    const arweaveWalletBalance = await arweave.wallets.getBalance(arweaveWallet);

    // For local node: mint tokens
    const tokens = arweave.ar.arToWinston("90"); // 90 AR
    await arweave.api.get(`/mint/${arweaveWallet}/${tokens}`);
  } catch (error) {
    console.error("Error in upload :", error);
  }
};

3. Transaction Creation

A transaction is created with the file data and tagged with the appropriate content type:

const tx = await arweave.createTransaction({ data: data }, key);
tx.addTag("Content-Type", contentType);

4. Transaction Signing and Posting

await arweave.transactions.sign(tx, key);
const response = await arweave.transactions.post(tx);

5. Confirmation

The transaction status is checked, and the file URL is generated and displayed to confirm a successful upload:

const status = await arweave.transactions.getStatus(tx.id);
console.log("status", status);

return tx;

Demo Working

That’s it it requires to upload to arweave! Hope This article has been helpful to you! Thank you!! 💗