0

Im trying to send a pdf file uploaded using JQ to a PHP file which uses CLI and pdf2svg to convert it to an svg file, with the eventual aim to return that svg file so that it can be placed into svg editor.

Currently i have this: In svg-editor.js:

if(file.type.indexOf("pdf") != -1){
    //convert to svg
    //load svg string
    var reader = new FileReader();
    reader.onloadend = function(e) {
        $.post("pdfuploads/pdfconvert.php", { 'pdf[]': [e.target.result] })
            .done(function(data){
                alert("Data Loaded: " + data );
                svgCanvas.importSvgString(data, true);
                svgCanvas.ungroupSelectedElement()
                svgCanvas.ungroupSelectedElement()
                svgCanvas.groupSelectedElements()
                svgCanvas.alignSelectedElements("m", "page")
                svgCanvas.alignSelectedElements("c", "page")
            });
    };
reader.readAsText(file);
}

The above checks the extension of the file being loaded, if its pdf then it posts it to the php file. (all working fine)

In my php file (its being tied in with drupal):

<?php

$dir = getcwd();
define('DRUPAL_ROOT', $_SERVER['DOCUMENT_ROOT']); //added to make sure its defined as we're outside the use of index.php
chdir(DRUPAL_ROOT);
require_once './includes/bootstrap.inc';
drupal_bootstrap(DRUPAL_BOOTSTRAP_FULL);
chdir($dir);
global $base_url;

$time = microtime();

$handle = fopen("pdfupload-".$time.".pdf", "wb"); 
if (fwrite($handle, file_get_contents($_POST['pdf'][0])) === FALSE) { 
$error = "Cannot write to file";
exit; 
} 
fclose($handle);
//$file = file_put_contents('pdfupload-'.$time.'.pdf', $_POST['pdf'][0]);
$svg = exec("/usr/local/bin/pdf2svg pdfupload-".$time.".pdf output_page-".$time."%d.svg all");

cg_utils_watch('file pdf value','', $error);
cg_utils_watch('file svg value','', $svg);

echo "<pre>";
print_r($svg);
echo "</pre>";

return $svg;

Ignore the logging and the fact that $svg doesnt return the svg file --

The pdf stream is taken from post, and saved. Unfortunalty someware between upload and saving on the server the pdf file becomes corrupted. It saves a pdf file, but when opening that file its empty, the end result being the svg file thats written to the server in the exec() is also empty.

Does anyone have any ideas / know any better way of doing this?

tobynew
  • 337
  • 1
  • 3
  • 17
  • One thing it might be is character encoding. Everything needs to have the same encoding (The javascript, the PHP script, the database, etc) – GordonM Oct 02 '13 at 08:14
  • The editor is running UTF-8, added header('Content-Type: text/html; charset=utf-8'); to the php file at the top, no joy. – tobynew Oct 02 '13 at 08:26
  • 1
    `reader.readAsText(file)` sounds bad --- PDF are binary files and reading them as text is likely to break their contents. – mkl Oct 02 '13 at 08:43
  • My understanding is that, that line will be called after the post responce, which will be in SVG format, so text should be fine.. - Im not really a JS dev though – tobynew Oct 02 '13 at 08:50

1 Answers1

0

ok, so turns out that mkl in the comments above was right, the issue was with the reader.readAsText(file) line.

This was fireing before the post, so the PDF file was being posted as text.

following this: http://www.develop.com/htmlfivefileapi i changed the JQ to the following:

if(file.type.indexOf("pdf") != -1){
    //convert to svg
    //load svg string
    var reader = new FileReader();
    reader.onloadend = function(e) {
        $.post("pdfuploads/pdfconvert.php", { 'pdf[]': [e.target.result] })
        .done(function(data){
            alert("Data Loaded: " + data );
            svgCanvas.importSvgString(data, true);
            svgCanvas.ungroupSelectedElement()
            svgCanvas.ungroupSelectedElement()
            svgCanvas.groupSelectedElements()
            svgCanvas.alignSelectedElements("m", "page")
            svgCanvas.alignSelectedElements("c", "page")
        });
    };
    reader.readAsDataURL(file);
}

and it now works like a charm :)

tobynew
  • 337
  • 1
  • 3
  • 17