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:
<!--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
.
<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:
{
"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:
{
"status" : "failed",
"data": null,
"error": "some error"
}
NOTE that the UI is handled automatically after a successful upload or a failure.