How to Create a File Save Tool in Blogger

Incorporating a file save tool in your Blogger website can be an invaluable addition, making it easier for your visitors to download files. In this blog post, we will provide a step-by-step guide on how to set up a file save tool on your Blogger site. Although Blogger is primarily focused on textual content, you can improve your website's functionality by adding a file save tool.

Copyright: Tech4era.com

This Tool will help you create a file download tool for your Blogger site, allowing visitors to easily download resources like PDFs, eBooks, and templates.

Steps to Create a File Save Tool in Blogger

Step 1: Access the Blogger Dashboard.

Step 2: To create a new page, select the option to add a new page.

Step 3: Select your Created Page in HTML View Mode.

Step 4: After Selecting HTML View Mode Just Copy the Below Code and Paste.

<style>
    .container {
        max-width: 100%;
        margin: 0 auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 10px;
    }

    select,
    input[type="text"],
    textarea {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-top: 10px;
    }

    select {
        margin-bottom: 10px;
    }

    button {
        width: 100%;
        padding: 10px 20px;
        font-size: 16px;
        background-color: #428bca;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 10px;
    }

    button:hover {
        background-color: #357ABD;
    }

    #message {
        text-align: center;
        color: #009900;
        font-weight: bold;
        margin-top: 10px;
    }

    #bomLabel {
        display: none;
        margin-top: 10px;
    }

    #wrapInPre {
        margin-top: 10px;
    }

    #wordWrap {
        margin-top: 10px;
    }

    #syntaxHighlighting {
        margin-top: 10px;
    }
</style>

<div class="container">
    <h2>Enhanced Text File Saver</h2>
    <label for="fileName">File Name:</label><br>
    <input type="text" id="fileName" placeholder="Enter file name"><br>

    <label for="fileType">File Type:</label><br>
    <select id="fileType">
        <option value="txt">Text (.txt)</option>
        <option value="json">JSON (.json)</option>
        <option value="html">HTML (.html)</option>
        <option value="csv">CSV (.csv)</option>
        <option value="xml">XML (.xml)</option>
        <option value="markdown">Markdown (.md)</option>
        <option value="js">JavaScript (.js)</option>
        <option value="css">CSS (.css)</option>
        <option value="php">PHP (.php)</option>
        <option value="python">Python (.py)</option>
        <option value="java">Java (.java)</option>
    </select><br>

    <label for="fileExtension">Custom File Extension:</label><br>
    <input type="text" id="fileExtension" placeholder="e.g., txt"><br>

    <label for="text">Enter Text:</label><br>
    <textarea id="text" rows="10" cols="40"></textarea><br>

    <label for="includeBOM">Include Byte Order Mark (BOM):</label>
    <input type="checkbox" id="includeBOM"><br>

    <label for="characterEncoding">Character Encoding:</label><br>
    <select id="characterEncoding">
        <option value="utf-8">UTF-8</option>
        <option value="utf-16">UTF-16</option>
        <option value="iso-8859-1">ISO 8859-1</option>
    </select><br>

    <label for="lineEnding">Line Ending Format:</label><br>
    <select id="lineEnding">
        <option value="lf">LF (Unix)</option>
        <option value="cr">CR (Mac)</option>
        <option value="crlf">CRLF (Windows)</option>
    </select><br>

    <label for="wrapInPre">Wrap Text in HTML &lt;pre&gt; Tags:</label>
    <input type="checkbox" id="wrapInPre"><br>

    <label for="wordWrap">Word Wrap:</label>
    <input type="checkbox" id="wordWrap"><br>

    <label for="syntaxHighlighting">Syntax Highlighting:</label>
    <input type="checkbox" id="syntaxHighlighting"><br>

    <button id="saveButton">Save Text as File</button>
    <button id="clearButton">Clear</button>
    <p id="message"></p>
    <label id="bomLabel">A Byte Order Mark (BOM) will be included in the file for Unicode (UTF-8 with BOM)
        formats.</label>
</div>

<script>
    document.getElementById("fileType").addEventListener("change", function () {
        const fileType = document.getElementById("fileType").value;
        const bomLabel = document.getElementById("bomLabel");

        if (fileType === "txt" || fileType === "json" || fileType === "html") {
            bomLabel.style.display = "block";
        } else {
            bomLabel.style.display = "none";
        }
    });

    document.getElementById("saveButton").addEventListener("click", function () {
        const textToSave = document.getElementById("text").value;
        const fileName = document.getElementById("fileName").value;
        const fileType = document.getElementById("fileType").value;
        const fileExtension = document.getElementById("fileExtension").value;
        const includeBOM = document.getElementById("includeBOM").checked;
        const characterEncoding = document.getElementById("characterEncoding").value;
        const lineEnding = document.getElementById("lineEnding").value;
        const wrapInPre = document.getElementById("wrapInPre").checked;
        const wordWrap = document.getElementById("wordWrap").checked;
        const syntaxHighlighting = document.getElementById("syntaxHighlighting").checked;

        if (!textToSave || !fileName) {
            document.getElementById("message").textContent = "Please enter text and a file name.";
            return;
        }

        const fileExtensionWithDot = fileExtension ? `.${fileExtension}` : "";
        const blobType = includeBOM && (fileType === "txt" || fileType === "json" || fileType === "html")
            ? `text/${fileType};charset=${characterEncoding}`
            : `text/${fileType};charset=${characterEncoding}`;

        const lineEndingCharacters = {
            lf: "\n",
            cr: "\r",
            crlf: "\r\n"
        };

        // Normalize line endings
        const normalizedText = textToSave.replace(/\r\n|\r|\n/g, lineEndingCharacters[lineEnding]);

        // Create the text content for HTML or plaintext
        let textContent = normalizedText;
        if (wrapInPre) {
            textContent = wordWrap ? `<pre>${textContent}</pre>` : `<pre style="white-space: nowrap;">${textContent}</pre>`;
        }

        // Optionally add syntax highlighting
        if (syntaxHighlighting && (fileType === "js" || fileType === "css" || fileType === "html")) {
            textContent = `<code class="language-${fileType}">${textContent}</code>`;
        }

        // Create a blob from the text
        const blob = new Blob([textContent], { type: blobType });

        // Create an anchor element for downloading
        const a = document.createElement("a");
        a.style.display = "none";
        document.body.appendChild(a);

        // Set the URL and filename for the blob
        const url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = `${fileName}${fileExtensionWithDot}`;

        // Trigger a click event to download the file
        a.click();

        // Clean up
        window.URL.revokeObjectURL(url);
        document.getElementById("message").textContent = "File saved successfully.";
    });

    document.getElementById("clearButton").addEventListener("click", function () {
        document.getElementById("text").value = "";
        document.getElementById("message").textContent = "";
    });
</script>

Step 5: All are Done.

Conclusion

Making downloadable files available to your readers can be a valuable addition to your Blogger site, enabling them to access and save files that you want to share. By following these simple steps, you can establish a user-friendly system for hosting and sharing downloadable files on your Blogger site, enriching the overall user experience.