# An easy guide on how to upload files to Filebase?

By [Vivek](https://paragraph.com/@vivek) · 2022-12-08

---

If you are building a decentralized App, in most cases you need to store your images, files, videos on a decentralized platform like IPFS, File coin, or Filebase, so in this blog, we will discuss how you can upload your files to Filebase.

Before jumping to code, first, let’s discuss what decentralized storage is?

So As per the name, Decentralized storage means it is not centralized and all of your data is not stored at some data center that is controlled by a few. In Decentralized storage, users can store their data regardless of centers. This system uses a peer-to-peer network-model to achieve decentralization.

*   IPFS\[Inter Planetary File System\] is a peer-to-peer hypermedia protocol designed to store and share data in a decentralized manner.[Know about IPFS](https://ipfs.io/)
    
*   File-base is the first S3-compatible object storage platform that allows you to store data.[More about File-base](https://filebase.com/)
    

So let us start our journey to uploading files to file-base.

Here, we are going to upload files using the command-line , in the next blog I will show how you can do this with user input and with an cool front-end.

Prerequisites:

*   NodeJS installed on your Machine \[If not you can install from here [Download NodeJS](https://nodejs.org/en/download/)\]
    

\-A File-base Account [You can create-one for free](https://console.filebase.com/signup)

\-A basic knowledge of JavaScript(of course not mandatory)

So Let's start.

1.  Open your Terminal and run this command
    

    mkdir filebaseupload-demo
    cd filebaseupload-demo
    

This will create a new folder named \*\*filebaseupload-demo \*\*by cd command we will enter in our folder.

2.  Run following command
    

    npm init -y
    

This will create a package.json

3.  Now open our folder **filebaseupload-demo** with your code editor(VS-Code, Sublime, Atom or Whatever you use)
    

I prefer to use VS-Code.

At this Point your Folder-structure should look like this.

![p1.jpg](https://storage.googleapis.com/papyrus_images/08926d322f47a499d5db396541c8555e3e0f5c198db1c77e7b27749a96dfb0ce.jpg)

p1.jpg

4)Now create a file named `index.js`

5)As we are using File-base's S3 compatible API, We need to add some dependencies Now Open Your Terminal in VS Code and run following commands

    npm install aws-sdk dotenv fs
    

This will install

*   `aws-sdk` : aws-sdk for interacting with aws-services throught Javascript
    
*   `dotenv` : loads our environment variable from .env to `process.env.VARIABLE_NAME`
    
*   `fs` : packge used to read and write files
    

6.  Now, create a **.env** file in our root directory
    

Now in .env file add environment variable that we need

    AWS_ACCESS_KEY_ID=YOUR_ACCES_KEY_FROM_FILEBASE
    AWS_SECRET_ACCESS_KEY=YOUR_ SECRET_KEY_FROM_FILEBASE
    BUCKET_NAME=YOUR_FILEBASE_BUCKET_NAME
    

Here is a guide you can get your keys:

*   Go to [Filebase console](https://console.filebase.com/) and sign-in
    

![filebase](https://storage.googleapis.com/papyrus_images/01618285cb37ca90a147952bf0861bb592cd9f39a60e8d249fa11fa5c6ed3675.jpg)

filebase

Now log-in with your account On successful login you should see screen like this

![filebase](https://storage.googleapis.com/papyrus_images/21c8b0cdbf50a1de0fe572694ea64e04418102ca26569f003127d20f0b890b3c.jpg)

filebase

Now Click on Buckets in left-sidebar.

![filebase](https://storage.googleapis.com/papyrus_images/b4df3c59bf89ea875973ade913f79e8b50825c05bf28f9e4873c6591aab0f672.png)

filebase

Now click on create bucket

![filebase](https://storage.googleapis.com/papyrus_images/f2ece6f4c46a05f982d9244425c018858c7027f66079ecb18ea6c2dbfd6ddaeb.png)

filebase

Now Enter the bucket name `demo-upload` and click on `create-bucket` button

![filebase](https://storage.googleapis.com/papyrus_images/a7ae4e7826b4832b9d1c461b96f49fa25c95b4ca85ec0c61db7474710870326f.jpg)

filebase

Now click on the bucket name

Now click on Access Keys in Sidebar and you should see your keys

![keys.png](https://storage.googleapis.com/papyrus_images/dfbc320de5781fdbb7fb3ae88d127811e60532b555e081bbf5d2d686f2937cf7.png)

keys.png

Now,

*   copy KEY and paste at YOUR\_ACCES\_KEY\_FROM\_FILEBASE in .env
    
*   copy SECRET and paste at YOUR\_ SECRET\_KEY\_FROM\_FILEBASE in .env
    
*   in BUCKET\_NAME write our bucket name in our case it is `demo-upload`
    

7.  Now Open your `index.js` and paste this code
    

    require('dotenv').config();
    const AWS = require("aws-sdk");
    const fs = require("fs");
    const s3 = new AWS.S3({
        endpoint: 'https://s3.filebase.com',
        region: 'us-east-1',
        signatureVersion: 'v4'
    });
    fs.readFile('BAYC.png', (err, data) => {
        if (err) {
            console.log(err);
            return;
        }
        const params = {
            Bucket: process.env.BUCKET_NAME,
            Key: 'test/BAYC.png',
            ContentType: 'image/png',
            Body: data,
        }
        const request = s3.putObject(params);
        request.on('httpHeaders', (statusCode, headers) => {
            console.log(`CID:${headers['x-amz-meta-cid']}`);
            console.log(`Go to https://ipfs.filebase.io/ipfs/${headers['x-amz-meta-cid']}`);
        });
        request.send();
    })
    

Now Lets under-stand our code:

    require('dotenv').config();
    const AWS = require("aws-sdk");
    const fs = require("fs");
    

Here, We are importing our aws-sdk and fs module.

    const s3 = new AWS.S3({
        endpoint: 'https://s3.filebase.com',
        region: 'us-east-1',
        signatureVersion: 'v4'
    });
    

This will create a new instance of aws's S3-storage service with given configuration endpoint.

    fs.readFile('BAYC.png', (err, data) => {
        if (err) {
            console.log(err);
            return;
        }
    

Here we are reading our file in our directory which is [BAYC Image](https://ipfs.filebase.io/ipfs/Qma9YuNh8x8V6QxP6VHvma1tAZP5BJqdMvqnyZqJizyJFt) to upload on File-base. We are using fs modules's readfile method to read the file

     const params = {
            Bucket: process.env.BUCKET_NAME,
            Key: 'test/BAYC.png',
            ContentType: 'image/png',
            Body: data,
        }
        const request = s3.putObject(params);
    

Now we have read the file.

We are declaring our parameters of an object with Bucket-name, Key\[Where to store file in bucket\], Content type of image, and Body.

After that we are calling s3's pubObject method with our parameters

     request.on('httpHeaders', (statusCode, headers) => {
            console.log(`CID:${headers['x-amz-meta-cid']}`);
            console.log(`Go to https://ipfs.filebase.io/ipfs/${headers['x-amz-meta-cid']}`);
        });
    request.send();
    

request.on() is the function that listens to events emitted by the remote server.

When our remote server sends the httpHeaders, the listener function is called and inside that, we are logging our CID by using headers\['x-amz-meta-cid\] and we are generating link for our file by `https://ipfs.filebase.io/ipfs/${headers['x-amz-meta-cid']}`

Note that In console.log we are using ` `` Backticks ` (template literals ) and not regular `""` double quotes.

Now let’s run our file,go to the terminal and run `node index.js`

If everything goes ok, you should see output like this

![output.jpg](https://storage.googleapis.com/papyrus_images/ef4d09ccee4bed751acb12d2b39be43bb0f1ce761ae3b8483da0cf650f0e97a2.jpg)

output.jpg

![image.jpg](https://storage.googleapis.com/papyrus_images/f53d767046bb170dfd95794d0ee865416b3719d3bdadb61b608d8c89402e4f83.jpg)

image.jpg

Now if you go to your file-base and navigate to your bucket you should see the image is uploaded there

![final.jpg](https://storage.googleapis.com/papyrus_images/e50fa9e3570131d9120cbc5279768e392ac8642990cb9bc6687590d5c1bbb7c6.jpg)

final.jpg

If you see , take a minute and reward yourself that you followed the entire blog

Until next Keep coding, Keep debugging

![Github](https://storage.googleapis.com/papyrus_images/e06e1aa14884244408c2bde4855cde31f835022e7fbf2fb8ad33f8f4c54e6aef.svg)

Github

---

*Originally published on [Vivek](https://paragraph.com/@vivek/an-easy-guide-on-how-to-upload-files-to-filebase)*