JSFiddle - React, Tailwind, and code Playground

by charlescarver

HTML

<input class="file" id="one" type="file" />

JavaScript

$(".file").change(function() {
    var id = $(this).attr("id");
    var file = this.files[0];
    if (!file || !file.type.match(/image.*/)) return;
    var fd = new FormData();
    fd.append("image", file); // Append the file
    fd.append("key", "394d93e70eabfde992abd586f8a5f7cc");
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://api.imgur.com/2/upload.json");
    xhr.onload = function() {
        src = JSON.parse(xhr.responseText).upload.links.original;
        function getBase64Image(img) {
            // Create an empty canvas element
            var canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;

            // Copy the image contents to the canvas
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0);

            // Get the data-URL formatted image
            // Firefox supports PNG and JPEG. You could check img.src to
            // guess the original format, but be aware the using "image/jpg"
            // will re-encode the image.
            var dataURL = canvas.toDataURL(src);

            return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
        }
        alert(dataURL);


    };
    xhr.send(fd);
});