How to use AUI file upload?

Deleted user July 29, 2016

I would like to upload files from my custom xhtml confluence plugin macro (when the page is saved) and access them inside a java file inside the plugin.

 

I found 

<form class="aui">
    <fieldset>
        <legend><span>File upload</span></legend>
        <div class="field-group">
            <label for="file-upload-example">Upload
                file</label>
            <input class="upfile" accept=".csv" type="file" id="file-upload-example" name="file-upload-example">
        </div>
    </fieldset>
</form>

from https://docs.atlassian.com/aui/latest/docs/forms.html but how do I get the file to one of my Java files? I'm not sure how to get it to js, how to make the ajax call (what the data for the ajax call should be) and what type of object it would give in my Java file.

 

 

I tried at least getting it to my js file but it calls the !input.files else if statement every time. 

var input = AJS.$("#file-upload-example");
 
if (!input) {
    console.log("Could not find the fileinput element.");
}
else if (!input.files) {
    console.log("files not recognized.");
}
else {
    file = input.files[0];
    AJS.$.ajax({
        url: baseUrl + "/rest/qrtrly-review-check-users/1.0/checkusers/send-file",
        type: 'POST',
        data: ????????, //I don't think JSON.stringify would work...
 	   success: function (e) {
  	      console.log("success " + e);
  	  },
  	  error: function (e) {
   	     console.log("Error executing ajax request." + e);
    	}
	});

}

3 answers

1 accepted

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

2 votes
Answer accepted
Yuri Diamandiev _Botron_ August 3, 2016

Hello,

You could try something along the lines of:

JS: (using jQuery-File-Upload)

$('#file-upload-example').fileupload({
      url: baseUrl + "/rest/qrtrly-review-check-users/1.0/checkusers/send-file",
      dataType: 'json',
      paramName: 'file')

Java:

@POST
	@Consumes({ MediaType.MULTIPART_FORM_DATA })
	@Produces({ MediaType.APPLICATION_JSON, MediaType.TEXT_PLAIN })
	public Response uploadFile(@MultipartFormParam("file") FilePart filePart,
			@Context HttpHeaders headers){
		// filePart.getName() gives you the name
		// filePart.getInputStream() gives a stream with the file data
	}

Check this for a reference implementation and this to parse the csv if needed.

1 vote
Peter Geshev
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
July 29, 2016

For uploading files via ajax you can see the FormData example. Keep in mind that FormData is not supported by older versions of IE (versions before 10.0)

Deleted user August 1, 2016

Okay, how does java accept it?

 

AJS.$.ajax({
    url: baseUrl + "/rest/qrtrly-review-check-users/1.0/checkusers/send-file",
    type: 'POST',
    data: formData,
    cache: false,
    processData: false,  // tell jQuery not to process the data
    contentType: false,   // tell jQuery not to set contentType
    headers: {
        'Content-Type' : 'multipart/form-data',
        'X-Atlassian-Token': 'no-check', 
        'Access-Control-Allow-Origin' : '*'
    },
    // Ajax events
    success: completeHandler = function (data) {
        console.log(data);
        console.log(data);
        console.log("made it to here");

    },
    error: function (jqXHR, textStatus, errorThrown) {
        console.log(jqXHR.readyState + "status: " + jqXHR.status);
        console.log("response text: " + jqXHR.responseText);
        console.log(textStatus);
        console.log(errorThrown);
        console.log("Error executing ajax request." + (typeof error));
    }
});
/**
 * Accepts user input for new user and sends to QrtrlyReviewModel to
 * add to the database and returns the row to be added to the table
 * @param request
 * @return DBList of the row to be added to the table
 */
@POST
@Produces((MediaType.APPLICATION_JSON))
@Consumes("multipart/form-data")
@Path("/send-file")
public Response sendField(final Object form, @Context HttpServletRequest request) {
    //Return if able to add row
    return Response.ok(transactionTemplate.execute(new TransactionCallback() {
        public Object doInTransaction() {
            return form.getClass();

        }
    })).build();
}
Deleted user August 1, 2016

(Note I get an "Unsupported Media type" error currently)

0 votes
Deleted user July 29, 2016

To get the files I figured out that input.prop("files") works! Now I just need to know how to submit it to java through an ajax call..

TAGS
AUG Leaders

Atlassian Community Events