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