Media upload form rewrite.

This version no longer requires a hidden form template in the DOM,
which makes the logic for cloning the upload form a bit easier to
understand and avoids an initial clone to put the initial upload
for into the DOM.
This commit is contained in:
Matthias Mees 2013-06-21 18:23:19 +02:00
parent 01a93d5488
commit f572ff84ea
2 changed files with 28 additions and 35 deletions

View File

@ -11,35 +11,32 @@
<input name="serendipity[adminAction]" type="hidden" value="add">
{$media.form_hidden}
<div id="upload_template" class="hidden">
<div class="form_field clearfix">
<label for="userfile_1" class="uploadform_userfile_label">{$CONST.ENTER_MEDIA_UPLOAD}</label>
<input id="userfile_1" class="uploadform_userfile check_input" name="serendipity[userfile][1]" type="file">
</div>
<div id="uploads">
<div id="upload_form_1">
<div class="form_field clearfix">
<label for="userfile_1" class="uploadform_userfile_label">{$CONST.ENTER_MEDIA_UPLOAD}</label>
<input id="userfile_1" class="uploadform_userfile check_input" name="serendipity[userfile][1]" type="file">
</div>
<div class="form_field clearfix">
<label for="target_filename_1" class="uploadform_target_filename_label">{$CONST.SAVE_FILE_AS} <span class="input-desc image-upload">{$CONST.PLAIN_ASCII_NAMES}</span></label>
<input id="target_filename_1" class="uploadform_target_filename" name="serendipity[target_filename][1]" type="text" value="">
</div>
<div class="form_field clearfix">
<label for="target_filename_1" class="uploadform_target_filename_label">{$CONST.SAVE_FILE_AS} <span class="input-desc image-upload">{$CONST.PLAIN_ASCII_NAMES}</span></label>
<input id="target_filename_1" class="uploadform_target_filename" name="serendipity[target_filename][1]" type="text" value="">
</div>
<div class="form_select clearfix">
<label for="target_directory_1" class="uploadform_target_directory_label">{$CONST.STORE_IN_DIRECTORY}</label>
<select id="target_directory_1" class="uploadform_target_directory" name="serendipity[target_directory][1]">
<option value="">{$CONST.BASE_DIRECTORY}</option>
{foreach from=$media.folders item="folder"}
<option{if $media.only_path == $folder.relpath} selected{/if} value="{$folder.relpath}">{'&nbsp;'|@str_repeat:($folder.depth*2)} {$folder.name}</option>
{/foreach}
</select>
</div>
<div class="form_select clearfix">
<label for="target_directory_1" class="uploadform_target_directory_label">{$CONST.STORE_IN_DIRECTORY}</label>
<select id="target_directory_1" class="uploadform_target_directory" name="serendipity[target_directory][1]">
<option value="">{$CONST.BASE_DIRECTORY}</option>
{foreach from=$media.folders item="folder"}
<option{if $media.only_path == $folder.relpath} selected{/if} value="{$folder.relpath}">{'&nbsp;'|@str_repeat:($folder.depth*2)} {$folder.name}</option>
{/foreach}
</select>
</div>
<div id="ccounter"><input id="column_count_1" class="uploadform_column_count" type="hidden" name="serendipity[column_count][1]" value="true"></div>
<div id="ccounter"><input id="column_count_1" class="uploadform_column_count" type="hidden" name="serendipity[column_count][1]" value="true"></div>
</div>
</div>
<div id="debug"></div>
{* Placeholder for upload form, gets duplicated if users uploads multiple files *}
<span id="upload_form"></span>
{serendipity_hookPlugin hook="backend_image_addform" hookAll=true}
<div class="form_buttons">
<input id="all_authors" name="serendipity[all_authors]" type="hidden" value="true" checked="checked">

View File

@ -458,6 +458,8 @@ function getfilename(value) {
var inputStorage = new Array();
function checkInputs() {
upload_fieldcount = $('.uploadform_userfile').length;
for (i = 1; i <= upload_fieldcount; i++) {
if (!inputStorage[i]) {
fillInput(i, i);
@ -491,9 +493,8 @@ function rememberUploadOptions() {
function addUploadField() {
upload_fieldcount = $('.uploadform_userfile').length + 1;
var $fields = $('#upload_template').clone(true);
var $fields = $('#uploads > div:last-child').clone(true);
$fields.attr('id', 'upload_form_' + upload_fieldcount);
$fields.removeClass('hidden');
var userfile = $('.uploadform_userfile', $fields);
var userfile_label = $('.uploadform_userfile_label', $fields);
@ -508,15 +509,16 @@ function addUploadField() {
targetfilename.attr('id', 'target_filename_' + upload_fieldcount);
targetfilename.attr('name', 'serendipity[target_filename][' + upload_fieldcount + ']');
targetfilename.val('');
targetfilename_label.attr('for', 'target_filename_' + upload_fieldcount);
targetdir.attr('id', 'target_directory_' + upload_fieldcount);
targetdir.attr('name', 'serendipity[target_directory][' + upload_fieldcount + ']');
// This looks weird, but works. If anyone can improve this, by all means do so.
targetdir.val($($('#target_directory_' + (upload_fieldcount - 1))).val());
targetdir_label.attr('for', 'target_directory_' + upload_fieldcount);
$fields.insertBefore('#upload_form');
// This looks weird, but works. If anyone can improve this, by all means do so.
$('#' + targetdir.attr('id')).val($($('#target_directory_' + (upload_fieldcount - 1))).val());
$fields.appendTo('#uploads');
}
// Inverts a selection of checkboxes
@ -828,12 +830,6 @@ function highlightComment(id, checkvalue) {
});
// Add media db upload field
var $uploadForm = $('body').has('#uploadform');
if($uploadForm.size() > 0) {
addUploadField();
}
$('#add_upload').click(function(e) {
e.preventDefault();
addUploadField();