
<div id="dropbox_area">
    <div class="dropbox" id="dropbox">i18n("Drop your files here")</div>
    <div class="shelf" id="shelf"></div>

    <form enctype="multipart/form-data" style="margin: 0" name="properties" method="post" action="main.php">
        <input type="hidden" name="frame" value="4">
        <input type="hidden" name="area" value="upl">
        <input type="hidden" name="path" value="{PATH}">
        <input type="hidden" name="file" value="">
        <input type="hidden" name="action" value="upl_upload">
        <input type="hidden" name="appendparameters" value="{APPENDPARAMETERS}">
        <input type="hidden" name="contenido" value="1">
        <input type="hidden" name="MAX_FILE_SIZE" value="{MAX_FILE_SIZE}">

        <table width="500" id="" class="generic" cellspacing="0" cellpadding="2">
            <tr>
                <th colspan="2" valign="top">i18n("Upload files")
                </th>
            </tr>
            <tr id="1">
                <td nowrap="nowrap" valign="top"
                    style="padding-left: 0; white-space: nowrap;" width="1"><nobr>i18n("Path"):</nobr></td>
                <td nowrap="nowrap" valign="top" align="left">{DISPLAY_PATH}</td>
            </tr>
            <tr id="2">
                <td nowrap="nowrap" valign="top" style="padding-left: 0; white-space: nowrap;" width="1"><nobr>i18n("Upload files")</nobr></td>
                <td nowrap="nowrap" valign="top" align="left">
                    <input id="m1" name="file[]" class="text_medium file_upload" size="40" type="file"><br>
                    <input id="m2" name="file[]" class="text_medium file_upload" size="40" type="file"><br>
                    <input id="m3" name="file[]" class="text_medium file_upload" size="40" type="file"><br>
                    <input id="m4" name="file[]" class="text_medium file_upload" size="40" type="file"><br>
                    <input id="m5" name="file[]" class="text_medium file_upload" size="40" type="file"><br>
                    <input id="m6" name="file[]" class="text_medium file_upload" size="40" type="file"><br>
                    <input id="m7" name="file[]" class="text_medium file_upload" size="40" type="file"><br>
                    <input id="m8" name="file[]" class="text_medium file_upload" size="40" type="file"><br>
                    <input id="m9" name="file[]" class="text_medium file_upload" size="40" type="file"><br>
                    <input id="m10" name="file[]" class="text_medium file_upload" size="40" type="file"><br>
                </td>
            </tr>
            <tr id="3">
                <td nowrap="nowrap" valign="top" style="padding-left: 0;">&nbsp;</td>
                <td nowrap="nowrap" valign="top" style="white-space: nowrap;" align="right">
                    <input style="margin-left: 5px;" title="i18n("Save changes")" alt="i18n("Save changes")" type="image"
                        src="images/but_ok.gif" name="submit" onclick="" accesskey="s">
                </td>
            </tr>
        </table>
    </form>
</div>

<!--

template.upl_files_upload

i18n("Cancelling...")
i18n("Cancel")
i18n("Cancelled")
i18n("Drop your files here")
i18n("Finished!")
i18n("Path")
i18n("Save changes")
i18n("Upload failed!")
i18n("Upload files")
i18n("Uploading...")
i18n("Waiting...")

-->

<script type="text/javascript">
(function(Con, $) {

    var upload_path = '{PATH}';
    var maxFileSize = {MAX_FILE_SIZE};
    var text_aborting = "i18n("Cancelling...")";
    var text_finished = "i18n("Finished!")";
    var text_error = "i18n("Upload failed!")";
    var text_aborted = "i18n("Cancelled")";
    var text_uploading = "i18n("Uploading...")";
    var text_cancelButton = "i18n("Cancel")";
    var text_waiting = "i18n("Waiting...")";
    var text_fileIsTooBig = "i18n("This file is too large.")";

    $(function() {

        // Instantiate drag & drop upload component
        var uplFilesUpload = new Con.UplFilesUpload({
            selectorDropbox: "#dropbox",
            selectorShelf: "#shelf",
            sid: Con.sid,
            urlHost: Con.cfg.urlBackend,
            urlUpload: Con.cfg.urlBackend + "main.php",
            uploadPath: upload_path,
            maxFileSize: maxFileSize,
            text_aborting: text_aborting,
            text_finished: text_finished,
            text_error: text_error,
            text_aborted: text_aborted,
            text_uploading: text_uploading,
            text_cancelButton: text_cancelButton,
            text_waiting: text_waiting,
            text_fileIsTooBig: text_fileIsTooBig,
            onDragDropUploadDone: function(success) {
                if (success) {
                    window.location.href = "main.php?area=upl&frame=4&path=" + upload_path + "&appendparameters=&contenido=" + Con.sid
                } else {
                    // to do on fail
                }
            }
        });

        // Bind to file upload changes
        $('.file_upload').bind('change', function() {
            if (this.files && this.files.length > 0 && this.files[0].size > maxFileSize) {
                this.files = null;
                alert(this.files[0].name + ': ' + $('<div />').html(text_fileIsTooBig).text());
            }
        });
    });

    if (false === Con.markSubmenuItem('c_1')) {
        Con.markSubmenuItem('c_0');
    }

    // to reload the left frame after delete/insert new files
    var frame = Con.getFrame('left_bottom');
    if (frame) {
        frame.location.href = Con.UtilUrl.replaceParams(frame.location.href, {action: null, path: null});
    }

})(Con, Con.$);
</script>