JSFiddle - React, Tailwind, and code Playground

by kidastudio

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lottie to SVG Converter</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lottie-to-svg.min.js"></script>
<script src="converter.js"></script>

</head>
<body>
    <div class="container">
        <h1>Lottie to SVG Converter</h1>
        <form id="uploadForm" enctype="multipart/form-data">
            <label for="fileInput" id="uploadLabel">Upload File</label>
            <input type="file" id="fileInput" accept=".json" required style="display: none;">
            <button type="button" id="convertButton" style="display: none;">Convert</button>
        </form>
        <div id="result"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lottie-to-svg.min.js"></script>
    <script src="converter.js"></script>
</body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

h1 {
    color: #333;
}

input[type="file"] {
    display: none;
}

button {
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

#result {
    margin-top: 20px;
    border: 1px solid #ccc;
    padding: 10px;
}

JavaScript

// Function to handle file selection
function handleFileSelection() {
    const fileInput = document.getElementById('fileInput');
    const convertButton = document.getElementById('convertButton');

    if (fileInput.files.length > 0) {
        convertButton.style.display = 'block'; // Show the "Convert" button
    } else {
        convertButton.style.display = 'none'; // Hide the "Convert" button if no file is selected
    }
}

// Function to handle the form submission and conversion
function handleFormSubmission(event) {
    event.preventDefault(); // Prevent the default form submission behavior.

    const fileInput = document.getElementById('fileInput');
    const resultDiv = document.getElementById('result');

    const file = fileInput.files[0];

    if (file) {
        const reader = new FileReader();

        reader.onload = function(event) {
            const lottieData = JSON.parse(event.target.result);

            // Use the lottieToSvg function from the library to convert Lottie to SVG.
            const options = {}; // You can customize options here if needed.
            const svgData = lottieToSvg(lottieData, options);

            resultDiv.innerHTML = svgData;
        };

        reader.readAsText(file);
    }
}

// Function to set up event listeners
function initialize() {
    const uploadLabel = document.getElementById('uploadLabel');
    const convertButton = document.getElementById('convertButton');
    const fileInput = document.getElementById('fileInput');
    const svgData = lottieToSvg(lottieData, options);


    uploadLabel.addEventListener('click', () => {
        fileInput.click(); // Trigger the file input when the label is clicked
    });

    fileInput.addEventListener('change', handleFileSelection);
    convertButton.addEventListener('click', handleFormSubmission);
}

// Attach event listeners once the DOM is loaded
document.addEventListener('DOMContentLoaded', initialize);