Upload image from HTML form to http://imgur.com/

deleteFromImgur.js

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

postToImgur.js

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

Thx! This helped to me

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/[email protected]/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>

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