Skip to main content
Recompensa finalizada con 50 de reputación otorgada por Otto
Correcciones ejemplo
Origen Enlace
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, function(a) {
    document.body.classList.remove("busy"),
    "function" == typeof this.callback && thisimgur.callback.call(this, a)
}
.bind(this));

Puedes ver un feo ejemplo, y por desgracia no funcional (requiere autentificación)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, function(a) {
          document.body.classList.remove("busy"),
        "function" == typeof this.callback && thisimgur.callback.call(this, a)
      }
      .bind(this));
}

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>
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, function(a) {
    document.body.classList.remove("busy"),
    "function" == typeof this.callback && this.callback.call(this, a)
}
.bind(this));

Puedes ver un feo ejemplo, y por desgracia no funcional (requiere autentificación) 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);

      imgur.post(imgur.endpoint, d, function(a) {
          document.body.classList.remove("busy"),
        "function" == typeof this.callback && this.callback.call(this, a)
      }
      .bind(this));
}

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>
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);

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>
se añadieron 15 caracteres en el cuerpo
Origen Enlace
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);

      imgur.post(imgur.endpoint, d, function(a) {
          document.body.classList.remove("busy"),
        "function" == typeof this.callback && this.callback.call(this, a)
      }
      .bind(this));
}

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>
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: '',
      callback: feedback
  });

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

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

      imgur.post(imgur.endpoint, d, function(a) {
          document.body.classList.remove("busy"),
        "function" == typeof this.callback && this.callback.call(this, a)
      }
      .bind(this));
}

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>
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);

      imgur.post(imgur.endpoint, d, function(a) {
          document.body.classList.remove("busy"),
        "function" == typeof this.callback && this.callback.call(this, a)
      }
      .bind(this));
}

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>
Origen Enlace

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, function(a) {
    document.body.classList.remove("busy"),
    "function" == typeof this.callback && this.callback.call(this, a)
}
.bind(this));

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 feo ejemplo, y por desgracia no funcional (requiere autentificación) 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: '',
      callback: feedback
  });

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

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

      imgur.post(imgur.endpoint, d, function(a) {
          document.body.classList.remove("busy"),
        "function" == typeof this.callback && this.callback.call(this, a)
      }
      .bind(this));
}

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>