docs/jscripts/infusion/components/uploader/html/Uploader.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml">
   3     <head>
   4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   5         <title>Uploader Template</title>
   6
   7         <link href="../../../framework/fss/css/fss-reset.css" rel="stylesheet" type="text/css" />
   8         <link href="../../../framework/fss/css/fss-layout.css" rel="stylesheet" type="text/css" />
   9         <link href="../css/Uploader.css" rel="stylesheet" type="text/css" />
  10
  11         <!-- Fluid and jQuery Dependencies -->
  12         <script src="../../../lib/jquery/core/js/jquery.js" type="text/javascript"></script>
  13         <script src="../../../lib/jquery/ui/js/ui.core.js" type="text/javascript"></script>
  14         <script src="../../../framework/core/js/jquery.keyboard-a11y.js" type="text/javascript"></script>
  15         <script src="../../../lib/swfobject/js/swfobject.js" type="text/javascript"></script>
  16         <script src="../../../lib/swfupload/js/swfupload.js" type="text/javascript"></script>
  17         <script src="../../../framework/core/js/Fluid.js" type="text/javascript"></script>
  18         <script src="../../../framework/core/js/ProgressiveEnhancement.js" type="text/javascript"></script>
  19
  20         <!-- Uploader dependencies; these will be merged into a new Uploader.js at the end -->
  21         <script src="../js/FileQueue.js" type="text/javascript"></script>
  22         <script src="../js/DemoUploadManager.js" type="text/javascript"></script>
  23         <script src="../js/SWFUploadManager.js" type="text/javascript"></script>
  24         <script src="../js/Scroller.js" type="text/javascript"></script>
  25         <script src="../../progress/js/Progress.js" type="text/javascript"></script>
  26         <script src="../js/Uploader.js" type="text/javascript"></script>
  27     </head>
  28
  29     <body>
  30         <div id="uploader-contents">
  31
  32             <!-- This form will be progressively enhanced by the Fluid Uploader component. -->
  33             <form method="post" enctype="multipart/form-data" class="fl-uploader fl-progEnhance-basic">
  34                 <p>Browse to upload a file.</p>
  35                 <input name="fileData" type="file" />
  36                 <div><input type="submit" value="Save"/></div>
  37             </form>
  38
  39             <!-- This is the markup for the Fluid Uploader component itself. -->
  40             <form class="flc-uploader fl-uploader fl-progEnhance-enhanced"
  41                   method="get"
  42                   enctype="multipart/form-data">
  43
  44                 <!-- The file queue -->
  45                 <div class="fl-uploader-queue-wrapper">
  46
  47                     <!-- Top of the queue -->
  48                     <div class="fl-uploader-queue-header">
  49                         <table cellspacing="0" cellpadding="0" summary="Headers for the file queue.">
  50                             <caption>File Upload Queue:</caption>
  51
  52                                 <tr>
  53                                     <th scope="col" class="fl-uploader-file-name">File Name</th>
  54                                     <th scope="col" class="fl-uploader-file-size">Size&nbsp;&nbsp;</th>
  55                                     <th scope="col" class="fl-uploader-file-actions">&nbsp;</th>
  56                                 </tr>
  57
  58                         </table>
  59                     </div>
  60
  61                     <!-- Scrollable view -->
  62                     <div class="flc-scroller fl-scroller">
  63                         <div class="fl-scroller-inner">
  64                             <table cellspacing="0" class="flc-uploader-queue fl-uploader-queue" summary="Queue of files to upload.">
  65                                 <tbody>
  66                                     <!-- Rows will be rendered in here. -->
  67
  68                                     <!-- Template markup for the file queue rows -->
  69                                     <tr class="flc-uploader-file-tmplt flc-uploader-file fl-uploader-hidden-templates">
  70                                         <th class="flc-uploader-file-name fl-uploader-file-name" scope="row">File Name Placeholder</th>
  71                                         <td class="flc-uploader-file-size fl-uploader-file-size">0 KB</td>
  72                                         <td class="fl-uploader-file-actions">
  73                                             <button type="button" class="flc-uploader-file-action fl-uploader-file-action" title="Remove File" tabindex="-1">
  74                                                 <span class="fl-uploader-button-text fl-uploader-hidden">Remove file from queue</span>
  75                                             </button>
  76                                         </td>
  77                                     </tr>
  78
  79                                     <!-- Template for the file error info rows -->
  80                                     <tr class="flc-uploader-file-error-tmplt fl-uploader-file-error fl-uploader-hidden-templates">
  81                                         <td colspan="3" class="flc-uploader-file-error"></td>
  82                                     </tr>
  83                                 </tbody>
  84                             </table>
  85                             <div class="flc-uploader-file-progressor-tmplt fl-uploader-file-progress"><span class="fl-uploader-file-progress-text fl-uploader-hidden">76%</span></div>
  86                         </div>
  87                     </div>
  88
  89                     <div class="flc-uploader-browse-instructions fl-uploader-browse-instructions">
  90                         Choose <strong>Browse files</strong> to add files to the queue
  91                     </div>
  92
  93                     <!-- Foot of the queue -->
  94                     <div class="flc-uploader-queue-footer fl-uploader-queue-footer">
  95                         <table cellspacing="0" cellpadding="0" summary="Status of file queue.">
  96
  97                                 <tr>
  98                                     <td class="flc-uploader-total-progress-text">
  99                                         Total: <span class="fl-uploader-totalFiles">0</span> files
 100                                         (<span class="fl-uploader-totalBytes">0 KB</span>)
 101                                     </td>
 102                                     <td class=".fl-uploader-footer-buttons" align="right" >
 103                                         <a href="#" class="flc-uploader-button-browse fl-uploader-browse">Browse files</a>
 104                                     </td>
 105                                 </tr>
 106
 107                         </table>
 108                         <div class="flc-uploader-total-progress fl-uploader-total-progress-okay">&nbsp;</div>
 109                     </div>
 110                 </div>
 111
 112                 <!-- Action buttons -->
 113                 <div class="fl-uploader-btns">
 114                     <button type="button" class="flc-uploader-button-pause fl-uploader-pause fl-uploader-hidden">Stop Upload</button><button type="button" class="flc-uploader-button-upload fl-uploader-upload fl-uploader-button-default fl-uploader-dim" disabled="disabled">Upload</button>
 115                 </div>
 116             </form>
 117
 118         </div>
 119
 120         <script type="text/javascript">
 121             var myUploader = fluid.progressiveEnhanceableUploader(".flc-uploader", ".fl-progEnhance-basic", {
 122                 demo: true,
 123                 uploadManager: "fluid.swfUploadManager"
 124             });
 125         </script>
 126     </body>
 127 </html>