HomepageFilebase DashboardDiscordBlog

Hosting a Form on IPFS

Learn how to host a form on IPFS.

What is IPFS?

InterPlanetary File System, also known as IPFS, is a decentralized peer-to-peer protocol for storing and retrieving files or websites.

Read below to learn how to host an email form on IPFS.

Prerequisites:

1. Start by creating a new folder called filebase-form-example, then create a new file inside called index.html. Insert the following text into the index.html file:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>New Post</title>
  
  <style type="text/css" media="screen">
    body {font-family:verdana, sans-serif; color:#666; background:#fafafa; padding:20px; text-align:center;}
    #page {text-align:left; max-width:600px; margin:0 auto;} 
    h1 {font-size:16px; font-weight:normal; text-align:center;}
    label {font-size:16px;}
    label i {font-style:normal; display:inline-block; text-align:right; width:100px;}
    label textarea {vertical-align:top;}
    button {margin-left:105px; padding:5px; margin-top:5px; font-size:16px;}
    input, textarea {width:400px; font-size:16px; font-family: courier, "courier new", monospace; margin:0 0 5px 0; padding:5px; border:1px solid #eee;}
    select {margin:0 0 5px 0;}
    @media (min-width:300px) and (max-width: 768px) {
      input, textarea {width:100%;}
      label i {display:block; width:auto; text-align:left;}
      button {display:block; margin:0;}
    }
  </style>
  
  <script type="text/javascript">
    // Current date - <http://stackoverflow.com/a/4929629/412329>
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January is 0!
    var yyyy = today.getFullYear();

    if(dd<10) {
        dd='0'+dd
        } 

    if(mm<10) {
        mm='0'+mm
        } 

    today = yyyy+'-'+mm+'-'+dd;

    function saveFormAsTextFile()
        // Based on <https://thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip/>
        {
        var textToSave =
          '---\\n'+
          'title: ' + document.getElementById('title').value + '\\n' + // =title
          'location: ' + document.getElementById('location').value + '\\n' + // =location
          'date: ' + today + '\\n' + // =date - automatically puts today's date =todo: fix bug allowing going over 60 seconds, i.e. 61 seconds
          'senses: ' + document.getElementById('senses').value + '\\n' + // =senses - select menu
          'tags: ' + '\\n- ' + document.getElementById('tags').value.replace(/,\\s/g, "\\n- ") + '\\n' + 
            // =tags
            // The replace() bit above converts 'tag,tag' to '- tag\\n- tag\\n' with regular expressions
            // <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp>
          '---\\n' + '\\n' + 
          document.getElementById('content').value // =content;

        var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"});
        var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
        var fileNameToSaveAs = document.getElementById("filename").value;

        var downloadLink = document.createElement("a");
        downloadLink.download = fileNameToSaveAs;
        downloadLink.innerHTML = "Download File";
        downloadLink.href = textToSaveAsURL;
        downloadLink.onclick = destroyClickedElement;
        downloadLink.style.display = "none";
        document.body.appendChild(downloadLink);

        downloadLink.click();
        }

    function destroyClickedElement(event)
        {
        document.body.removeChild(event.target);
        }
  </script>
</head>

<body>
  <div id="page">
    
    <h1>New Post</h1>
  
    <label for="title">
      <i>Title</i> <!-- =title - input example -->
      <input id="title" size="40" placeholder="Title">
    </label>
    
    <br>
    
    <label for="title">
      <i>Location</i> <!-- =location - input example -->
      <input id="location" size="40" placeholder="Location">
    </label>
    
    <input type="hidden" id="date" size="40"> <!-- =date - hidden input example (automatically populated with current date in yyyy-mm-dd format) -->
    
    <br>
    
    <label for="senses"> 
      <i>Senses</i> <!-- =senses select menu example -->
      <select name="senses" id="senses" size="1">
        <option value="Touch">Touch</option>
        <option value="Sound">Sound</option>
        <option value="Sight">Smell</option>
        <option value="Sight">Taste</option>
        <option value="Sight">Sight</option>
      </select>
    </label>
    
    <br>
    
    <label for="tags">
      <i>Tags</i>  <!-- =tags textarea example -->
      <textarea id="tags" cols="40" rows="3" placeholder="tag, tag, tag"></textarea>
    </label>
    
    <br>
    
    <label for="content">
    <i>Content</i>  <!-- =content textarea example -->
    <textarea id="content" cols="40" rows="10" placeholder="Write something."></textarea>
    </label>

    <br>
    
    <label for="filename">
      <i>Filename</i>
      <input id="filename" value="" size="40" placeholder="title.md">
    </label>
    
    <button onclick="saveFormAsTextFile()">
      Save to File
    </button>
    
  </div>
</body>
</html>

2. Next, navigate to the Filebase Web Console dashboard. Navigate to the buckets screen, then create or select an IPFS bucket.

3. Select ‘Upload’, then select ‘Folder’:

4. Select the filebase-form-example folder to be uploaded.

5. Once uploaded, copy the IPFS CID that is listed. In a new browser window, navigate to:

https://ipfs.filebase.io/ipfs/[CID]

Replace [CID] with the IPFS CID you copied from the Filebase web console dashboard.

6. Your form will be displayed in the web browser and will resemble the following:

7. Fill out the form, then select ‘Save to File’.

This will prompt a file to be downloaded. You can save this file locally, or if you want to upload it to IPFS directly, you can use a tool like S3FS or Cyberduck to configure Filebase as a locally mounted storage location.

8. Once you have Filebase locally mounted, you can save the file to the same bucket you used earlier:

9. The index.html file can be edited and customized to fit your personal preferences to be used for storing personal blog data, journal entries, or any other posts that will be saved in the following format:

---
title: My post!
location: Earth
date: 2022-10-05
senses: Sight
tags:
- web3
- filebase
- ipfs
---

A post using a form hosted on IPFS!

This markdown file can be uploaded to blog websites or other media distribution platforms if desired.

PreviousHarmony: Deploy an HRC721 NFT on Harmony with IPFSNextiExec

Last updated