Les svg sont uploader via des input file
This commit is contained in:
parent
84790c924c
commit
7db5d212db
58
app.php
58
app.php
|
|
@ -42,6 +42,7 @@ $f3->route('GET /',
|
|||
function($f3) {
|
||||
$f3->set('key', hash('md5', uniqid().rand()));
|
||||
$f3->set('maxSize', min(array(convertPHPSizeToBytes(ini_get('post_max_size')), convertPHPSizeToBytes(ini_get('upload_max_filesize')))));
|
||||
$f3->set('maxPage', ini_get('max_file_uploads') - 1);
|
||||
|
||||
echo View::instance()->render('index.html.php');
|
||||
}
|
||||
|
|
@ -49,6 +50,7 @@ $f3->route('GET /',
|
|||
$f3->route('GET /@key',
|
||||
function($f3) {
|
||||
$f3->set('key', $f3->get('PARAMS.key'));
|
||||
$f3->set('maxPage', ini_get('max_file_uploads') - 1);
|
||||
|
||||
echo View::instance()->render('pdf.html.php');
|
||||
}
|
||||
|
|
@ -96,49 +98,51 @@ $f3->route('POST /image2svg',
|
|||
$f3->route('POST /sign',
|
||||
function($f3) {
|
||||
$filename = null;
|
||||
$tmpfile = tempnam($f3->get('UPLOADS'), 'pdfsignature_sign');
|
||||
unlink($tmpfile);
|
||||
$svgFiles = "";
|
||||
|
||||
|
||||
$files = Web::instance()->receive(function($file,$formFieldName){
|
||||
if(strpos(Web::instance()->mime($file['tmp_name'], true), 'application/pdf') !== 0) {
|
||||
return false;
|
||||
if($formFieldName == "pdf" && strpos(Web::instance()->mime($file['tmp_name'], true), 'application/pdf') !== 0) {
|
||||
$f3->error(403);
|
||||
}
|
||||
|
||||
if($formFieldName == "svg" && strpos(Web::instance()->mime($file['tmp_name'], true), 'image/svg+xml') !== 0) {
|
||||
$f3->error(403);
|
||||
}
|
||||
|
||||
return true;
|
||||
}, true, function($fileBaseName, $formFieldName) use ($f3, &$filename) {
|
||||
$filename = str_replace(".pdf", "_signe.pdf", $fileBaseName);
|
||||
$tmpfile = tempnam($f3->get('UPLOADS'), 'pdfsignature_pdf');
|
||||
unlink($tmpfile);
|
||||
return basename($tmpfile).".pdf";
|
||||
}, false, function($fileBaseName, $formFieldName) use ($f3, $tmpfile, &$filename, &$svgFiles) {
|
||||
if($formFieldName == "pdf") {
|
||||
$filename = str_replace(".pdf", "_signe.pdf", $fileBaseName);
|
||||
return basename($tmpfile).".pdf";
|
||||
}
|
||||
|
||||
if($formFieldName == "svg") {
|
||||
$svgFiles .= " ".$tmpfile."_".$fileBaseName;
|
||||
|
||||
return basename($tmpfile."_".$fileBaseName);
|
||||
}
|
||||
});
|
||||
|
||||
$pdfFile = null;
|
||||
foreach($files as $file => $valid) {
|
||||
if(!$valid) {
|
||||
continue;
|
||||
}
|
||||
$pdfFile = $file;
|
||||
}
|
||||
|
||||
if(!$pdfFile) {
|
||||
if(!is_file($tmpfile.".pdf")) {
|
||||
$f3->error(403);
|
||||
}
|
||||
|
||||
$svgData = $_POST['svg'];
|
||||
|
||||
$svgFiles = "";
|
||||
foreach($svgData as $index => $svgItem) {
|
||||
$svgFile = $pdfFile.'_'.$index.'.svg';
|
||||
file_put_contents($svgFile, $svgItem);
|
||||
$svgFiles .= $svgFile . " ";
|
||||
if(!$svgFiles) {
|
||||
$f3->error(403);
|
||||
}
|
||||
|
||||
shell_exec(sprintf("rsvg-convert -f pdf -o %s %s", $pdfFile.'.svg.pdf', $svgFiles));
|
||||
shell_exec(sprintf("pdftk %s multibackground %s output %s", $pdfFile.'.svg.pdf', $pdfFile, $pdfFile.'_signe.pdf'));
|
||||
shell_exec(sprintf("rsvg-convert -f pdf -o %s %s", $tmpfile.'.svg.pdf', $svgFiles));
|
||||
shell_exec(sprintf("pdftk %s multibackground %s output %s", $tmpfile.'.svg.pdf', $tmpfile.".pdf", $tmpfile.'_signe.pdf'));
|
||||
|
||||
Web::instance()->send($pdfFile.'_signe.pdf', null, 0, TRUE, $filename);
|
||||
Web::instance()->send($tmpfile.'_signe.pdf', null, 0, TRUE, $filename);
|
||||
|
||||
if($f3->get('DEBUG')) {
|
||||
return;
|
||||
}
|
||||
array_map('unlink', glob($pdfFile."*"));
|
||||
array_map('unlink', glob($tmpfile."*"));
|
||||
}
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -22,6 +22,12 @@ pdfjsLib.GlobalWorkerOptions.workerSrc = '/vendor/pdf.worker.js?legacy';
|
|||
var loadingTask = pdfjsLib.getDocument(url);
|
||||
loadingTask.promise.then(function(pdf) {
|
||||
|
||||
if(pdf.numPages > maxPage) {
|
||||
alert("Le PDF de doit pas dépasser "+maxPage+" pages");
|
||||
document.location = "/";
|
||||
return;
|
||||
}
|
||||
|
||||
var is_mobile = function() {
|
||||
return !(window.getComputedStyle(document.getElementById('is_mobile')).display === "none");
|
||||
}
|
||||
|
|
@ -340,7 +346,7 @@ loadingTask.promise.then(function(pdf) {
|
|||
textCanvas.height = fabricPath.getScaledHeight();
|
||||
var textCanvas = new fabric.Canvas(textCanvas);
|
||||
textCanvas.add(fabricPath).renderAll();
|
||||
svgItem.svg = "data:image/svg+xml;base64,"+btoa(textCanvas.toSVG());
|
||||
svgItem.svg = svgToDataUrl(textCanvas.toSVG());
|
||||
}
|
||||
if(document.getElementById('nav-import-tab').classList.contains('active')) {
|
||||
svgItem.svg = document.getElementById('img-upload').src;
|
||||
|
|
@ -366,6 +372,11 @@ loadingTask.promise.then(function(pdf) {
|
|||
return new Blob([u8arr], {type:mime});
|
||||
}
|
||||
|
||||
function svgToDataUrl(svg) {
|
||||
|
||||
return "data:image/svg+xml;base64,"+btoa(svg);
|
||||
}
|
||||
|
||||
function trimSvgWhitespace(svgContent) {
|
||||
if(!svgContent) {
|
||||
|
||||
|
|
@ -462,7 +473,7 @@ loadingTask.promise.then(function(pdf) {
|
|||
|
||||
xhr.open( 'POST', document.getElementById('form-image-upload').action, true );
|
||||
xhr.onreadystatechange = function () {
|
||||
var svgImage = "data:image/svg+xml;base64,"+btoa(trimSvgWhitespace(this.responseText));
|
||||
var svgImage = svgToDataUrl(trimSvgWhitespace(this.responseText));
|
||||
document.getElementById('img-upload').src = svgImage;
|
||||
document.getElementById('img-upload').classList.remove("d-none");
|
||||
document.getElementById('btn_modal_ajouter').removeAttribute('disabled');
|
||||
|
|
@ -474,9 +485,13 @@ loadingTask.promise.then(function(pdf) {
|
|||
}
|
||||
|
||||
document.getElementById('save').addEventListener('click', function(event) {
|
||||
var dataTransfer = new DataTransfer();
|
||||
canvasEditions.forEach(function(canvasEdition, index) {
|
||||
document.getElementById('data-svg-'+index).value = canvasEdition.toSVG();
|
||||
dataTransfer.items.add(new File([dataURLtoBlob(svgToDataUrl(canvasEdition.toSVG()))], index+'.svg', {
|
||||
type: 'image/svg+xml'
|
||||
}));
|
||||
})
|
||||
document.getElementById('input_svg').files = dataTransfer.files;
|
||||
});
|
||||
|
||||
document.getElementById('save_mobile').addEventListener('click', function(event) {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<div class="col-12">
|
||||
<label for="input_pdf_upload" class="form-label">Choisir un PDF</label>
|
||||
<input id="input_pdf_upload" class="form-control form-control-lg" type="file" accept=".pdf,application/pdf">
|
||||
<p><small class="text-muted">Le PDF ne doit pas dépasser <?php echo round($maxSize / 1024 / 1024) ?> Mo</small></p>
|
||||
<p class="mt-1 opacity-50"><small class="text-muted">Le PDF ne doit pas dépasser <?php echo round($maxSize / 1024 / 1024) ?> Mo et faire plus de <?php echo $maxPage ?> pages</small></p>
|
||||
<a class="btn btn-sm btn-link opacity-75" href="/#https://raw.githubusercontent.com/24eme/signaturepdf/master/tests/files/document.pdf">Tester avec un PDF de démo</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@
|
|||
|
||||
<form class="position-absolute bottom-0 pb-2 ps-0 pe-4 w-100 d-none d-sm-none d-md-block" id="form_pdf" action="/sign" method="post" enctype="multipart/form-data">
|
||||
<input id="input_pdf" name="pdf" type="file" class="d-none" />
|
||||
<input id="input_svg" name="svg[]" type="file" class="d-none" />
|
||||
<div class="d-grid gap-2 mt-2">
|
||||
<button class="btn btn-primary" disabled="disabled" type="submit" id="save"><i class="bi bi-download"></i> Télécharger le PDF Signé</button>
|
||||
</div>
|
||||
|
|
@ -147,6 +148,7 @@
|
|||
<script>
|
||||
var url = '/<?php echo $key ?>/pdf';
|
||||
var pdfHistory = {};
|
||||
var maxPage = <?php echo $maxPage ?>;
|
||||
var filename = null;
|
||||
if(localStorage.getItem('pdfHistory')) {
|
||||
pdfHistory = JSON.parse(localStorage.getItem('pdfHistory'));
|
||||
|
|
|
|||
Loading…
Reference in New Issue