# Embed IpfsCloud button to your website to upload files on Ipfs

**URL:** <https://discuss.ipfs.tech/t/embed-ipfscloud-button-to-your-website-to-upload-files-on-ipfs/4412>\
**Category:** Help\
**Tags:** js-ipfs\
**Created:** [December 6, 2018, 8:11pm UTC](https://discuss.ipfs.tech/t/embed-ipfscloud-button-to-your-website-to-upload-files-on-ipfs/4412 "2018-12-06T20:11:39Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![vasa-develop](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ipfs.tech/vasa-develop/32/1749_2.png) [@vasa-develop](https://discuss.ipfs.tech/u/vasa-develop)\
**Post date:** [December 6, 2018, 8:11pm UTC](https://discuss.ipfs.tech/t/embed-ipfscloud-button-to-your-website-to-upload-files-on-ipfs/4412/1 "2018-12-06T20:11:39Z")

</div>

# IpfsCloud Upload Button Widget

Using this you can **embed IpfsCloud button to your site**.  
A user can click the widget, which will prompt the user to add a file to be uploaded. After choosing the file the upload will start and an on completion of the upload, an event will be fired which can be used to:

- check the status of the upload(“success” or “failed”)
- retrieve data related to the upload(file “hash” and “size”)

## How to use?

Here is a sample code to get started:

```auto
<!--CSS CDN link for IpfsCloud widget-->
<link href="https://cdn.jsdelivr.net/gh/vasa-develop/ipfscloud@f157536445863f27481d8ce5e3025f25264d1113/app/docs/v1/css/ipfscloud-uploader.min.css" rel="stylesheet">

<!--body-tag-starts-->
    <center>
        <!--this div element will form the button-->
        <div id="IpfsCloudUploader"></div>
    </center>
<!--body-tag-ends-->

<!--JQuery needed for functioning of the widget-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<!--JS CDN link for IpfsCloud widget-->
<script src="https://cdn.jsdelivr.net/gh/vasa-develop/ipfscloud@bd23078768a5c708fc0f322a3e0e0cfb45b61f71/app/docs/v1/js/ipfscloud-uploader.min.js" ></script>

```

The above sample will display a button wherever you place the `div` tag with id `IpfsCloudUploader`.

Events are fired through the global element `ipfscloud`.

```auto
<script>
ipfscloud.addEventListener("icevent", function(event) {
    console.log(event.detail);
  });
</script>

```

The event “icevent” outputs the following when upload is completed or an error is encountered while uploading:

- In case of successful upload:

```auto
{
    "status" : "success",
    "data": {
        "hash": "hash of the uploaded file",
        "path": "path of the uploaded file",
        "size": size of the file in bytes
    },
    "error": null
}

```

- In case of error encountered while uploading a file:

```auto
{
    "status" : "failed",
    "data": null,
    "error": "some error"
}

```

**NOTE that the UI is handled automatically after a successful upload or a failure.**