infusion
Version:
Infusion is an application framework for developing flexible stuff with JavaScript
151 lines (135 loc) • 8.58 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Uploader Template</title>
<link rel="stylesheet" type="text/css" href="../../../framework/core/css/fluid.css" />
<link rel="stylesheet" type="text/css" href="../css/Uploader.css" />
<!-- Fluid and jQuery Dependencies -->
<script src="../../../lib/jquery/core/js/jquery.js"></script>
<script src="../../../lib/jquery/ui/js/version.js"></script>
<script src="../../../lib/jquery/ui/js/keycode.js"></script>
<script src="../../../framework/core/js/jquery.keyboard-a11y.js"></script>
<script src="../../../lib/jquery/plugins/scrollTo/js/jquery.scrollTo.js"></script>
<script src="../../../framework/core/js/Fluid.js"></script>
<script src="../../../framework/core/js/FluidDocument.js"></script>
<script src="../../../framework/core/js/FluidIoC.js"></script>
<script src="../../../framework/core/js/FluidView.js"></script>
<script src="../../../framework/core/js/FluidView-browser.js"></script>
<script src="../../../framework/core/js/DataBinding.js"></script>
<script src="../../../framework/enhancement/js/ContextAwareness.js"></script>
<script src="../../../framework/enhancement/js/ProgressiveEnhancement.js"></script>
<!-- Uploader dependencies -->
<script src="../js/Uploader.js"></script>
<script src="../js/FileQueue.js"></script>
<script src="../../progress/js/Progress.js"></script>
<script src="../js/FileQueueView.js"></script>
<script src="../js/ErrorPanel.js"></script>
<script src="../js/HTML5UploaderSupport.js"></script>
<script src="../js/DemoUploadManager.js"></script>
<script src="../js/MimeTypeExtensions.js"></script>
</head>
<body>
<!-- Basic upload controls, used when JavaScript is unavailable -->
<form method="post" enctype="multipart/form-data" class="fl-progEnhance-basic">
<p>Use the Browse button to add a file, and the Save button to upload it.</p>
<input name="fileData" type="file" />
<input class="fl-uploader-basic-save" type="submit" value="Save"/>
</form>
<!-- Uploader container -->
<div class="flc-uploader-container">
<form class="flc-uploader fl-uploader fl-progEnhance-enhanced" method="get" enctype="multipart/form-data">
<!-- File Queue body -->
<table class="flc-uploader-queue fl-uploader-queue">
<caption class="fl-hidden-accessible">File Upload Queue:</caption>
<thead class="fl-uploader-header">
<tr>
<!-- TODO: These strings should be injected programmatically to support localization -->
<th class="fl-uploader-file-name">File Name</th>
<th class="fl-uploader-file-size">Size</th>
<th class="fl-uploader-file-actions">
<span class="fl-hidden-accessible">Status / Actions</span>
</th>
</tr>
</thead>
<tbody>
<!-- Template for file row -->
<tr class="flc-uploader-file-tmplt flc-uploader-file">
<td class='flc-uploader-file-info fl-uploader-file-name'>
<span class="flc-uploader-file-name">File Name Placeholder</span>
<div class="flc-uploader-file-error-tmplt fl-uploader-file-error">
<span class="fl-infusionIcon-warning"></span>
<span class='flc-uploader-file-error'></span>
</div>
</td>
<td class="flc-uploader-file-size fl-uploader-file-size">0 KB</td>
<td class="fl-uploader-file-actions">
<button type="button" class="flc-uploader-file-action" tabindex="-1"></button>
</td>
</tr>
</tbody>
</table>
<!-- File progress bar template, used to generate progress bars for each file in the queue -->
<div class="flc-uploader-file-progressor-tmplt fl-uploader-file-progress"></div>
<!-- Initial instructions -->
<div class="flc-uploader-browse-instructions fl-uploader-browse-instructions">
Choose <em>Browse files</em> to add files to the queue.
</div>
<!-- Status footer -->
<div class="flc-uploader-queue-footer fl-uploader-queue-footer fl-clearfix">
<div class="fl-force-left">
<div class="flc-uploader-total-progress-text fl-uploader-total-progress-text">
Total: 0 files (0 KB)
</div>
<div class="flc-uploader-upload-limit-text"></div>
</div>
<div class="fl-text-align-right fl-force-right">
<span class="flc-uploader-button-browse fl-uploader-browse">
<span class="fl-infusionIcon-plus"></span>
<span class="flc-uploader-button-browse-text fl-uploader-button-browse-text">Browse files</span>
</span>
</div>
<!-- Total progress bar -->
<div class="flc-uploader-total-progress fl-uploader-total-progress-okay"></div>
<div class="flc-uploader-errorsPanel fl-uploader-errorsPanel">
<span class="fl-infusionIcon-warning"></span>
<div class="flc-uploader-errorPanel-header fl-uploader-errorsPanel-header">Warnings:</div>
<!-- The markup for each error section will be rendered into these containers. -->
<div class="flc-uploader-errorPanel-section-fileSize"></div>
<div class="flc-uploader-errorPanel-section-numFiles"></div>
<!-- Error section template.-->
<div class="flc-uploader-errorPanel-section-tmplt fl-uploader-hidden-templates">
<div>
<div class="flc-uploader-errorPanel-section-title fl-uploader-errorPanel-section-title fl-force-left">
x files were too y and were not added to the queue.
</div>
<button type="button" class="flc-uploader-errorPanel-section-removeButton fl-uploader-errorPanel-section-removeButton fl-force-right">
<span class="flc-uploader-erroredButton-text fl-hidden-accessible">Remove error</span>
</button>
</div>
<div>
<div class="flc-uploader-errorPanel-section-details fl-uploader-errorPanel-section-details">
<p>The following files were not added:</p>
<p class="flc-uploader-errorPanel-section-files">file_1, file_2, file_3, file_4, file_5 </p>
</div>
</div>
<div>
<button type="button" class="flc-uploader-errorPanel-section-toggleDetails fl-uploader-errorPanel-section-toggleDetails">Hide this list</button>
</div>
</div>
</div>
</div>
<!-- Upload buttons -->
<div class="fl-uploader-buttons">
<button type="button" class="flc-uploader-button-pause fl-uploader-button-stop fl-uploader-hidden">Stop Upload</button>
<button type="button" class="flc-uploader-button-upload fl-uploader-button-upload fl-uploader-dim">Upload</button>
</div>
</form>
</div>
<script>
var myUploader = fluid.uploader(".flc-uploader", {
demo: true
});
</script>
</body>
</html>