kalipso/racalmas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

replace fileUploader with own implementation

Browse Source
This commit is contained in:
Milan
2018-12-14 21:12:49 +01:00
parent add6c2ab1f
commit 101c192bd3
7 changed files with 121 additions and 459 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
website/agenda/planung/imageUpload.cgi
View File

@@ -21,6 +21,7 @@ use uac();
use studios();
use template();
use images();
use localization();
binmode STDOUT, ":utf8";
@@ -121,8 +122,9 @@ if ( $error ne '' ) {
$params = update_database( $config, $params, $file_info, $user ) if $params->{error} eq '';
}
print STDERR "upload error: $params->{error}\n" if $params->{error} ne '';
print STDERR "upload error: $params->{error}\n" if $params->{error} ;
my $out = '';
$params->{loc} = localization::get( $config, { user => $params->{presets}->{user}, file => 'image' } );
template::process( $config, 'print', $params->{template}, $params );
print $cgi->cgi_error() if ( defined $cgi ) && ( defined $cgi->cgi_error() );
@@ -133,26 +135,6 @@ $params->{filename} ||= '';
$params->{image_id} ||= '';
$params->{name} ||= '';
if ( $params->{error} eq '' ) {
print qq{
<div id="output">success</div>
<div id="message">
$params->{action_result}
{{thumbs//$params->{filename}}}
<button onclick="selectThisImage('$params->{filename}')">assign to event</button>
</div>
<div id="upload_image_id">$params->{image_id}</div>
<div id="upload_image_filename">$params->{filename}</div>
<div id="upload_image_title">$params->{name}</div>
<div id="upload_image_link">{{thumbs//$params->{filename}}}</div>
};
} else {
print qq{
<div id="output">failed</div>
<div id="message">$params->{error}</div>
};
}
sub upload_file {
my $config = shift;
@@ -388,6 +370,14 @@ sub check_params {
$checked->{$attr} = $params->{$attr};
}
}
#checkboxes
for my $param ('public') {
if ( ( defined $params->{$param} ) && ( $params->{$param} =~ /([01])/ ) ) {
$checked->{$param} = $1;
}
}
return $checked;
}

237
website/agenda/planung/js/fileUploader.js
View File

@@ -1,237 +0,0 @@
/*
* Class: fileUploader
* Use: Upload multiple files the jQuery way
* Author: John Lanz (http://pixelcone.com)
* Version: 1.0
*/
(function($) {
$.fileUploader = {version: '1.1'};
$.fn.fileUploader = function(config){
config = $.extend({}, {
limit: '1',
imageLoader: '',
buttonUpload: '#pxUpload',
buttonClear: '#pxClear',
successOutput: 'File Uploaded',
errorOutput: 'Failed',
inputName: 'image',
inputSize: 30,
allowedExtension: 'jpg|jpeg|gif|png',
callback: function() {},
url: window.location.href
}, config);
var itr = 0; //number of files to uploaded
var $limit = 1;
//public function
$.fileUploader.change = function(e){
var fname = px.validateFile( $(e).val() );
if (fname == -1){
alert ("Invalid file!");
$(e).val("");
return false;
}
$('#px_button input').removeAttr("disabled");
var imageLoader = '';
if ($.trim(config.imageLoader) != ''){
imageLoader = '<img src="'+ config.imageLoader +'" alt="uploader" />';
}
var display = '<div class="uploadData" id="pxupload'+ itr +'_text" title="pxupload'+ itr +'">' +
'<div class="close">&nbsp;</div>' +
'<span class="fname">'+ fname +'</span>' +
'<span class="loader" style="display:none">'+ imageLoader +'</span>' +
'<div class="status"></div>'+
'</div>';
$("#px_display").append(display);
if (config.limit == '' || $limit < config.limit) {
px.appendForm();
}
$limit++;
$(e).hide();
//px.upload();
}
// To exactly match $("a.foo").live("click", fn), for example, you can write $(document).on("click", "a.foo", fn).
// $(".close").live("click", function(){
$(document).on("click", ".close", function(){
$limit--;
if ($limit == config.limit) {
px.appendForm();
}
var id = "#" + $(this).parent().attr("title");
$(id+"_frame").remove();
$(id).remove();
$(id+"_text").fadeOut("slow",function(){
$(this).remove();
});
return false;
});
//$(config.buttonClear).click(function(){
$(document).on("click", "config.buttonClear", function(){
$("#px_display").fadeOut("slow",function(){
$("#px_display").html("");
$("#pxupload_form").html("");
itr = 0;
$limit = 1;
px.appendForm();
$('#px_button input').attr("disabled","disabled");
$(this).show();
});
});
//private function
var px = {
init: function(e){
var form = $(e).parents('form');
px.formAction = $(form).attr('action');
$(form).before(' \
<div id="pxupload_form"></div> \
<div id="px_display"></div> \
<div id="px_button"></div> \
');
$(config.buttonUpload+','+config.buttonClear).appendTo('#px_button');
if ( $(e).attr('name') != '' ){
config.inputName = $(e).attr('name');
}
if ( $(e).attr('size') != '' ){
config.inputSize = $(e).attr('size');
}
$(form).hide();
$(config.buttonUpload).click(function(){
px.upload()
})
this.appendForm();
},
appendForm: function(){
itr++;
var formId = "pxupload" + itr;
var iframeId = "pxupload" + itr + "_frame";
var inputId = "pxupload" + itr + "_input";
var contents = ''
contents += '<form method="post" id="'+ formId +'" action="'+ px.formAction +'" enctype="multipart/form-data" target="'+ iframeId +'">'
if (studio_id != null) contents+='<input type="hidden" name="studio_id" value="'+studio_id+'">';
if (project_id != null) contents+='<input type="hidden" name="project_id" value="'+project_id+'">';
contents += '<label>'+loc['label_name']+'</label><br>'
contents += '<input name="name" /><br />'
contents += '<label>'+loc['label_description']+'</label><br>'
contents += '<textarea name="description" rows="3" cols="40"></textarea><br />'
contents += '<label>'+loc['label_author']+'/'+loc['label_licence']+'</label><br>'
contents += '<input name="licence" /><br />'
contents += '<label>'+loc['label_public']+'</label><br>'
contents += '<input type="checkbox" name="public"><br />'
contents += '<label>'+loc['label_file']+'</label><br>'
contents += '<input type="file" name="'+ config.inputName +'" id="'+ inputId +'" class="pxupload" size="'+ config.inputSize +'" onchange="$.fileUploader.change(this);" />'
contents += '<input name="action" value="upload" type="hidden"/>'
contents += '</form>'
contents += '<iframe id="'+ iframeId +'" name="'+ iframeId +'" src="about:blank" style="display:none"></iframe>';
$("#pxupload_form").append( contents );
},
validateFile: function(file) {
if (file.indexOf('/') > -1){
file = file.substring(file.lastIndexOf('/') + 1);
}else if (file.indexOf('\\') > -1){
file = file.substring(file.lastIndexOf('\\') + 1);
}
//var extensions = /(.jpg|.jpeg|.gif|.png)$/i;
var extensions = new RegExp(config.allowedExtension + '$', 'i');
if (extensions.test(file)){
return file;
} else {
return -1;
}
},
upload: function(){
if (itr > 0){
$('#px_button input').attr("disabled","disabled");
$("#pxupload_form form").each(function(){
e = $(this);
var id = "#" + $(e).attr("id");
var input_id = id + "_input";
var input_val = $(input_id).val();
if (input_val != ""){
$(id + "_text .status").text("Uploading...");
$(id + "_text").css("background-color", "#FFF0E1");
$(id + "_text .loader").show();
$(id + "_text .close").hide();
$(id).submit();
$(id +"_frame").load(function(){
$(id + "_text .loader").hide();
up_output = $(this).contents().find("#output").html();
var success=0;
if (up_output == "success"){
success=1;
$(id + "_text").css("background-color", "#F0F8FF");
up_output = config.successOutput;
px.redirect();
}else{
$(id + "_text").css("background-color", "#FF0000");
up_output = config.errorOutput;
}
//custom code
up_output += '<br />' + $(this).contents().find("#message").html();
//alert($(this).contents())
//console.log(JSON.stringify($(this).contents()));
$(id + "_text .status").html(up_output);
if(success==1){
var image_id=$(this).contents().find("#upload_image_id").html();
var filename=$(this).contents().find("#upload_image_filename").html();
var title =$(this).contents().find("#upload_image_title").html();
var quote="'";
//remove existing image from list
$('#imageList div.images #img_'+image_id).remove();
//add image to list
$('#imageList div.images').prepend(
'<div id="img_'+image_id+'" class="image" '
+' onclick="imageAction('+quote+filename+quote+');return false;" '
+' title="'+title+'" '
+' style="background-image:url('+quote+'/agenda_files/media/thumbs/'+filename+quote+')"'
+'>'
+' <div class="label">'+title+'</div>'
+'</div>'
);
}
//end of custom code
$(e).remove();
$(config.buttonClear).removeAttr("disabled");
config.callback($(this));
});
}
});
}
},
redirect: function(){
//window.location.replace(config.url)
//$('#pxupload_form').append('<form id="redirect" method="GET" action="'+config.url+'" />');
//$('#redirect').submit();
}
}
px.init(this);
return this;
}
})(jQuery);

111
website/agenda/planung/js/image.js
View File

@@ -202,102 +202,27 @@ function assignImage(filename, target, project_id, studio_id, series_id, event_i
$(document).ready(
function(){
$('div.images').on( 'click', 'div.image', function(){
var elem = $(this);
console.log(elem)
var filename = elem.attr("filename");
elem = elem.parent();
console.log(elem)
var target = elem.attr("target");
var projectId = elem.attr("projectId");
var studioId = elem.attr("studioId");
var seriesId = elem.attr("seriesId");
var eventId = elem.attr("eventId");
var pid = elem.attr("pid");
updateImageEditor($(this), filename, target, projectId, studioId, seriesId, eventId, pid);
return false;
});
if ( window.location.href.indexOf("&filename=") > 0)
setActiveImage();
}
);
/*
function hideContent(){
$('.editor').hide();
$(window).resize(function () {
$('.ui-dialog').css({
'width': $(window).width() - windowOffsetX,
'height': $(window).height() - windowOffsetY,
'position': 'absolute',
'left': 0,
'top': 0,
modal: true
});
var imagesPos= $('div.images').position();
var height = ( $(window).height() - imagesPos.top );
if(height<64) height = 64;
console.log("windowHeight="+$(window).height()+" div.images.pos.top="+imagesPos.top)
$('div.images').css("height", height +"px");
}).resize();
return false;
}
function showContent(){
$('.editor').show();
$('#selectImage').remove();
return false;
}
//select image load into selectImage box
function selectImageOld(project_id, studio_id, imageId, searchValue, imageUrl, series_id){
selectImageId = imageId;
searchValue = searchValue.replace(/[^a-zA-Z0-9]/g,'%');
var url="image.cgi?search="+encodeURIComponent(searchValue)+'&project_id='+project_id+'&studio_id='+studio_id;
if( (series_id!=null) && (series_id != '') ){
url+='&series_id='+series_id;
}
if(imageUrl!=null){
var filename=imageUrl.split('%2F').pop();
url+='&filename='+filename;
}
var x = $(window).width() - windowOffsetX;
var y = $(window).height() - windowOffsetY;
console.log("selectImage(), load url="+url);
$('#selectImage').remove();
$('body').append('<div id="selectImage"></div>');
$('#selectImage').load(
url,
function(){
hideContent();
$('#selectImage').dialog({
appendTo: "#content",
title: "select image",
top: 0,
left: 0,
width: x,
height: y,
close: function( event, ui ) {
showContent();
$('#selectImage').remove();
}
});
updateImageEditor(filename);
}
);
return false;
}
// set editor image and image url to selected image
function selectThisImage(filename){
$('#'+selectImageId).val(filename);
var url = 'showImage.cgi?project_id='+project_id+'&studio_id='+studio_id+'&filename=' + filename;
console.log("select image "+url);
$('#imagePreview').prop('src',url);
showContent();
return false;
}
*/

104
website/agenda/planung/js/image_upload.js
View File

@@ -1,67 +1,55 @@
// init upload
function initUploadDialog(){
//console.log("init upload dialog")
if(!$('#uploader').hasClass("init")){
$('#uploader').fileUploader();
$('#uploader').addClass("init");
//remove multiple buttons
var c=0;
$('#img_upload #px_button').each(
function(){
if (c>0){
$(this).remove();
}
c++;
}
);
}
return false;
var url='imageUpload.cgi?project_id='+ getProjectId()+"&studio_id="+getStudioId();
updateContainer("image-tabs-upload", url);
}
// prepare for new init
function closeImageUpload(){
$('#uploader').removeClass("init");
$('#pxupload_form').remove();
$('#pxupload1_frame').remove();
$('#px_display').remove();
}
function uploadImage(){
console.log("upload")
var form=$("#img_upload");
var fd = new FormData(form[0]);
var rq = $.ajax({
url: 'imageUpload.cgi',
type: 'POST',
data: fd,
cache: false,
contentType: false,
processData: false
});
rq.done( function(data){
$("#image-tabs-upload").html(data);
function insertPicture(name, description, filename) {
try {
markup='{{ thumbs//'+filename;
if (description !=''){
markup+=' | '+description;
}else{
if (name !='') markup+=' | '+name
}
markup+=' }}'
markup+="\n"
parent.$.markItUp( { replaceWith:markup } );
parent.$('#images').dialog("close");
} catch(e) {
alert("No markItUp! Editor found");
}
}
var image_id = $("#upload_image_id").html();
var filename = $("#upload_image_filename").html();
var title = $("#upload_image_title").html();
var quote = "'";
//remove existing image from list
$('#imageList div.images #img_'+image_id).remove();
function image_upload_dialog(){
$('#img_upload').dialog({
title:"image upload",
width:600,
height:320
});
return false;
}
var url='showImage.cgi?project_id='+getProjectId()+'&studioId='+getStudioId()+'&type=icon&filename='+filename;
function image_upload_callback(result){
result.contents().find("#message").html();
var output = '<br />' + $(this).contents().find("#message").html();
$(id + "_text .status").html(output);
}
var html = '<div';
html += ' id="img_' + image_id + '"';
html += ' class="image" ';
html += ' title="' + title + '" ';
html += ' style="background-image:url(' + url + ')"';
html += ' filename="' + filename + '"';
html += '>';
html += ' <div class="label">'+title+'</div>';
html += '</div>';
$(document).ready(
function() {
//$('#uploader').fileUploader();
}
)
//add image to list
$('#imageList div.images').prepend(html);
console.log("done")
return false;
});
rq.fail( function(){
console.log("Fail")
});
return false;
};

29
website/agenda/planung/templates/image.html
View File

@@ -1,8 +1,5 @@
<link type="text/css" href="css/image_manager.css" rel="stylesheet"/>
<link type="text/css" href="css/fileUploader.css" rel="stylesheet"/>
<script src="js/fileUploader.js" type="text/javascript"></script>
<script src="js/image.js" type="text/javascript"></script>
<TMPL_IF .allow.create_image>
<script src="js/image_upload.js" type="text/javascript"></script>
@@ -31,8 +28,6 @@
}
</TMPL_IF>
// show images by default
closeImageUpload();
$('#imageList').show();
}
});
@@ -68,15 +63,6 @@
<!-- upload images -->
<TMPL_IF .allow.create_image>
<div id="image-tabs-upload">
<div id="img_upload">
<div id="img_upload_result"></div>
<form id="image_upload" method="post" action="imageUpload.cgi" enctype="multipart/form-data">
<input type="hidden" name="project_id" value="<TMPL_VAR .project_id>">
<input type="hidden" name="studio_id" value="<TMPL_VAR .studio_id>">
<input id="uploader" type="file" name="image" value="<TMPL_VAR image escape=0>" accept="text/*" maxlength="1000000" size="10"/> </td>
<button type="submit" name="action" value="upload" id="pxUpload" ><TMPL_VAR .loc.button_upload></button>
</form>
</div>
</div>
</TMPL_IF>
</div>
@@ -96,13 +82,21 @@
<div style="clear:both;display: flex; flex-direction: row;">
<div class="images" style="overflow-y:scroll">
<div class="images"
style="overflow-y:scroll"
target="<TMPL_VAR .target>"
projectId="<TMPL_VAR .project_id>"
studioId="<TMPL_VAR .studio_id>"
seriesId="<TMPL_VAR .series_id>"
eventId="<TMPL_VAR .event_id>"
pid="<TMPL_VAR .pid>"
>
<TMPL_LOOP images>
<div class="image"
id="img_<TMPL_VAR id>"
style="background-image:url('showImage.cgi?project_id=<TMPL_VAR project_id>&studioId=<TMPL_VAR .studio_id>&type=icon&filename=<TMPL_VAR filename>')"
title="<TMPL_VAR description>"
onclick="updateImageEditor(this, '<TMPL_VAR filename>', '<TMPL_VAR .target>', '<TMPL_VAR .project_id>', '<TMPL_VAR .studio_id>', '<TMPL_VAR .series_id>', '<TMPL_VAR .event_id>', '<TMPL_VAR .pid>'); return false;"
filename="<TMPL_VAR filename>"
>
<div class="label"><TMPL_VAR name></div>
</div>
@@ -117,7 +111,8 @@
</TMPL_IF>
</main>
</center>
</body>
</html>

