Examples

How to integrate Real Uploader with a form

This is just a proof how to use the uploader events and callbacks to integrate it in any web page system forms or other.

Code

                        <!DOCTYPE html>
    <html>
    <head>
        <title>How to integrate Real Uploader with a form</title>
        <link rel="stylesheet" type="text/css" href="css/minimal.css" />
        <script src="js/RealUploader.js"></script>
    </head>
    <body>
    <style>
    .ax-toolbar{
        display: none;
    }
    </style>
    <form class="form-horizontal" id="justaform" method="post" action="_post.php">
        <fieldset>
            <legend>Legend</legend>
            <div class="form-group">
                <label class="col-lg-2 control-label" for="inputEmail">Email</label>
                <div class="col-lg-10">
                    <input type="text" placeholder="Email" name="inputEmail" class="form-control" value="myemail@provider.com">
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-2 control-label" for="inputPassword">Password</label>
                <div class="col-lg-10">
                    <input type="password" placeholder="Password" name="inputPassword" class="form-control" value="secret">
                    <div class="checkbox">
                        <label><input type="checkbox"> Checkbox</label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-2 control-label" for="textArea">Textarea</label>
                <div class="col-lg-10">
                    <textarea name="textArea" rows="3" class="form-control"></textarea>
                    <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-2 control-label">Please select two images</label>
                <div class="col-lg-10">
                    <div id="targetElement"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-lg-10 col-lg-offset-2">
                    <button class="btn btn-default" type="reset">Cancel</button>
                    <button class="btn btn-primary" type="submit">Submit</button>
                </div>
            </div>
        </fieldset>
    </form>

    <script type="text/javascript">
    //get the form
    var form = document.getElementById('justaform');

    //disable form submit
    form.onsubmit = function(){
        return false;
    };

    //disable the submit button
    var submitBtn = form.querySelector("button[type=submit]");
    submitBtn.setAttribute("disabled", "disabled");

    //create the uploader
    var uploader = new RealUploader("#targetElement", {
        accept: "image/*",
        autoStart: true, //upload file automatically on select as GMAIL
        url: "../../upload.php",
        listeners: {
            //on upload end appends the file name to the form
            finish: function(fileNames) {

                //for each uploaded file add a hidden input to the form
                //with the file name. The remote path should be know only on server script
                console.log('Uploaded files are', fileNames);
                for(var i = 0; i<fileNames.length; i++) {
                    var input = document.createElement('input');
                    input.setAttribute('type', 'hidden');
                    input.setAttribute('name', 'files[]');
                    input.value = fileNames[i];
                    form.appendChild(input);
                }
                form.onsubmit = null;
                submitBtn.removeAttribute("disabled");
            }
        }
    });
    </script>
    </body>
    </html>

Result

Legend
A longer block of help text that breaks onto a new line and may extend beyond one line.