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 rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-reset-global.css" />
   8         <link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-base-global.css" />
   9         <link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-text.css" />
  10         <link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-layout.css" />
  11         <link rel="stylesheet" type="text/css" href="../css/Uploader.css" />
  12
  13         <!-- Fluid and jQuery Dependencies -->
  14         <script type="text/javascript" src="../../../lib/jquery/core/js/jquery.js"></script>
  15         <script type="text/javascript" src="../../../lib/jquery/ui/js/jquery.ui.core.js"></script>
  16         <script type="text/javascript" src="../../../framework/core/js/jquery.keyboard-a11y.js"></script>
  17         <script type="text/javascript" src="../../../lib/jquery/plugins/scrollTo/js/jquery.scrollTo.js"></script>
  18         <script type="text/javascript" src="../../../lib/swfobject/js/swfobject.js"></script>
  19         <script type="text/javascript" src="../../../lib/swfupload/js/swfupload.js"></script>
  20         <script type="text/javascript" src="../../../framework/core/js/Fluid.js"></script>
  21         <script type="text/javascript" src="../../../framework/core/js/FluidDocument.js"></script>
  22         <script type="text/javascript" src="../../../framework/core/js/FluidView.js"></script>
  23         <script type="text/javascript" src="../../../framework/core/js/DataBinding.js"></script>
  24         <script type="text/javascript" src="../../../framework/core/js/FluidIoC.js"></script>
  25         <script type="text/javascript" src="../../../framework/enhancement/js/ProgressiveEnhancement.js"></script>
  26
  27         <!-- Uploader dependencies -->
  28         <script type="text/javascript" src="../js/Uploader.js"></script>
  29         <script type="text/javascript" src="../js/FileQueue.js"></script>
  30         <script type="text/javascript" src="../../progress/js/Progress.js"></script>
  31         <script type="text/javascript" src="../js/FileQueueView.js"></script>
  32         <script type="text/javascript" src="../js/ErrorPanel.js"></script>
  33         <script type="text/javascript" src="../js/FlashUploaderSupport.js"></script>
  34         <script type="text/javascript" src="../js/Flash9UploaderSupport.js"></script>
  35         <script type="text/javascript" src="../js/HTML5UploaderSupport.js"></script>
  36         <script type="text/javascript" src="../js/DemoUploadManager.js"></script>
  37         <script type="text/javascript" src="../js/MimeTypeExtensions.js"></script>
  38
  39     </head>
  40
  41     <body>
  42         <!-- Basic upload controls, used when JavaScript is unavailable -->
  43         <form method="post" enctype="multipart/form-data" class="fl-progEnhance-basic">
  44             <p>Use the Browse button to add a file, and the Save button to upload it.</p>
  45             <input name="fileData" type="file" />
  46             <input class="fl-uploader-basic-save" type="submit" value="Save"/>
  47         </form>
  48
  49         <!-- Uploader container -->
  50         <form class="flc-uploader fl-uploader fl-progEnhance-enhanced" method="get" enctype="multipart/form-data">
  51
  52             <!-- File Queue, which is split up into two separate tables: one for the header and body -->
  53             <table class="fl-uploader-header">
  54                         <tr>
  55                                         <th class="fl-uploader-file-name">File Name</th>
  56                                         <th class="fl-uploader-file-size">Size</th>
  57                                         <th class="fl-uploader-file-actions"></th>
  58                                 </tr>
  59             </table>
  60
  61             <!-- File Queue body, which is the default container for the FileQueueView component -->
  62             <table summary="The list of files" class="flc-uploader-queue fl-uploader-queue">
  63                                 <caption>File Upload Queue:</caption>
  64                                 <tbody>
  65                                         <!-- Template for file row -->
  66                                         <tr class="flc-uploader-file-tmplt flc-uploader-file">
  67                                                 <td class="flc-uploader-file-name fl-uploader-file-name">File Name Placeholder</td>
  68                                                 <td class="flc-uploader-file-size fl-uploader-file-size">0 KB</td>
  69                                                 <td class="fl-uploader-file-actions">
  70                                                         <button type="button" class="flc-uploader-file-action" tabindex="-1"></button>
  71                                                 </td>
  72                                         </tr>
  73
  74                                         <!-- Template for error info row -->
  75                                         <tr class="flc-uploader-file-error-tmplt fl-uploader-file-error">
  76                                                 <td colspan="3" class="flc-uploader-file-error"></td>
  77                                         </tr>
  78                                 </tbody>
  79                         </table>
  80
  81             <!-- File progress bar template, used to generate progress bars for each file in the queue -->
  82             <div class="flc-uploader-file-progressor-tmplt fl-uploader-file-progress"></div>
  83
  84             <!-- Initial instructions -->
  85             <div class="flc-uploader-browse-instructions fl-uploader-browse-instructions">
  86                 Choose <em>Browse files</em> to add files to the queue.
  87             </div>
  88
  89             <!-- Status footer -->
  90             <div class="flc-uploader-queue-footer fl-uploader-queue-footer fl-clearfix">
  91                 <div class="fl-force-left">
  92                         <div class="flc-uploader-total-progress-text fl-uploader-total-progress-text">
  93                                 Total: 0 files (0 KB)
  94                         </div>
  95                         <div class="flc-uploader-upload-limit-text"></div>
  96                 </div>
  97                 <div class="fl-text-align-right fl-force-right">
  98                     <span class="flc-uploader-button-browse fl-uploader-browse">
  99                         <span class="flc-uploader-button-browse-text">Browse files</span>
 100                     </span>
 101                 </div>
 102                 <!-- Total progress bar -->
 103                 <div class="flc-uploader-total-progress fl-uploader-total-progress-okay"></div>
 104                 <div class="flc-uploader-errorsPanel fl-uploader-errorsPanel">
 105                     <div class="fl-uploader-errorsPanel-header"><span class="flc-uploader-errorPanel-header">Warnings:</span></div>
 106
 107                     <!-- The markup for each error section will be rendered into these containers. -->
 108                     <div class="flc-uploader-errorPanel-section-fileSize"></div>
 109                     <div class="flc-uploader-errorPanel-section-numFiles"></div>
 110
 111                      <!-- Error section template.-->
 112                      <div class="flc-uploader-errorPanel-section-tmplt fl-uploader-hidden-templates">
 113                         <div class="fl-container-flex">
 114                             <div class="flc-uploader-errorPanel-section-title fl-uploader-errorPanel-section-title fl-force-left">
 115                                 x files were too y and were not added to the queue.
 116                             </div>
 117                             <button type="button" class="flc-uploader-errorPanel-section-removeButton fl-uploader-errorPanel-section-removeButton fl-force-right">
 118                                  <span class="flc-uploader-erroredButton-text fl-uploader-hidden">Remove error</span>
 119                             </button>
 120                         </div>
 121
 122                         <div class="fl-container-flex">
 123                             <div class="flc-uploader-errorPanel-section-details fl-uploader-errorPanel-section-details">
 124                                 <p>The following files were not added:</p>
 125                                 <p class="flc-uploader-errorPanel-section-files">file_1, file_2, file_3, file_4, file_5 </p>
 126                             </div>
 127                         </div>
 128                         <div class="fl-container-flex">
 129                             <button type="button" class="flc-uploader-errorPanel-section-toggleDetails fl-uploader-errorPanel-section-toggleDetails">Hide this list</button>
 130                         </div>
 131                      </div>
 132                  </div>
 133             </div>
 134
 135             <!-- Upload buttons -->
 136             <div class="fl-uploader-buttons">
 137                 <button type="button" class="flc-uploader-button-pause fl-uploader-button-stop fl-uploader-hidden">Stop Upload</button>
 138                 <button type="button" class="flc-uploader-button-upload fl-uploader-button-upload fl-uploader-dim">Upload</button>
 139             </div>
 140
 141             <div class="flc-uploader-status-region fl-offScreen-hidden"></div>
 142         </form>
 143
 144         <script type="text/javascript">
 145             var myUploader = fluid.uploader(".flc-uploader", {
 146                 demo: true
 147             });
 148         </script>
 149     </body>
 150 </html>