Skip to content

Instantly share code, notes, and snippets.

@bmcbride
Last active May 25, 2022 17:53
Show Gist options
  • Star 12 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save bmcbride/7577e6aed5ce962776ca to your computer and use it in GitHub Desktop.
Save bmcbride/7577e6aed5ce962776ca to your computer and use it in GitHub Desktop.
Upload image from HTML form to http://imgur.com/
function deleteFromImgur() {
$.ajax({
url: "https://api.imgur.com/3/image/{id}",
type: "DELETE",
headers: {
"Authorization": "Client-ID YOUR-CLIEND-ID-GOES-HERE"
},
success: function(response) {
//console.log(response);
}
});
}
function postToImgur() {
var formData = new FormData();
formData.append("image", $("[name='uploads[]']")[0].files[0]);
$.ajax({
url: "https://api.imgur.com/3/image",
type: "POST",
datatype: "json",
headers: {
"Authorization": "Client-ID YOUR-CLIEND-ID-GOES-HERE"
},
data: formData,
success: function(response) {
//console.log(response);
var photo = response.data.link;
var photo_hash = response.data.deletehash;
},
cache: false,
contentType: false,
processData: false
});
}
@tarampampam
Copy link

Thx! This helped to me

@mashirozx
Copy link

A full example:

<form id="imgur">
    <input type="file" class="imgur" accept="image/*" data-max-size="5000" />
</form>


<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<script>
    $("document").ready(function () {

        $('input[type=file]').on("change", function () {

            var $files = $(this).get(0).files;

            if ($files.length) {

                // Reject big files
                if ($files[0].size > $(this).data("max-size") * 1024) {
                    console.log("Please select a smaller file");
                    return false;
                }

                // Replace ctrlq with your own API key
                var apiUrl = 'https://api.imgur.com/3/image';
                var apiKey = 'YOUR-CLIEND-ID-GOES-HERE';

                var formData = new FormData();
                formData.append("image", $files[0]);

                var settings = {
                    "async": true,
                    "crossDomain": true,
                    "url": apiUrl,
                    "method": "POST",
                    "datatype": "json",
                    "headers": {
                        "Authorization": "Client-ID " + apiKey
                    },
                    "processData": false,
                    "contentType": false,
                    "data": formData,
                    beforeSend: function (xhr) {
                        console.log("Uploading | 上传中");
                    },
                    success: function (res) {
                        console.log(res.data.link);
                        $('body').append('<img src="' + res.data.link + '" />');
                    },
                    error: function () {
                        alert("Failed | 上传失败");
                    }
                }
                $.ajax(settings).done(function (response) {
                    console.log("Done | 成功");
                });
            }
        });
    });
</script>

@raihan004
Copy link

do you know How can I store those uploaded images or how can I upload them to my own profile?
thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment