Upload Files with SDK

Learn how to upload image and text files for IP assets

🚧

This is an alpha release of Story Protocol

This release of Story Protocol is alpha and not production complete yet, which means that we could change the schemas, smart contract deployment and backend endpoints that at any time without warning or notice to you. When Story Protocol is production ready, we will remove this warning and will endeavor to ensure the production quality of the protocol and update the document in regular basis with formal notice.

In the tutorial, we will create an IP asset for a story Alice in Wonderland. Before creating the IP asset, we need to create content for the IP asset. The IP asset consists of a text file with two images. This text file tells the story of Alice in Wonderland, and the two images are used for describing the story. To represent the image files and the format of the story text, we will use the markdown (*.md) file for the story.

First, let's upload the image file WhiteRabbit.png to Arweave by using Story Protocol SDK. Arweave is a decentralized file system similar to IPFS. Story Protocol uses Arweave for hosting the data files, images and metadata.

πŸ“˜

Note

All the images used on https://docs.storyprotocol.xyz/ are coming from public domain or owned by Story Protocol Official. You can file all images for this tutorial (including the source code of the tutorial) at https://github.com/storyprotocol/my-story-protocol-example/tree/main/sdk/tutorial.

Here is the code of uploading the image file:

// Upload the image (WhiteRabbit.png) for IP Asset
const imageRabbitFile = readFileSync(__dirname + '/WhiteRabbit.png');
const imageRabbitPath = await client.platform.uploadFile(imageRabbitFile, 'image/x-png');
console.log("Image (WhiteRabbit.png) is uploaded to", imageRabbitPath.uri);

The preceding code firstly read the file WhiteRabbit.png from current folder, and calls the platform API client's function uploadFile to upload the file. The last line of the code prints the uploaded URI (imageRabbitPath.uri) of this file.

Similarly, we can use the SDK to upload another image file AliceAndFlamingo.png with the following code:

// Upload the image (AliceAndFlamingo.png) for IP Asset
const imageFlamingoFile = readFileSync(__dirname + '/AliceAndFlamingo.png')
const imageFlamingoPath = await client.platform.uploadFile(imageFlamingoFile, 'image/x-png');
console.log("Image (WhiteRabbit.png) is uploaded to", imageFlamingoPath.uri);

The images are contained in the story. The image WhiteRabbit.png will show in the story when it is telling that the white rabbit flees in panic. The image AliceAndFlamingo.png will show that Alice is holding the flamingo bird in her arm. You can include the URIs returned from calling uploadFile in the markdown file manually. Here, let's update the file programmatically with the following code:

// Update the URL links in the markdown file
const mdOldFile = readFileSync(__dirname + '/AliceInWonderland.md', 'utf-8');
writeFileSync(
  __dirname + '/AliceInWonderland_new.md',
  mdOldFile.replace(/#Rabbit#/g, imageRabbitPath.uri).replace(/#Flamingo#/g, imageFlamingoPath.uri),
  'utf-8'
)

Once we have the markdown file updated, the new markdown file is saved in AliceInWonderland_new.md , we can upload the markdown file with the SDK's uploadFile function:

// Upload the new markdown file for IP Asset
const mdNewFile = readFileSync(__dirname + '/AliceInWonderland_new.md');
const mdFilePath = await client.platform.uploadFile(mdNewFile, 'image/markdown');
console.log("Markdown File (AliceInWonderland_new.md) is uploaded to", mdFilePath.uri);

If everything runs successfully, you will see the Arweave links are printed out in console by running the code on this page, for example:

...
Image (WhiteRabbit.png) is uploaded to https://arweave.net/RGbhTnhMsWpUVK2OpR_iq9vnYPLSpEqbtW9bqJo_354
Image (WhiteRabbit.png) is uploaded to https://arweave.net/aqk4Hk8oT_Tq2x_mwEAizSLm_ROJkuUyk7z0Ybin-Co
Markdown File (AliceInWonderland_new.md) is uploaded to https://arweave.net/Um3X0AtMlrtmJu0N0jXTede4jHNeOxksczljn1l2jCc

Next, we will create IP Asset with the uploaded contents on the next page.