65
website/agenda/planung/templates/imageUpload.html
View File

@@ -1,30 +1,42 @@
<div>
<form name="img_upload" id="img_upload" method="post" action="imageUpload.cgi" enctype="multipart/form-data">
<TMPL_IF action>
<TMPL_IF error>
<div class="error">failed</div>
<div id="message"><TMPL_VAR error></div>
<TMPL_ELSE>
<div class="ok">success</div>
<div style="display:none">
<div id="upload_image_id"><TMPL_VAR image_id></div>
<div id="upload_image_filename"><TMPL_VAR filename></div>
<div id="upload_image_title"><TMPL_VAR title></div>
<div id="upload_image_link">{{thumbs//<TMPL_VAR filename>}}</div>
</div>
</TMPL_IF>
</TMPL_IF>
<form name="img_upload" id="img_upload" method="POST" action="imageUpload.cgi" enctype="multipart/form-data">
<input type="hidden" name="project_id" value="<TMPL_VAR .project_id>">
<input type="hidden" name="studio_id" value="<TMPL_VAR .studio_id>">
<input type="hidden" name="action" value="upload">
<table>
<tr>
<td>
<TMPL_IF filename>
<a href="<TMPL_VAR local_media_url>images/<TMPL_VAR filename escape=0>" >
<img src="<TMPL_VAR local_media_url>thumbs/<TMPL_VAR filename escape=0>" />
<img src="<TMPL_VAR local_media_url>icons/<TMPL_VAR filename escape=0>" />
</a>
<div class="image" style="background-image:url('showImage.cgi?project_id=<TMPL_VAR .project_id>&studioId=<TMPL_VAR .studio_id>&type=icon&filename=<TMPL_VAR filename>')" >
</div>
</TMPL_IF>
</td>
<td>
<TMPL_IF filename>
<input value="{{thumbs/<TMPL_VAR filename escape=0>|<TMPL_VAR name escape=0>}}" size="40" />
<input value="{{thumbs/<TMPL_VAR filename escape=0>|<TMPL_VAR name escape=0>}}" size="50" />
</TMPL_IF>
</td>
</tr>
<tr>
<td>Datei</td>
<td><input type="file" name="image" accept="image/*" maxlength="2000000" size="10"/> </td>
</tr>
<tr>
<td>Name: </td>
<td><input value="<TMPL_VAR name escape=0>" name="name" size="40" maxlength="100"> </td>
<td><input value="<TMPL_VAR name escape=0>" name="name" size="40" maxlength="100" required> </td>
</tr>
<tr>
<td>Beschreibung: </td>
@@ -32,15 +44,20 @@
</tr>
<tr>
<td><label><TMPL_VAR .loc.label_author>/<TMPL_VAR .loc.label_licence></label></td>
<td><input name="licence" value="<TMPL_VAR licence>" placeholder="<TMPL_VAR .loc.label_licence_missing>"/></td>
<td><input name="licence" value="<TMPL_VAR licence>" placeholder="<TMPL_VAR .loc.label_licence_missing>" required /></td>
</tr>
<tr>
<td><label><TMPL_VAR .loc.label_public></label></td>
<td><input type="checkbox" name="public"/></td>
<td><input type="checkbox" name="public" <TMPL_IF public>checked="checked" value="1"<TMPL_ELSE>value="0"</TMPL_IF> /></td>
</tr>
<tr>
<td>Datei</td>
<td><input type="file" name="image" accept="image/*" maxlength="2000000" size="10" required/> </td>
</tr>
<tr>
<td colspan="2" style="text-align:right">
<input type="submit" name="action" value="Hochladen!" />
<td></td>
<td>
<button onclick="uploadImage();return false">Hochladen</button>
</td>
</tr>
</table>
@@ -49,21 +66,3 @@
</body>
</html>
<TMPL_IF action>
<TMPL_IF error>
<div id="output">failed</div>
<div id="message"><TMPL_VAR error></div>
<TMPL_ELSE>
<div id="output">success</div>
<div id="message">
<TMPL_VAR action_result>
{{thumbs//<TMPL_VAR filename>}}
<button onclick="selectThisImage('<TMPL_VAR filename>')">assign to event</button>
</div>
<div id="upload_image_id"><TMPL_VAR image_id></div>
<div id="upload_image_filename"><TMPL_VAR filename></div>
<div id="upload_image_title"><TMPL_VAR title></div>
<div id="upload_image_link">{{thumbs//<TMPL_VAR filename>}}</div>
</TMPL_IF>
</TMPL_IF>

2
website/agenda/planung/templates/image_edit.html
View File

@@ -1,5 +1,7 @@
<!--
<link type="text/css" href="css/admin.css" rel="stylesheet"/>
<link type="text/css" href="css/image_manager.css" rel="stylesheet"/>
-->
<script>
function updateCheckBox(selector, value){