<table border="0" width="100%">
<tr>
<td>
<table width="100%">
<tr>
<td>
<form action="" method="post" name="eprooform" enctype="multipart/form-data">
<table class="tableborder" border="0" cellpadding="3" cellspacing="3" width="100%">
<tr>
<td colspan="4">[ERROR]</td>
</tr>
<tr id="trdropfiles">
<td colspan="4">
<div id="drop-files" ondragover="return false">
{|Dateien hier einfügen|}
</div>
</td>
</tr>
<tr id="trdatei" class="stddownload">
<td nowrap>{|Datei|}:</td>
<td colspan="3"><input type="file" name="upload" style="min-width: 230px;max-width:250px;"></td>
</tr>
[STARTDISABLE]
<tr class="stddownload">
<td>{|Titel|}:</td>
<td colspan="3"><input type="text" style="width: 230px;" name="titel" value="[TITEL]"></td>
</tr>
<tr class="stddownload">
<td nowrap>{|Beschreibung|}:</td>
<td colspan="3"><textarea style="width: 230px;height: 100px;" name="beschreibung">[BESCHREIBUNG]</textarea></td>
</tr>
<tr valign="middle" class="stddownload">
<td nowrap>{|Stichwort|}:</td>
<td colspan="3">
<table>
<tr>
<td><select id="stichwort" name="stichwort">
[EXTRASTICHWOERTER]
</select></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr><td><br><br></td><td></td><td></td><td></td></tr>
[ENDEDISABLE]
<!--
<tr><td>ISO9001:</td><td colspan="3"> <select name="gruppe">
<option>keine</option>
<option>100 Organigramme</option>
<option>105 Pläne</option>
<option>110 Festlegungen</option>
<option>115 Protokolle</option>
<option>125 Stellenbeschreibung</option>
<option>610 Schaltpläne</option>
<option>611 BOM</option>
</select></td></tr>
-->
<!--
<tr><td>Dokumentenummer:</td><td colspan="3">
<table>
<tr><td>Gruppe</td><td><b>L</b>aufindex</td><td><b>V</b>ersion</td></tr>
<tr valign="top"><td>
<select name="gruppe">
<option>keine</option>
<option>100 Organigramme</option>
<option>105 Pläne</option>
<option>110 Festlegungen</option>
<option>115 Protokolle</option>
<option>125 Stellenbeschreibung</option>
<option>610 Schaltpläne</option>
<option>611 BOM</option>
</select></td><td>
<input type="text" size="10" name="nummer" value="[NUMMER]"><br>
<input type="checkbox" name="automatisch">L + V automatisch
</td><td>
<select name="version"><option value=""></option><option value="A">A</option><option value="B">B</option></select></td></tr></table>
</td></tr>
-->
<tr valign="" height="" bgcolor="" align="" bordercolor="" class="klein" classname="klein">
<td width="" valign="" height="" bgcolor="" align="right" colspan="4" bordercolor="" classname="orange2" class="orange2">
<input type="submit" name="speichern"
value="{|Speichern|}" /> <input type="button" onclick="window.parent.$('#dateipopupiframediv').dialog('close');" value="{|Abbrechen|}" /></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div id="dropped-files">
<div id="upload-button">
<a href="#" class="upload">Upload!</a>
<a href="#" class="delete">delete</a>
<span>0 Files</span>
</div>
</div>
<div id="extra-files">
<div class="number">
0
</div>
<div id="file-list">
<ul></ul>
</div>
</div>
<div id="loading">
<div id="loading-bar">
<div class="loading-color"> </div>
</div>
<div id="loading-content">Uploading file.jpg</div>
</div>
<div id="file-name-holder">
<ul id="uploaded-files">
<h1>{|Hochgeladene Dateien|}</h1>
</ul>
</div>
<style>
#drop-files {
width: 100%;
height: 100px;
background: rgba(0,0,0,0.1);
border: 4px dashed rgba(0,0,0,0.2);
padding: 40px 0 0 0;
text-align: center;
font-size: 2em;
float: left;
font-weight: bold;
margin: 0 20px 20px 0;
}
#dropped-files {
float: left;
position: relative;
width: 360px;
height: 100px;
}
#upload-button {
position: absolute;
top: 87px;
z-index: 9999;
width: 210px;
display: none;
}
#dropped-files .image {
height: 0px;
width:0px;
border: 4px solid #fff;
position: absolute;
overflow: hidden;
}
#upload-button a:hover {
box-shadow: 0 0 500px 62px rgba(255, 255, 255, 1), inset 0 -5px 40px 0px #0A9FCA;
}
#extra-files {
display: none;
float: left;
position: relative;
}
#extra-files #file-list:after, #extra-files #file-list:before {
position: absolute;
content: " ";
top: -40px;
left: 40px;
display: block;
border: 20px solid;
border-color: transparent transparent #ffffff transparent;
}
#loading {
display: none;
float: left;
width: 100%;
position: relative;
}
</style>
<script>
$(document).ready(function() {
$('#editdatei').dialog(
{
modal: true,
autoOpen: false,
minWidth: 940,
title:'Dateitexte bearbeiten',
buttons: {
'{|ABBRECHEN|}': function() {
$(this).dialog('close');
},
'{|SPEICHERN|}': function()
{
$.ajax({
url: 'index.php?module=ajax&action=editdateititel',
type: 'POST',
dataType: 'json',
data: { id: $('#editid').val(),subjekt:$('#editsubjekt').val(), typ:$('#edittyp').val(),titel:$('#edittitel').val(), beschreibung:$('#editbeschreibung').val(), parameter:[ID]},
success: function(data) {
var nul = 0;
var urla = window.location.href.split('#');
window.location.href=urla[nul];
},
beforeSend: function() {
}
});
}
},
close: function(event, ui){
}
});
// Makes sure the dataTransfer information is sent when we
// Drop the item in the drop box.
jQuery.event.props.push('dataTransfer');
var z = -40;
// The number of images to display
var maxFiles = 5;
var errMessage = 0;
// Get all of the data URIs and put them in an array
var dataArray = [];
// Bind the drop event to the dropzone.
$('#drop-files').bind('drop', function(e) {
// Stop the default action, which is to redirect the page
// To the dropped file
var files = e.dataTransfer.files;
$.each(files, function(index, file) {
var isimg = false;
if (files[index].type.match('image.*')) {
isimg = true;
}
var fileReader = new FileReader();
// When the filereader loads initiate a function
fileReader.onload = (function(file) {
//alert('x');
return function(e) {
// Push the data URI into an array
dataArray.push({name : file.name, value : this.result});
// Move each image 40 more pixels across
z = z+40;
// Just some grammatical adjustments
if(dataArray.length == 1) {
$('#upload-button span').html("1 file to be uploaded");
} else {
$('#upload-button span').html(dataArray.length+" files to be uploaded");
}
// Place extra files in a list
var vorschau = '';
var image = this.result;
if(isimg) {
// Place the image inside the dropzone
//$('#dropped-files').append('<div class="image" style="left: '+z+'px; background: url('+image+'); background-size: cover;"> </div>');
vorschau = '<span class="image" style="float:right;padding:0;margin:0;height:40px;width:40px;display:inline-block;position:relative;max-width:40px;max-height:40px; background: url('+image+'); background-size: cover;"></span>';
}
else {
vorschau = '';
//$('#extra-files .number').html('+'+($('#file-list li').length + 1));
// Show the extra files dialogue
//$('#extra-files').show();
// Start adding the file name to the file list
//$('#extra-files #file-list ul').append('<li>'+file.name+'</li>');
}
$('.stddownload').hide();
var filenameEncoded = encodeHtmlAttrValue(file.name);
$('#trdatei').before('<tr><td>Datei '+vorschau+'</td><td class="tddateiname"><input type="hidden" name="dateiv[]" value="'+image+'" /><input type="hidden" name="dateiname[]" value="'+filenameEncoded+'" />'+filenameEncoded+'</td><td>Titel: <input type="text" name="dateititel[]" /></td><td><select name="dateistichwort[]">'+$('#stichwort').html()+'</select></td></tr>')
};
})(files[index]);
fileReader.readAsDataURL(file);
});
});
function encodeHtmlAttrValue(value) {
return value
.replace(/&/g, '&')
.replace(/'/g, ''')
.replace(/"/g, '"')
.replace(/</g, '<')
.replace(/>/g, '>');
}
function restartFiles() {
// This is to set the loading bar back to its default state
$('#loading-bar .loading-color').css({'width' : '0%'});
$('#loading').css({'display' : 'none'});
$('#loading-content').html(' ');
// --------------------------------------------------------
// We need to remove all the images and li elements as
// appropriate. We'll also make the upload button disappear
$('#upload-button').hide();
$('#dropped-files > .image').remove();
$('#extra-files #file-list li').remove();
$('#extra-files').hide();
$('#uploaded-holder').hide();
// And finally, empty the array/set z to -40
dataArray.length = 0;
z = -40;
return false;
}
$('#upload-button .upload').click(function() {
$("#loading").show();
var totalPercent = 100 / dataArray.length;
var x = 0;
var y = 0;
$('#loading-content').html('Uploading '+dataArray[nu].name);
$.each(dataArray, function(index, file) {
var nu = 0;
var ein = 1;
alert(dataArray[index].name);
$.post('upload.php', dataArray[index], function(data) {
var fileName = dataArray[index].name;
++x;
// Change the bar to represent how much has loaded
$('#loading-bar .loading-color').css({'width' : totalPercent*(x)+'%'});
if(totalPercent*(x) == 100) {
// Show the upload is complete
$('#loading-content').html('Uploading Complete!');
// Reset everything when the loading is completed
setTimeout(restartFiles, 500);
} else if(totalPercent*(x) < 100) {
// Show that the files are uploading
$('#loading-content').html('Uploading '+fileName);
}
// Show a message showing the file URL.
var dataSplit = data.split(':');
if(dataSplit[ein] == 'uploaded successfully') {
var realData = '<li><a href="images/'+dataSplit[nu]+'">'+fileName+'</a> '+dataSplit[ein]+'</li>';
$('#uploaded-files').append('<li><a href="images/'+dataSplit[nu]+'">'+fileName+'</a> '+dataSplit[ein]+'</li>');
// Add things to local storage
if(window.localStorage.length == 0) {
y = 0;
} else {
y = window.localStorage.length;
}
window.localStorage.setItem(y, realData);
} else {
$('#uploaded-files').append('<li><a href="images/'+data+'. File Name: '+dataArray[index].name+'</li>');
}
});
});
return false;
});
// Just some styling for the drop file container.
$('#drop-files').bind('dragenter', function() {
$(this).css({'box-shadow' : 'inset 0px 0px 20px rgba(0, 0, 0, 0.1)', 'border' : '4px dashed #bb2b2b'});
return false;
});
$('#drop-files').bind('drop', function() {
$(this).css({'box-shadow' : 'none', 'border' : '4px dashed rgba(0,0,0,0.2)'});
return false;
});
// For the file list
$('#extra-files .number').toggle(function() {
$('#file-list').show();
}, function() {
$('#file-list').hide();
});
$('#dropped-files #upload-button .delete').click(restartFiles);
// Append the localstorage the the uploaded files section
if(window.localStorage.length > 0) {
$('#uploaded-files').hide();
for (var t = 0; t < window.localStorage.length; t++) {
var key = window.localStorage.key(t);
var value = window.localStorage[key];
// Append the list items
if(value != undefined || value != '') {
$('#uploaded-files').append(value);
}
}
} else {
$('#uploaded-files').hide();
}
});
function editdatei(datei, cmd)
{
$.ajax({
url: 'index.php?module=ajax&action=getdateititel',
type: 'POST',
dataType: 'json',
data: { id: datei, typ:cmd,parameter:[ID]},
success: function(data) {
if(typeof data.id != 'undefined')
{
$('#editid').val(data.id);
$('#editsubjekt').html(data.subjekthtml);
$('#editsubjekt').val(data.subjekt);
$('#edittyp').val(cmd);
$('#edittitel').val(data.titel);
$('#editbeschreibung').val(data.beschreibung);
$('#editdatei').dialog('open');
}
},
beforeSend: function() {
}
});
}
</script>
<div id="editdatei" style="display:none;">
<fieldset>
<table>
<tr>
<td><input type="hidden" id="edittyp" value="" /><input type="hidden" id="editid" value="" />{|Titel|}:</td>
<td><input type="text" id="edittitel" size="50"></td>
</tr>
<tr>
<td>{|Beschreibung|}:</td>
<td><textarea id="editbeschreibung" cols="50"></textarea></td>
</tr>
<tr>
<td>{|Stichwort|}:</td>
<td><select id="editsubjekt"></select></td>
</tr>
</table>
</fieldset>
</div>