Uploading a file via Yammer API

Question

I'm able to post a message but when I add either the attachment or pending_attachment, I get an error saying:

TypeError: 'stepUp' called on an object that does not implement interface HTMLInputElement.

function post() {
    yam.getLoginStatus( function(response) {
        if (response.authResponse) {

            yam.request(
              { url: "https://api.yammer.com/api/v1/messages.json" //note:  the endpoint is api.yammer...
              , method: "POST"
              , data: {
                "body" : document.getElementById("post_body").value,
                "group_id" : document.getElementById("group_id").value
                ,"attachment1" : document.getElementById("attachment")
              }
              , success: function (msg) {
                    alert("Post was Successful!: " + msg.messages[0].id); //id of new message
              }
              , error: function (msg) { alert("Post was Unsuccessful..." + msg); }
              }
            );
        } else {
            yam.login( function (response) {
               //nothing
            });
        }
    });
}

Answer 1

yammer's javascript SDK doesn't work with attachment. (at least no working example has been seen on the internet) To upload an attachment, you can either upload the file to your server and then use og_url to post a link to that file on your server, or cook up your own ajax form upload. here is an example:

        var data = new FormData();

        data.append('body', document.getElementById("post_body").value);
        data.append('group_id', document.getElementById("group_id").value);


        data.append('attachment1', document.getElementById("attachment"), 'filename_of_your_choice');


        $.ajax({
            url: "https://api.yammer.com/api/v1/messages.json",
            data: data,
            beforeSend: function (xhr) {
                // set authorization header
                xhr.setRequestHeader("Authorization", "Bearer YOUR_AUTHORIZATION_TOKEN");
            },
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function (data) {
                console.log("ajax post success.");
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("There was an error with the request.");
            }
        });

Notice that the authorization token is obtained in the response to a successful login. It is not your app ID. Also, I doubt document.getElementById("attachment") will work. You need to convert that object into an byte array blob.

Answer 2

It works for me:

function postAttach() {
	var msg = $('#attach_body').val();
	
	var m_data = new FormData();
	m_data.append('body', msg);
	m_data.append('group_id', 6194208);
	m_data.append('attachment1', $('input[name=attachment1]')[0].files[0]);

	yam.platform.request({
		
		url: "messages.json",     
		contentType: "multipart/form-data",
		data: m_data,
		processData: false,
		contentType: false,
		type: 'POST',
		dataType: 'json',
		success: function (user) { 
			alert("The request was successful.");
		},
		error: function (user) {console.log(user);
			alert("There was an error with the request.");
		}
	});
}

 <div name="postYammer">
    	<input type="text" name="body" value="" id="attach_body" />
    	<input type="file" name="attachment1"  id="attach_img"/>
    	<button onclick="postAttach()" type="button">Post</button>
    </div>