Uploading an image onto IPFS

Uploading an image from the frontend onto IPFS without storing the image in the express server.

IPFS Logo

In this article, I am going to explain how one can upload an image directly onto ipfs without storing it in the server. For this, I am going to use npm packages Multer and ipfs.

First Step
For this demonstration, I am going to create a simple HTML page consisting of a form that accepts an image as an input and I am going to use Axios CDN in the frontend to send an HTTP request to the server.

Axios cdn — https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

Form element which has to be in the HTML file.

Second Step
Create an app.js file and add click event listener to the form submit button.

Whenever we click the submit button this event-listener should be triggered and it should create a form-data and send it as a POST request to our Express server.

Code to handle the submit event

Third Step

Now our front-end part is over then we have to set up the server and create the route handlers to handle this request.

Router to handle the post request

And then we have to configure multer to read the image and store it as a buffer, and then directly uploading the buffer onto ipfs by creating an ipfs node. This will return some data in response that has the required CID which will uniquely locate the image in ipfs.

Configuring multer and storing the image onto IPFS

Conclusion

Thus we have taken the image from the frontend, passed it to the backend through axios, configured multer a bit and then we uploaded our image onto ipfs. The content field could be modified to hold any documents or buffer etc.

That’s all guys. Hope you’ve enjoyed my article. See you in the next one.