
I suggest you include the **web3** environment in your growth strategy. Therefore, you should use technical implementations decentralized networks like [subgraph](https://thegraph.com/explorer) or **IPFS**. 

<hr/>

In this guide, you'll learn how to send image files to **[IPFS](https://ipfs.io/)** using **ipfs-http-client** and Nextjs

You can see the demo [here](https://url-to-ipfs.netlify.app/) or jump to directly [GitHub](https://github.com/raufsamestone/url-to-ipfs)

![Demo](https://res.cloudinary.com/raufsamestone/image/upload/v1648465550/blog-contents/ipfs/ss_eul4ra.jpg)

## Pre-requests

- Node 15 >

## Getting started

Create a simple next js app:

```jsx
npx create-next-app ipfs
```

Add IPFS HTTP client library using yarn:

```jsx
ipfs-http-client
```

Create a new constant for **IPFS** gateway. In this case, we will use [Infura](https://docs.infura.io/infura) API.

```jsx
const client = create("https://ipfs.infura.io:5001/api/v0");
```

Get a random image URL from **Unsplash.** You can see more detail in [here](https://unsplash.com/documentation#get-a-random-photo)**.**  

```jsx
async function getImage() {
fetch(https://source.unsplash.com/500x500/?beach).then((response) => {
let imageURL = response.url;
setImageURL(imageURL);
});
}
```

Or you can use your own fetching solution like custom form data, Cloudinary etc.

Then upload your file to IPFS.

The critical thing is, you should fetch the **image URL**  as a **blob** object.

```jsx
const blobFile = await fetch(imageURL).then((r) => r.blob());
```

Create a new function as **uploadFile**

```jsx
async function uploadFile() {
const blobFile = await fetch(imageURL).then((r) => r.blob());
try {
const added = await client.add(blobFile);
const url = https://ipfs.infura.io/ipfs/${added.path};
updateIPFSURL(url);
} catch (error) {
console.log("Error uploading file: ", error);
}
}
```

Finally, you are ready to fetch and image image object from URL and send to IPFS. 

Clone the full repository [here](https://github.com/raufsamestone/url-to-ipfs) and run;

```jsx
yarn dev
```

<hr/>

You can see the more detailed cases about Web3 from Nader Dabit’s posts [here](https://dev.to/edge-and-node/uploading-files-to-ipfs-from-a-web-application-50a).

<hr/>

Thanks for reading. 👋 Don't forget to subscribe me on [Medium](https://raufsamestone.medium.com/subscribe) or [Dev.to](https://dev.to/raufsamestone) 
