Retrieve JSON data from server response

[csdude55]

I'm working with a jQuery script that returns data that looks like this:

responseText = {"success":true,"uuid":"blah-blah-blah",","whatever":"example"}

I need to send this data to a hidden input field, so that it can be submitted through the form and processed with a Perl script.

I'm guessing that it's going to look something like this:

var xhr;

if (window.XMLHttpRequest) 
 xhr = new XMLHttpRequest(); 

else if (window.ActiveXObject) 
 xhr = new ActiveXObject("Msxml2.XMLHTTP");

// something something something

var json = JSON.parse(xhr.responseText);

But how do I get the responseText for the current page? Something in that // something something something section, maybe?

If it matters, I'm poking around with the "Fine Uploader" jQuery library:

[fineuploader.com...]

It's easy to implement, they said. You'll have fun, they said. Blah.

[csdude55]

Well, it's confusing as can be and the documentation is practically non-existent, but I figured it out.

The key is .on('complete') in jQuery. So the script ends up looking like:

$('#fine-uploader-gallery').fineUploader({
 template: 'qq-simple-thumbnails-template',

 request: {
 endpoint: 'endpoint.php'
 },

 // blah blah blah
})
.on('complete', function(event, uuid, uploadName, responseJSON) {
 alert(uuid + ', ' + uploadName + ', ' + responseJSON['uuid']);
});

So now I can assign responseJSON['whatever'] to <input type="hidden"> tags to be sent to the server.

Hope this helps someone else!

[csdude55]

But as a part-2 to this, how might one SEND data to the script?

I'm trying to figure out the "Initial List" feature, so that I can take images that are already uploaded and show them in the Fine Uploader section. But the documentation is VERY vague:

[docs.fineuploader.com...]

I can create the JSON array in PHP, no problem. But what do I do with the array once I have it? Any thoughts?

[csdude55]

Since I'm answering my own questions here, I wanted to give what I found for the sake of posterity.

Fine Uploader wants data in the following format (* = required):

*name: String - Name of the file.
*uuid: String - UUID of the file.
size: Number - Size of the file, in bytes.
deleteFileEndpoint: String - Endpoint for the associated delete file request. If omitted, the deleteFile.endpoint is used.
deleteFileParams: Object - Parameters to send along with the associated delete file request. If omitted, deleteFile.params is used.
thumbnailUrl: String - URL of an image to display next to the file.
*s3Key: String - Key of the file in your S3 bucket. Only required if using Fine Uploader S3.
*s3Bucket: String - Name of the bucket where the file is stored in S3. Only required if using Fine Uploader S3 and if the bucket cannot be determined by examining the endpoint URL (such as when routing through a CDN).
*blobName: String - Name of the file in your Azure Blob Storage container. Only required if using Fine Uploader Azure.

In my case I'm not using S3 or Azure, and really only needed to send name, uuid, and thumbnailUrl. So here's the script I created:

function jsonObj(id, image) {
 this.name = image;
 this.uuid = id;
 this.thumbnailUrl = '/fineuploader/files/' + id + '/' + image;
}

var imgObj = new Array();
imgObj[0] = new jsonObj('blah-blah-blah', 'example.jpg');
imgObj[1] = new jsonObj('blah2-blah2-blah2', 'example_2.jpg');

JSON.stringify(imgObj);

// print results to the console for testing
console.log(imgObj);

This ends up sending something like:

{"name":"example.jpg", "uuid":"blah-blah-blah", "thumbnailUrl":"/fineuploader/fles/blah-blah-blah/example.jpg"},
{"name":"example_2.jpg", "uuid":"blah2-blah2-blah2", "thumbnailUrl":"/fineuploader/fles/blah2-blah2-blah2/example_2.jpg"}

I'll end up creating a separate thread with a working example for Fine Uploader, since working examples with "Initial List" seem to be non-existent and the documentation really doesn't explain it at all. I think I have it working, but I want to test it well before posting the example.