Uploading an Image to IPFS

Angello Pozo
Jul 25, 2017 · 7 min read

IPFS (Interplanetary Files System) promises a better and more efficient way of sharing files. For example, instead of having everyone in a classroom download a file from Dropbox, why not from someone else in the room? This removes a lot network overhead. But what about getting files onto the IPFS network? I will go over an example that uploads a file from the browser to IPFS directly.


Audience:

IPFS Primer:

Normal Uploading:

There is nothing wrong with this structure. It allows a developer to write server code to modify the image for example. There also could be multiple storage solutions. All these solutions increase the amount of bandwidth used by the application. A 1 mb upload becomes 2 mb because the server needs to upload it onto the storage solution. Bandwidth is cheap, but it can be cheaper!

Browser to IPFS:

This is nice because we save on network costs. This is also doable with current storage platforms. They may be required to do a few authentication requests, but it’s still doable. You will see how easy it will be to upload directly to IPFS.

Project Setup:

  1. ipfs init
  2. ipfs daemon

That will start your IPFS server locally. Lastly we need to configure IPFS to allow CORS. We will have to stop the ipfs (ctrl- c) and modify a few things:

  1. Stop IPFS with ctrl-c
  2. ipfs config -- json API.HTTPHeaders.Access-Control-Allow-Methods ‘[“PUT”, “GET”, “POST”, “OPTIONS”]’
  3. ipfs config — json API.HTTPHeaders.Access-Control-Allow-Origin ‘[“*”]’
  4. ipfs daemon

We are configuring ipfs to return the necessary headers for CORS to work. The last command just restarts the ipfs service locally.

Hosting a Website:

Using node to host website:

  1. npm install http-server -g
  2. http-server -p 1337

Using Python to host a website:

  1. python -m SimpleHTTPServer 1337

The above starts an HTTP server on port 1337 in the local directory.

Using the file system to host a website:

However you host the index.html file, you should see the following:

Example:

  1. Create HTML input field with id="photo"
  2. Create HTML button with onclick="upload()"
  3. upload() creates instance const reader = new FileReader()
  4. Give reader.readAsArrayBuffer the file inside id="photo" element
  5. Bind to reader event emitter method onloaded
  6. Initialize ipfs object bound to local IPFS node on port 5001
  7. Create buffer of the image that was read from reader.result
  8. Call ipfs.files.add with buffer with callback function
  9. Read result variable
  10. Create the url string
  11. Modify data on DOM directly

API Details:

We will use FileReader to access file data, create a browser supported buffer array, and then finally upload the image to IPFS using js-ipfs-api.

FileReader:

Buffer:

JS-IPFS-API:

Considerations:

One way to solve the issues above is to modify the localhost and 5001 ports and host your own IPFS node. This means you have to manage a few servers, but at least you don’t have a server processing images between the uploading. But if your server turns off, then the image becomes unavailable again. To survive restarts, you could use ipfs.pin to tell IPFS to store image in a directory instead of memory. This works for the single server, but not all the other nodes you are hosting.

When managing servers, you can think of them as pets or cattle. A pet server is not easily replaced while a cattle server is. Using a tool like Ansible reduces the workload needed to manage servers.

Let’s get back to the topic of having images available in IPFS after servers are destroyed. The goal is to have the uploaded image on as many servers as possible so it becomes more accessible. After an image is uploaded to one IPFS node, maybe the node uploads it again to other servers. Therefore the same image lives on many IPFS servers. Another way is to save it on a cloud platform like AWS or GCE. Then when accessing images, if IPFS is slow or does not return, use the AWS or GCE image URL.

This issue of file availability is open at the moment. IPFS in and of itself does not do that work. The availability can be written on top of IPFS. They are working on FileCoin to incentivize people to store data. People uploading win by having people save data, and hosts win by receiving FileCoin for their work. There are also other protocols like SaiCoin, StorJ, and MainSafe.

Conclusion:

Angello Pozo

Written by

Co-Founder of HelloSugoi. Hacking away on Ethereum (blockchain) DApps. Follow me on https://twitter.com/angellopozo