Imgur Image Uploader OLD

imgur-image-uploader-old.html

    <h1>Image Uploader Tool</h1>
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDnDeXz9_jJ3zlKAdS2vIYxng1BJtqn1BroXhy4dseg5L3ZxHauGNGgEbND8lsTCaQcLx43jP3TCXq_vCIqLR9PevgPvMIfrYHq3vOQWyLEp5a_dxTuH4E2ZiZqp6lWZTBh_900gkjbzWdO_uVZvjFMFQ3hWzmvOWqXWYL7gidv_7TYPHVU-ighiseI85-/s1600/apple-icon.png" style="clear: left; display: block; float: left; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="192" data-original-width="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDnDeXz9_jJ3zlKAdS2vIYxng1BJtqn1BroXhy4dseg5L3ZxHauGNGgEbND8lsTCaQcLx43jP3TCXq_vCIqLR9PevgPvMIfrYHq3vOQWyLEp5a_dxTuH4E2ZiZqp6lWZTBh_900gkjbzWdO_uVZvjFMFQ3hWzmvOWqXWYL7gidv_7TYPHVU-ighiseI85-/s1600/apple-icon.png" /></a></div>
    <div>
        <input accept="image/*" id="fileInput" multiple="" type="file" />
        <div id="dropArea">Drag &amp; Drop images here</div>
    </div>
    <div id="imagePreview"></div>
    <div id="output"></div>

    <button id="copyButton" style="display: none;">Copy URL</button>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        const clientId = "6db47bd7029562d";

        // Function to upload image to Imgur
        function uploadToImgur(image) {
            const formData = new FormData();
            formData.append("image", image);

            $.ajax({
                url: "https://api.imgur.com/3/image",
                headers: {
                    Authorization: `Client-ID ${clientId}`,
                },
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    const imageUrl = response.data.link;
                    $("#output").append(`<p>Image URL: <a href="${imageUrl}" target="_blank">${imageUrl}</a></p><br><img src="${imageUrl}" max-width="100%" />`);
                    $("#copyButton").show();
                },
                error: function (error) {
                    console.error("Error uploading image:", error);
                },
            });
        }

        // Handle file selection or drag and drop
        $(document).ready(function () {
            $("#fileInput").on("change", function (e) {
                const files = e.target.files;
                for (const file of files) {
                    uploadToImgur(file);
                }
            });

            $("#dropArea").on("dragover", function (e) {
                e.preventDefault();
                $(this).addClass("drag-over");
            });

            $("#dropArea").on("dragleave", function (e) {
                e.preventDefault();
                $(this).removeClass("drag-over");
            });

            $("#dropArea").on("drop", function (e) {
                e.preventDefault();
                $(this).removeClass("drag-over");
                const files = e.originalEvent.dataTransfer.files;
                for (const file of files) {
                    uploadToImgur(file);
                }
            });

            // Handle copy URL button click
            $("#copyButton").on("click", function () {
                const imageUrl = $("#output a").attr("href");
                copyToClipboard(imageUrl);
                alert("Image URL copied to clipboard!");
            });
        });

        // Function to copy URL to clipboard
        function copyToClipboard(text) {
            const dummy = document.createElement("textarea");
            document.body.appendChild(dummy);
            dummy.value = text;
            dummy.select();
            document.execCommand("copy");
            document.body.removeChild(dummy);
        }
    </script>
<br /><hr /><br />
   <a href="https://sh20raj.github.io/Gurimg/" target="_blank" title="Gur Img - Free Unlimited Image Hosting - Direct Link - Share Image Across Devices">Image hosting provided by GurImg</a>