How to get uploaded image url using the Discourse API?

You can only do a synchronous upload as a staff user, see Image upload with synchronous true for new users for details.

Some more information

if you want the url back, you will have to listen to the “/uploads/*” channels via the Message Bus.

https://meta.discourse.org/t/using-the-discourse-api-to-post-with-uploaded-files/29833/11

2 Likes

I’m pretty sure since you aren’t using an API key you will have to be a staff user. Is your user a staff user?

no i am not, but i can be :slight_smile:
i will do my posts with stuff user, and problem solved.

but still, if the image is uploaded even without stuff user, what’s the difference?
i am able to upload it, but just can’t see the url.

thanks a lot guys.

If you are a staff user and you do syncrounous it should return the image url and id

i did a call with api_key and username and i easily get url to the image.
but unfortunately i don’t have api_key in all the cases, so i needed to fall back to message-bus.

can you explain me how to get url in the message-bus/poll request
i did almost everything

message-bus/{client_id}/poll
with the same client_id, i made upload of image and got success : ok
i’ve sent ‘/uploads/composer’:0, ‘/uploads/composer’:{current_message_id}, again no luck

i’ve seen also in the code, inside upload controller
something like this MessageBus.publish("/uploads/#{type}", data.as_json, client_ids: [client_id])

i tried also with type, again no luck.

can you just explain what params i need to send for message-bus/poll
so i can get url of image in the response?

thanks a lot!

Is there any complete answer found to get upload URL with ajax?
We are also interested to get one.
many thanks.

Sorry for recalling rather old topic but we appreciate any support on getting uploaded url for non-staff user right after upload. many thanks.

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

<!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>

3 Likes

That code is seriously too bloated, with a formData structure inside an almost identical data structure.

But more important: there is no non-staff synchronous upload issue any more, the code was refactored last week.

https://github.com/discourse/discourse/commit/eb428ef54dcc1d0d74f5d4a0d3fd12f1122dab65#diff-60328924b5c773b42aacabc0b5698af4

3 Likes