cgrouge cgrouge - 3 months ago 11
HTML Question

Populate text field with generated link url

I'm creating a simple form that allows a user to upload an image and submit the form. The form data is uploaded to a google spreadsheet. In order for the image to populate on the google spreadsheet I need the image to have its own url. I'm testing out imgur's API and it works pretty well following this walk through: https://hacks.mozilla.org/2011/03/the-shortest-image-uploader-ever/.

Now that my form generates a url for that specific image, how do I populate my google spreadsheet with that url? I was thinking of using a text box that will auto populate the href when generated but I don't know how to do that.

Is there an easier way to paste the link into my spreadsheet after imgur's API generates the link?

I've included a working demo of it here.



function upload(file) {
/* Is the file an image? */
if (!file || !file.type.match(/image.*/)) return;
/* It is! */
document.body.className = "uploading";
/* Lets build a FormData object*/
var fd = new FormData();
fd.append("image", file); // Append the file
var xhr = new XMLHttpRequest(); // Create the XHR
xhr.open("POST", "https://api.imgur.com/3/image.json"); // Boooom!
xhr.onload = function() {
// Big win!
document.querySelector("#link").href = JSON.parse(xhr.responseText).data.link;
document.body.className = "uploaded";
}

xhr.setRequestHeader('Authorization', 'Client-ID 490be95195679b1'); // Imgur API key here


/* And now, we send the formdata */
xhr.send(fd);
}

#link, p , div {display: none}
.uploading div {display: none}
.uploaded div {display: none}
.uploading p {display: inline}
.uploaded #link {display: inline}

<input type="file" onchange="upload(this.files[0])"><br />
<!-- this is the text box we could paste the url in -->
<input tyle="text">

<p>Uploading...</p>
<a id="link">Link to imgur file</a>




Answer

This will populate your text box with the url

document.getElementById("urlText").value = JSON.parse(xhr.responseText).data.link;

<input type="text" id="urlText" name="urlText">

Complete code:

 function upload(file) {
        /* Is the file an image? */
        if (!file || !file.type.match(/image.*/)) return;
        /* It is! */
        document.body.className = "uploading";
        /* Lets build a FormData object*/
        var fd = new FormData(); 
        fd.append("image", file); // Append the file
        var xhr = new XMLHttpRequest(); // Create the XHR
        xhr.open("POST", "https://api.imgur.com/3/image.json"); // Boooom!
        xhr.onload = function() {
            // Big win!
            document.querySelector("#link").href = JSON.parse(xhr.responseText).data.link;
            document.body.className = "uploaded";
       document.getElementById("urlText").value = JSON.parse(xhr.responseText).data.link;
        }
        
        xhr.setRequestHeader('Authorization', 'Client-ID 490be95195679b1'); // Imgur API key here
        

        /* And now, we send the formdata */
        xhr.send(fd);
    }
#link, p , div {display: none}
    .uploading div {display: none}
    .uploaded div {display: none}
    .uploading p {display: inline}
    .uploaded #link {display: inline}
<input type="file" onchange="upload(this.files[0])"><br />
<input type="text" id="urlText" name="urlText">

<p>Uploading...</p>
<a id="link">Link to imgur file</a>