Home / Questions / 189931
Accepted
Eduardo
Asked: 2020-08-20 07:36:00 +0800 CST 2020-08-20 07:36:00 +0800 CST

How to add the option to upload/upload/save images to IMGUR from an image URL?

  • 772

I am implementing uploading images, photos using the imgur.

So far I have developed the dropzone option, which allows me to drag or click the Dropzone to upload/upload images and save them to imgurand not my local hosting.

Through my upload.js code.

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

And from a simple structure of 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>

I get my dropzonethat allows me to upload/upload the images to hosting imgur.

enter image description here

I have added the following lines to the imgur.jsfd.append('type', 'URL'); code .

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

But how can you add the option to enter an image url and upload/upload save to imgur?

I want to add both options in my dropzone, upload images locally and use an image url.

The same StackOverflow system, which allows drag image/select image and at the same time allows uploading images from an example image URL:

enter image description here

javascript

1 Answers

  1. Best Answer

    I've had a look at your question and at the imgur library .

    On the one hand, indicate that this library is available on github . Perhaps you should consider contributing to the project, creating your own variant, or contacting its author to include this new feature.

    On the other hand, and without modifying the current library of a third party, you can use this little 'hack' to achieve your goal.

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

    Simply, it is about using the POST method of the imgur library using any given url as image value.

    You can see a working example in the following code implementing a submission form outside the dropzone provided by the library.

    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>

    • 3