<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/minimal.css" />
<script src="js/RealUploader.js"></script>
</head>
<body><div id="targetElement"></div>
<script type="text/javascript">
var uploader = new RealUploader("#targetElement", {
listeners: {
beforeRenderFile: function(file, template) {
var title = "Title: <input type=text class=file_title ><br>";
var description = "Description: <input type=text class=file_desc ><br>";
return template + title + description;
},
afterRenderFile: function(file, elements) {
//file.dom === elements
}
},
//use the DATA option to attach the above inputs to the AJAX request
data: function(file) {
//get the file dom container by
var container = file.dom.container;
//now get the custom inputs attached above
//TODO make some validation over existence
var title = container.querySelector('.file_title');
var desc = container.querySelector('.file_desc');
//on server side , ex PHP we will have $_POST['title']...
return {
title: title.value, description: desc.value
}
}
});
</script>
</body>
</html>