# How to get uploaded image url using the Discourse API?

**URL:** <https://meta.discourse.org/t/how-to-get-uploaded-image-url-using-the-discourse-api/37800>\
**Category:** Development\
**Tags:** rest-api\
**Created:** [January 12, 2016, 3:51am UTC](https://meta.discourse.org/t/how-to-get-uploaded-image-url-using-the-discourse-api/37800 "2016-01-12T03:51:27Z")\
**Posts on this page:** 1\
**Showing post:** 29

<div class="post-metadata">

**Author:** ![blake](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/blake/32/157322_2.png) [@blake](https://meta.discourse.org/u/blake)\
**Post date:** [December 5, 2017, 12:14am UTC](https://meta.discourse.org/t/how-to-get-uploaded-image-url-using-the-discourse-api/37800/29 "2017-12-05T00:14:00Z")

</div>

> [@Denis\_Didkovsky](#):
>
> Is there any complete answer found to get upload URL with ajax?

> [@Denis\_Didkovsky](#):
>
> getting uploaded url for non-staff user right after upload

Here is a complete ajax file upload example which I verified works with non-staff users:

```plaintext
<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <script
        src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous">
    </script>
    <script>
      var api_username = '788336e9f81d21b4fa04';
      var api_key = '8f23cba0eec7cff2a995a8271589f5096d9b448d29af5d2e93383e43ac6e0f9b';
      function createPostWithUpload(url, width, height) {
        var data = {
          topic_id: "18",
          raw: '<img src=' + url + ' width=' + width + ' height=' + height + '>',
          api_username: api_username,
          api_key: api_key
        };
        $.ajax({
          type: "POST",
          url: "http://192.168.56.2:3000/posts",
          data: data,
          success: false,
          dataType: false
        });
      }
      function uploadFile() {
        var form = $('#uploadForm')[0];
        var formData = new FormData(form);
        formData.append('api_username', api_username);
        formData.append('api_key', api_key);
        formData.append('synchronous', 'true');
        formData.append('type', 'composer');
        var data = {
          'files[]': formData,
          type: "composer",
          synchronous: true,
          api_username: api_username,
          api_key: api_key
        };
        $.ajax({
          method: "POST",
          url: "http://192.168.56.2:3000/uploads.json",
          data: formData,
          processData: false,
          contentType: false,
          success: function(response) {
            console.log(response);
            var id = response.id;
            var url = response.url;
            var width = response.width;
            var height = response.height;
            createPostWithUpload(url, width, height);
          },
        });
      }
      function createPost() {
        var data = {
          topic_id: "18",
          raw: "my sample post that I'm making",
          api_username: api_username,
          api_key: api_key
        };
        $.ajax({
          type: "POST",
          url: "http://192.168.56.2:3000/posts",
          data: data,
          success: false,
          dataType: false
        });
      }
    </script>
  </head>
  <body>
    <form name="uploadForm" id="uploadForm">
      <p><input id="myFile" type="file" name="file"> </p>
      <p><input type="button" onClick="uploadFile();" value="Upload file"></p>
      </form>
      <input type="button" onClick="createPost();" value="Create Post"></p>
  </body>
</html>

```

---

_[View the full topic](https://meta.discourse.org/t/how-to-get-uploaded-image-url-using-the-discourse-api/37800)._
