Заполнить текстовое поле сгенерированным URL-адресом ссылки

Question

Я создаю простую форму, которая позволяет пользователю загружать изображение и отправлять форму. Данные формы загружаются в электронную таблицу google. Чтобы изображение заполнилось в электронной таблице google, мне нужно, чтобы изображение имело собственный URL-адрес. Я тестирую API-интерфейс imgur, и он отлично работает после этой прогулки: https://hacks.mozilla.org/2011/03/the-shortest-image-uploader-ever/.

Теперь, когда моя форма генерирует URL-адрес для этого конкретного изображения, как заполнить мою электронную таблицу google этим URL-адресом? Я думал об использовании текстового окна, которое будет автоматически заполнять href при создании, но я не знаю, как это сделать.

Есть ли более простой способ вставить ссылку в мою таблицу после того, как API-интерфейс imgur создает ссылку?

Я включил здесь рабочую демонстрацию.

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 1

Это будет заполнить ваш текстовое поле с URL

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

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

Полный код:

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>