Examples

Add custom inputs to send with the files to upload

Code

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

Result