How To Upload Files Into Arweave
The protocol work on the concept that matches the requirement of people (any organizations or individuals) who need data storage with those people who have some spare drive space to contribute in a decentralized distributed environment.
On top of , there exists a permanent and decentralized web, known as permaweb. It mainly comprises a set of modular and interchangeable protocols that can host a full, decentralized web application.
So, in this article, we will explain how you can keep your important data safe by uploading it into the permanent storage system by Arweave.
Table of Contents
Users need to have an AR token in their digital wallet to access the Arweave dApps. The platform offers sufficient free AR tokens from the Arweave faucet to upload a few files. You can follow the steps (Claim AR tokens) shown in this article to get some free AR tokens to start with. We will generate a wallet while claiming free tokens from the faucet. The wallet’s key file (.json file) will be downloaded into the user’s system that we will use later to connect with the Ardrive application. You also need a Twitter account to start working with the Arweave platform.
Users who wish to get more AR tokens can buy from any supported exchanges, and later use the ArConnect extension to create a wallet and transfer tokens into it.
Claim AR Token
To use Arweave, visit the webpage. You can see the below-landing page. At the top right corner, you may notice the Claim A Token button.
Click on it, and the application will redirect you to the Arweave faucet page where a few instructions are written:
- Download & save your new wallet (.JSON key file). You only have 1 chance to do this
- Post the tweet using your Twitter account
Users need to follow these instructions to get the AR token.
To proceed, click on the Check-box, and click on Continue.
You will receive a prompt on your computer screen to download the key file (.json file) of your wallet. Click on Download, and save the file properly. We will use this file to set up our Ardrive account.
Once you download the file, click on . In the later step, you need to post a tweet from your personal Twitter account (see the below screenshot)
Click on Open Tweet Pop-Up. Your Twitter page will open with a similar pop-up message (see below screenshot).
This process will verify your Arweave address. Click on to post it on your profile.
Once you finish this step, you will see that the application has started processing the tweet data.
In the end, you will receive a completion message on your screen for your successful token claiming process.
ArDrive is a file storage decentralized application designed on top of Arweave. Users can store files inside their Ardrive account. They can create folders and organize their data accordingly. The files can be stored privately. Users can generate unique links and share them with other users publicly.
To access Ardrive, scroll down the Arweave webpage, and you will find the option to connect with Ardrive.
Click on Store Permanently, and the application will lead you to the Ardrive login page.
Click on Select Wallet, and browse your computer to select the desired. JSON file (key file) for your wallet.
Next, provide your credentials i.e Username and Password correctly, otherwise, you won’t be able to access the wallet.
You can now see the Ardrive landing page (see the below screenshot).
Upload Files in Ardrive
Click on , and you will get various activities/features that you can do in your Ardrive profile:
- Create New Folder
- Upload Files
- Upload Folder
- New Drive
- Attach Drive
- Create Manifest
If you want to store your files in a folder, then you can create one by going to the New Folder option. Provide a name, and finally approve by clicking on the button.
If you wish to upload a file (any file) inside a folder, then navigate to the desired folder. Now, click on Upload Files. The browser option will open and it will allow you to search the file in your local drive.
Select the file, you can see that the platform is charging a very nominal fee (in AR token) to upload the file. Confirm the process by hitting the button.
You can now see your files inside the desired folder.
Conclusion
Arweave aims to provide a solution to one of the most common issues with data storage. Users can easily use the Arweave application (ArDrive) to store their data permanently and safely. The app allows you to upload bulk files, drives, etc at a very low fee.
. Finally, for more cryptocurrency news, check out the Altcoin BuzzYouTube channel
. Above all, find the most undervalued gems, up-to-date research and NFT buys with Altcoin Buzz Access. Join us for $99 per month now.
How to upload files to ardrive manually and with ardrive CLI?
In the following post I will explaining what is Arweave, how to create a wallet, and also how to upload files manually and with the CLI.
For this example I will be uploading some free images from unsplash.
What is Arweave?.
According to the Arweave website, Arweave is a protocol that allows you to store data permanently, sustainably, with a single upfront fee.
You can think of it as an alternative to IPFS
With Ardrive, we will able to upload and share our files, there is also a fee calculator in case you want to know how much you will pay for the amount of data that you want store.
Prerequisites
- Node.js installed
- Ardrive CLI installed
Creating Our Project
- Open your terminal and type the following commands
- mkdir ardrive-tutorial
- cd ardrive-tutorial
- npm init —y
- Open the project with your preferred code editor
Dependencies
To install dependencies go to your project folder open a terminal and type the following.
Exit fullscreen mode
We will be using import so open package.json and add the following line «type» : «module».
Exit fullscreen mode
Project File Structure
Exit fullscreen mode
Table of Contents
1. Log in to ArDrive
This is not difficult to do, assuming that you created your wallet, you just go to Ardrive login page, and log in with your wallet.
The user and password are for private folders.
2. Uploading Files to ArDrive
Remember that all the files will be permanently stored, that means that the files cannot be deleted.
The first thing that we will do is create a new drive by clicking on the New button.
Then set a name and choose between public or private, I am going to choose public.
Then we are going to click the New button again, and this time select «upload folder» because we are going to upload a folder with files in it, like I said before in this example I will be using some free images from unsplash. you can use whatever you want, just make sure that you have the permission to upload the files.
You will also be able to see the price to upload those files, so you can decide if you want to upload them.
Now you will be able to see a new folder in your drive, and if we open it we will be able to see the files in it, also we can download them, get details of each file, a preview link, etc.
3. Uploading files with ArDrive CLI
To get more info about the commands that can be used type ardrive -h or in case you want more usage information about a command ardrive create-drive -h .
Now we are going to repeat the process but using ardrive cli instead, so the first thing that we are going to do is open our terminal and check if the ardrive CLI is installed with this command:
Exit fullscreen mode
You should get your ardrive CLI version.
Exit fullscreen mode
Then we are going to create a new drive, we must specify our wallet location and a name for the new drive, you can also specify if you want it to be a private drive with -p
Exit fullscreen mode
You should get an object with information about the drive and the folder like the following one:
Exit fullscreen mode
Then we are going to upload some files to it, if we want upload them to the root folder we will need to add the entityId of the previous object with «type»: «folder» , anyways if you open your ardrive and look for the drive that you created you can get the root folder id like this.
We also need the file location, or folder location that we want to upload
Exit fullscreen mode
You will get a message like this:
Exit fullscreen mode
So as you can see, a new folder was created, also two files with it.
Now we can download that folder (it will be downloaded in your current console location) with this command:
Exit fullscreen mode
4. Script to create a .json with files info
Now we are going to create a custom script to get files and folder information and finally create a .json file with it that would be helpful for a real life NFT project.
First create a .env file in the root of your project and create a WALLET_PATH variable and add your wallet path like this C:\\YOUR\\WALLET\\PATH .
Then go to src folder and open index.js , copy and paste the following code, don’t worry I will explain it step by step.
I am going to use a folder form our previous example, but you can also work for a folder arDrive structure like this.
Exit fullscreen mode
We are going to import
We are going to create a .json file at the end of our script so we need to use fs .
The script will prompt the user for the folder ID, with the folder ID we can get all folders inside that folder and we can also get the drive ID that will be needed to build the link to the folder.
We need sort the folders in case there are more than one and have a project name e.g. (PROJECT_NAME_1, PROJECT_NAME_2, PROJECT_NAME_3, etc) because probably we won’t get them sorted by default.
We will create a const foldersId = [] that will store every folder name and folder id.
Now we will use a for loop to loop through foldersId and will get the files of each folder with .
Exit fullscreen mode
We will sort those files because we could obtain them unsorted.
Then we are going to create a const filesInformation = [] that will store the information of each one of the files per folder.
After that we are going to use another for loop trough them inside our current loop, So with this approach we will get all the files info from the current folder.
Now we will store the folderName, folderLink, and also the filesInformation (fileName, fileId, and fileLink from the previous loop) and will be stored in a Files array.
Finally we will create a json file and we will write the stored data in Files.
Exit fullscreen mode
The final output will be similar to this:
Exit fullscreen mode
5. Conclusion
We have learned how to upload and share files with arDrive manually and with the CLI, also how to create a custom script to interact with the files uploaded.
I really hope you have been able to follow the post without any trouble, otherwise I apologize, please leave me your doubts or comments.
You can also find me on Discord Appu#9136
Thank you for your time.
Top comments (0)
For further actions, you may consider blocking this person and/or reporting abuse
Programmatically uploading NFT PNGs to Arweave through JS APIs ��
If you have an NFT project that’s dynamically generating a PNG during mint time, you need a way to upload the new image to Arweave. Usually, files are uploaded via the Arkb CLI tool, but in our case, we would need to go through Arweave JS library to be able to do so programmatically.
As I was following the code examples, I realized that there aren’t any public tutorials or documentation describing the process, so thought I would write down some of my findings ��
To start off, our goal is simple: programmatically upload our NFT PNGs to Arweave ✅ let’s see how we can go about it!
Should it be a backend API i.e. https://…/api/upload-png?
The quick answer is yes! Since uploading to Arweave requires a payment and we don’t want the user to go through the pain of installing an Arweave compatible wallet, we probably are better off paying it by ourselves through using our private keys. Since we don’t want to ship our private keys, this leads us to using a simple backend API that takes in a PNG and returns back an Arweave URL. Pretty simple, right?
Where should we store our keys?
Because we don’t want to manually sign every single Arweave upload transaction, we want to be able store our private keys somewhere. If you’re using React or Next.js, .env files work out great. Just make sure you’re not using REACT_APP or NEXT_PUBLIC to make sure the keys are private.
The JSON key value is huge, but works out just fine! Now we can read in the variable through process.env.ARWEAVE_KEY as follows:
JWKInterace is just a simple object interface provided by Arweave requiring the loaded key to conform the JSON Web Key standard, so nothing to worry about. The alternative would be use to the file system and then read in through something like readFileSync(..) but using the fs library is always a PITA.
So how do we do it?
I will be using Next.js API Routes, but the code should be simple enough to be ported to any backend wrapper that you might be using. Good idea to start with reading arweave-js’s documentation; honestly, the only parts that were missing for me was how to handle PNGs, so will try to cover most of that below. Read the code and I will explain each section right after.
So here is what’s going on:
- Get our PNG image. The idea here is that the client on the browser passes the backend the PNG to upload to Arweave; I decided to base64 encode my PNG, but you can pass in data as a binary blob if you wish.
- Connect to Arweave. Just following the example in their documentation.
- Load our private key. As described above, I am storing them in .env ; this helps me both read it in quickly and avoid uploading it to my git repo by adding .env to my .gitignore .
- Check our ballance. Production version would probably log some error we can detect and handle quickly. Right now, just have fun knowing that Arweave tokens are counted in Winstons ��
- Create a transaction, upload the PNG and check status. Ok, this is the important part. You need to set the tag Content-Type to image/png or it won’t work! Because arweaveKey has our private key, we don’t actually need to sign through the browser, which is pretty nifty! You can either upload through chunking or use the post() function to do all at once; for smaller files, this way works better. The documentation has more to say. When we get the response from the post function, it’s just for posting the transaction, not that it has succeeded — to do that, we need to fetch the status separately. If it’s 200, we’re good to go!
- Construct the URL with the transaction ID. It’s a bit annoying, but you gotta go digging in the documentation to figure out the right format. It’s https://www.arweave.net/$
?ext=png . You can also use wagmify’s to type in ar TRANSACTION_ID in your URL bar to test it out!
How to call the API?
We make a POST request to our API, pass in the data, and get the URI in return. Pretty simple �� I really like using the fetch(..) function, see below:
And that’s pretty much it! Hope this was helpful. If you have any questions, feel free to reach out on Twitter!
Saved searches
Use saved searches to filter your results more quickly
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
Upload NFT metadata to the Arweave network
thuglabs/arweave-image-uploader
Name already in use
- Local
- Codespaces
Use Git or checkout with SVN using the web URL.
Work fast with our official CLI. Learn more about the CLI.
Sign In Required
Please sign in to use Codespaces.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching Xcode
If nothing happens, download Xcode and try again.
Launching Visual Studio Code
Your codespace will open once ready.
There was a problem preparing your codespace, please try again.
Latest commit
Git stats
Files
Failed to load latest commit information.
README.md
Arweave NFT Metadata Uploaded
This package can be used to create metadata files on the Arweave network. It first uploads NFT image and then creates a metadata JSON file for this NFT using this image and default fields from file uploader.js . It is created with an idea to be used with Solana blockchain and uses Metaplex NFT Standard but it isn’t bound to Solana in any case and can be used with any other blockchain as well.
⚠️ Important note
I’ve disabled line which generates new AR wallet for the script use. From my understanding, newly generated wallets have 0 balance and shouldn’t be able to approve TX on Arweave. Despite of it the script works well ����♂️. So, to avoid any possible issues I’ve disabled it. Consider to use local Arweave wallet instead or this tool instead: solana-nft-uploader by @moshthepitt.
- all images need to be in PNG format
- all images need to be placed in public/images/ folder
- CSV data need to be placed in public/data.csv
The result json file will be saved to ./public/arweave-images.json . This files consists of arrays of NFT objects with name / uri fields
There is React app to manually validate items. But it needs to be updated for better use.