4

Estoy implementando subir imágenes, fotos utilizando el sistema de imgur.

Hasta el momento he desarrollado la opción dropzone, que me permite arrastrar o hacer clic en Dropzone para subir/cargar imágenes y guardarlas en imgur y no en mi hosting local.

A través de mi código upload.js.

var feedback = function(res) {
    if (res.success === true) {
        var get_link = res.data.link.replace(/^http:\/\//i, 'https://');
        document.querySelector('.status').classList.add('bg-success');
        document.querySelector('.status').innerHTML =
            'Image : ' + '<br><input class="image-url" value=\"' + get_link + '\"/>' + '<img class="img" alt="Imgur-Upload" src=\"' + get_link + '\"/>';
    }
};

new Imgur({
    clientid: '', //You can change this ClientID
    callback: feedback
});

Y desde una estructura simple de HTML.

<body>
    <div class="title">
        <h1>Imgur Upload API</h1>
        <p>Use JavaScript To Upload Image</p>
    </div>
    <div class="dropzone">
        <div class="info"></div>
    </div>
    <script type="text/javascript" src="./js/imgur.js"></script>
    <script type="text/javascript" src="./js/upload.js"></script>
</body>

Obtengo mi dropzone que me permite subir/cargar las imágenes a hosting imgur.

introducir la descripción de la imagen aquí

He agregado las siguientes líneas fd.append('type', 'URL'); al código imgur.js.

  var fd = new FormData();
    fd.append('image', file);
    fd.append('type', 'URL');

Pero, ¿cómo se puede agregar la opción de ingresar una URL de imagen y subirla/cargarla guardar en imgur?

Quiero agregar las dos opciones en mi dropzone, subir imágenes localmente y usar una URL de imagen.

El mismo sistema de StackOverflow, que permite arrastrar inagen/ seleccionar imagen y la vez permite subir imágenes desde un URL imagen ejemplo:

introducir la descripción de la imagen aquí

6
  • Según la API de Imgur el parámetro image puede ser "un archivo binario, datos en base64 o una URL de una imagen". Con esto en mente puedes simplemente enviar el URL que quieras al API.
    – JCAguilera
    el 23 ago. 2018 a las 11:40
  • Hola @JCAguilera pero como hago para subir esa imagen mediante una URL imagen, hasta el momento yo puedo enviar esas imágenes seleccionando las imágenes en mi ordenador, pero yo quiero saber qué implementación debo hacer para subir esa URL imagen a imgur
    – Eduardo
    el 23 ago. 2018 a las 13:57
  • Sólo envía un URL, como: http://imagenes.com/imagen.jpg
    – JCAguilera
    el 23 ago. 2018 a las 14:45
  • pero es que si fuera tan fácil como lo dices en el comentario no hubiera preguntado, no me ayuda su respuesta.
    – Eduardo
    el 23 ago. 2018 a las 21:52
  • 2
    Hola @GermanAlzate puedes mostrarme el ejemplo, yo ya me he matado leyendo todo los datos de imgur, y no entiendo nada :(
    – Eduardo
    el 26 ago. 2018 a las 4:03

1 respuesta 1

3
+50

He echado un vistazo a tu pregunta y a la librería de imgur.

Por un lado indicarte que esta librería esta disponible en github. Quizá debes contemplar la posibilidad de contribuir al proyecto, crear tu propia variante o ponerte en contacto con su autor para incluir esta nueva característica.

Por otro lado, y sin modificar la librería actual de un tercero, puedes utilizar este pequeño 'hack' para conseguir tu objetivo.

var imgur = new Imgur({
            clientid: '',
            callback: feedback
});

var d = new FormData;
d.append("image", "https://cdn-images-1.medium.com/max/316/1*LUfpOf7teWvPdIPTBmYciA.png"),

imgur.post(imgur.endpoint, d, imgur.callback);

Simplemente, se trata de utilizar el método POST de la librería de imgur utilizando como valor image cualquier url dada.

Puedes ver un ejemplo funcionar en es siguiente código implementando un formulario de envió fuera del dropzone facilitado por la librería.

var feedback = function(res) {
    if (res.success === true) {
        var get_link = res.data.link.replace(/^http:\/\//i, 'https://');
        document.querySelector('.status').classList.add('bg-success');
        document.querySelector('.status').innerHTML =
            'Image : ' + '<br><input class="image-url" value=\"' + get_link + '\"/>' + '<img class="img" alt="Imgur-Upload" src=\"' + get_link + '\"/>';
    }
};

(function() {
  var imgur = new Imgur({
      clientid: 'cc86a8de0e7c459',
      callback: feedback
  });

function onSubmit(event, form) {
    if (event) { event.preventDefault(); }

	  var d = new FormData;
	  d.append("image", this.image.value);

    //debugger;
	  imgur.post(imgur.endpoint, d, imgur.callback);
}

var form = document.getElementById('linkform');
form.addEventListener('submit', onSubmit, false);
form.submit = onSubmit;
  
})();
#linkform > * {width: 100%; margin: 2px}
<link href="https://cdn.rawgit.com/pinceladasdaweb/imgur/3ee965f9/src/imgur.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/pinceladasdaweb/imgur/3ee965f9/src/imgur.js"></script>
<body>
    <div class="title">
        <h1>Imgur Upload API</h1>
        <p>es.stackoverflow.com @dperezv.com</p>
    </div>
    <div>
      <form id="linkform">
          <input type="text" name="image" value="https://cdn-images-1.medium.com/max/316/1*LUfpOf7teWvPdIPTBmYciA.png" />
          <button type="submit">Subir a imgur</button>
      </form><br/>
    </div>
    <div class="dropzone">
        <div class="info"></div>
    </div>
    <div class="status">
    </div>
</body>

1
  • Excelente respuesta +1, saludos. el 26 ago. 2018 a las 20:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.