source: trunk/admin/themes/default/template/photos_add_direct.tpl @ 5848

Last change on this file since 5848 was 5848, checked in by plg, 14 years ago

feature 1601: improve error feedback on multiple upload : use jGrowl jQuery
plugin to display individual state for each uploaded file.

File size: 8.6 KB
Line 
1{known_script id="jquery" src=$ROOT_URL|@cat:"themes/default/js/jquery.packed.js"}
2{known_script id="jquery.jgrowl" src=$ROOT_URL|@cat:"themes/default/js/plugins/jquery.jgrowl_minimized.js"}
3
4{if $upload_mode eq 'multiple'}
5<script type="text/javascript" src="{$uploadify_path}/swfobject.js"></script>
6<script type="text/javascript" src="{$uploadify_path}/jquery.uploadify.v2.1.0.min.js"></script>
7{/if}
8
9<link rel="stylesheet" type="text/css" href="{$ROOT_URL}admin/themes/default/uploadify.jGrowl.css">
10
11{literal}
12<script type="text/javascript">
13jQuery(document).ready(function(){
14  function checkUploadStart() {
15    var nbErrors = 0;
16    $("#formErrors").hide();
17    $("#formErrors li").hide();
18
19    if ($("input[name=category_type]:checked").val() == "new" && $("input[name=category_name]").val() == "") {
20      $("#formErrors #emptyCategoryName").show();
21      nbErrors++;
22    }
23
24    var nbFiles = 0;
25    if ($("#uploadBoxes").size() == 1) {
26      $("input[name^=image_upload]").each(function() {
27        if ($(this).val() != "") {
28          nbFiles++;
29        }
30      });
31    }
32    else {
33      nbFiles = $(".uploadifyQueueItem").size();
34    }
35
36    if (nbFiles == 0) {
37      $("#formErrors #noPhoto").show();
38      nbErrors++;
39    }
40
41    if (nbErrors != 0) {
42      $("#formErrors").show();
43      return false;
44    }
45    else {
46      return true;
47    }
48
49  }
50
51  $("input[name=category_type]").click(function () {
52    $("[id^=category_type_]").hide();
53    $("#category_type_"+$(this).attr("value")).show();
54  });
55
56  $("#hideErrors").click(function() {
57    $("#formErrors").hide();
58    return false;
59  });
60
61{/literal}
62{if $upload_mode eq 'html'}
63{literal}
64  function addUploadBox() {
65    var uploadBox = '<p class="file"><input type="file" size="60" name="image_upload[]" /></p>';
66    $(uploadBox).appendTo("#uploadBoxes");
67  }
68
69  addUploadBox();
70
71  $("#addUploadBox A").click(function () {
72    addUploadBox();
73  });
74
75  $("#uploadForm").submit(function() {
76    return checkUploadStart();
77  });
78{/literal}
79{elseif $upload_mode eq 'multiple'}
80
81var uploadify_path = '{$uploadify_path}';
82var upload_id = '{$upload_id}';
83var session_id = '{$session_id}';
84var pwg_token = '{$pwg_token}';
85var buttonText = 'Browse';
86
87{literal}
88  jQuery("#uploadify").uploadify({
89    'uploader'       : uploadify_path + '/uploadify.swf',
90    'script'         : uploadify_path + '/uploadify.php',
91    'scriptData'     : {
92      'upload_id' : upload_id,
93      'session_id' : session_id,
94      'pwg_token' : pwg_token,
95    },
96    'cancelImg'      : uploadify_path + '/cancel.png',
97    'queueID'        : 'fileQueue',
98    'auto'           : false,
99    'displayData'    : 'speed',
100    'buttonText'     : buttonText,
101    'multi'          : true,
102    'fileDesc'       : 'Photo files (*.jpg,*.jpeg)',
103    'fileExt'        : '*.jpg;*.JPG;*.jpeg;*.JPEG',
104    'onAllComplete'  : function(event, data) {
105      if (data.errors) {
106        return false;
107      }
108      else {
109        $("input[name=submit_upload]").click();
110      }
111    },
112    onError: function (event, queueID ,fileObj, errorObj) {
113      var msg;
114      if (errorObj.status == 404) {
115        alert('Could not find upload script.');
116        msg = 'Could not find upload script.';
117      }
118      else if (errorObj.type === "HTTP") {
119        msg = errorObj.type+": "+errorObj.status;
120      }
121      else if (errorObj.type ==="File Size") {
122        msg = fileObj.name+'<br>'+errorObj.type+' Limit: '+Math.round(errorObj.sizeLimit/1024)+'KB';
123      }
124      else {
125        msg = errorObj.type+": "+errorObj.text;
126      }
127
128      $.jGrowl(
129        '<p></p>'+msg,
130        {
131          theme:  'error',
132          header: 'ERROR',
133          sticky: true
134        }
135      );
136
137      $("#fileUploadgrowl" + queueID).fadeOut(
138        250,
139        function() {
140          $("#fileUploadgrowl" + queueID).remove()
141        }
142      );
143      return false;
144    },
145    onCancel: function (a, b, c, d) {
146      var msg = "Cancelled uploading: "+c.name;
147      $.jGrowl(
148        '<p></p>'+msg,
149        {
150          theme:  'warning',
151          header: 'Cancelled Upload',
152          life:   4000,
153          sticky: false
154        }
155      );
156    },
157    onClearQueue: function (a, b) {
158      var msg = "Cleared "+b.fileCount+" files from queue";
159      $.jGrowl(
160        '<p></p>'+msg,
161        {
162          theme:  'warning',
163          header: 'Cleared Queue',
164          life:   4000,
165          sticky: false
166        }
167      );
168    },
169    onComplete: function (a, b ,c, d, e) {
170      var size = Math.round(c.size/1024);
171      $.jGrowl(
172        '<p></p>'+c.name+' - '+size+'KB',
173        {
174          theme:  'success',
175          header: 'Upload Complete',
176          life:   4000,
177          sticky: false
178        }
179      );
180    }
181  });
182
183  $("input[type=button]").click(function() {
184    if (!checkUploadStart()) {
185      return false;
186    }
187
188    $("#uploadify").uploadifyUpload();
189  });
190
191{/literal}
192{/if}
193});
194</script>
195
196<div class="titrePage">
197  <h2>{'Upload Photos'|@translate}</h2>
198</div>
199
200<div id="photosAddContent">
201
202{if count($setup_errors) > 0}
203<div class="errors">
204  <ul>
205  {foreach from=$setup_errors item=error}
206    <li>{$error}</li>
207  {/foreach}
208  </ul>
209</div>
210{else}
211
212{if !empty($thumbnails)}
213<fieldset>
214  <legend>{'Uploaded Photos'|@translate}</legend>
215  <div>
216  {foreach from=$thumbnails item=thumbnail}
217    <a href="{$thumbnail.link}" class="externalLink">
218      <img src="{$thumbnail.src}" alt="{$thumbnail.file}" title="{$thumbnail.title}" class="thumbnail">
219    </a>
220  {/foreach}
221  </div>
222  <p id="batchLink"><a href="{$batch_link}">{$batch_label}</a></p>
223</fieldset>
224<p><a href="">{'Add another set of photos'|@translate}</a></p>
225{else}
226
227<div id="formErrors" class="errors" style="display:none">
228  <ul>
229    <li id="emptyCategoryName">{'The name of a category should not be empty'|@translate}</li>
230    <li id="noPhoto">{'Select at least one picture'|@translate}</li>
231  </ul>
232  <div class="hideButton" style="text-align:center"><a href="#" id="hideErrors">{'Hide'|@translate}</a></div>
233</div>
234
235<form id="uploadForm" enctype="multipart/form-data" method="post" action="{$F_ACTION}" class="properties">
236{if $upload_mode eq 'multiple'}
237<input name="upload_id" value="{$upload_id}" type="hidden">
238{/if}
239
240    <fieldset>
241      <legend>{'Drop into category'|@translate}</legend>
242     
243      <label><input type="radio" name="category_type" value="existing"> {'existing category'|@translate}</label>
244      <label><input type="radio" name="category_type" value="new" checked="checked"> {'create a new category'|@translate}</label>
245
246      <div id="category_type_existing" style="display:none" class="category_selection">
247        <select class="categoryDropDown" name="category">
248          {html_options options=$category_options selected=$category_options_selected}
249        </select>
250      </div>
251
252      <div id="category_type_new" class="category_selection">
253        <table>
254          <tr>
255            <td>{'Parent category'|@translate}</td>
256            <td>
257              <select class="categoryDropDown" name="category_parent">
258                <option value="0">------------</option>
259                {html_options options=$category_parent_options selected=$category_parent_options_selected}
260              </select>
261            </td>
262          </tr>
263          <tr>
264            <td>{'Category name'|@translate}</td>
265            <td>
266              <input type="text" name="category_name" value="{$F_CATEGORY_NAME}" style="width:400px">
267            </td>
268          </tr>
269        </table>
270      </div>
271    </fieldset>
272
273    <fieldset>
274      <legend>{'Who can see these photos?'|@translate}</legend>
275
276      <select name="level" size="1">
277        {html_options options=$level_options selected=$level_options_selected}
278      </select>
279    </fieldset>
280
281    <fieldset>
282      <legend>{'Select files'|@translate}</legend>
283
284{if $upload_mode eq 'html'}
285    <p><a href="{$switch_url}">{'... or switch to the multiple files form'|@translate}</a></p>
286
287      <p>{'JPEG files or ZIP archives with JPEG files inside please.'|@translate}</p>
288
289      <div id="uploadBoxes"></div>
290      <div id="addUploadBox">
291        <a href="javascript:">{'+ Add an upload box'|@translate}</a>
292      </div>
293   
294    </fieldset>
295
296    <p>
297      <input class="submit" type="submit" name="submit_upload" value="{'Upload'|@translate}" {$TAG_INPUT_ENABLED}/>
298    </p>
299{elseif $upload_mode eq 'multiple'}
300    </table>
301
302    <p>
303      <input type="file" name="uploadify" id="uploadify" />
304    </p>
305
306    <p><a href="{$switch_url}">{'... or switch to the old style form'|@translate}</a></p>
307
308    <div id="fileQueue"></div>
309
310    </fieldset>
311    <p>
312      <input class="submit" type="button" value="{'Upload'|@translate}"/>
313      <input type="submit" name="submit_upload" style="display:none"/>
314    </p>
315{/if}
316</form>
317{/if} {* empty($thumbnails) *}
318{/if} {* $setup_errors *}
319
320</div> <!-- photosAddContent -->
Note: See TracBrowser for help on using the repository browser.