Need help with php

Using JavaScript with Hype
1

I need your help with PHP. Since I don't know PHP, I sought assistance from chatGPT. The goal of the project is to combine multiple SVG and JS files into a single target file (finalOutput.js) using a PHP script through Drag and Drop. These combined files will then be visualized in Hype. To minimize requests, I had to choose this approach.

Everything works perfectly fine at the moment, but the issue is that the SVG and JS files must come from a fixed directory (tmp). However, I want the solution to work regardless of where the files come from, and that's where ChatGPT is struggling (and I am with ChatGPT... :rofl:. Attached is the working construct with the fixed directory.

Thanks in advance,
Kalle

dragDrop.zip (18.8 KB)

2

This only uses the dropped files and returns the JS.

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // get the uploaded files
    $files = $_FILES['files'];

    // a function to get file contents and return as string
    function getFileContents($fileTmpName) {
        $content = file_get_contents($fileTmpName);
        if ($content === false) {
            die('Failed to read file "' . $fileTmpName . '".');
        }
        return $content;
    }

    $svgFiles = [];
    $jsFiles = [];
    $jsObject = 'var scenes = {';

    // divide the files into SVGs and JSs
    for ($i = 0; $i < count($files['name']); $i++) {
        $extension = pathinfo($files['name'][$i], PATHINFO_EXTENSION);
        if ($extension === 'svg') {
            $svgFiles[] = getFileContents($files['tmp_name'][$i]);
        } else if ($extension === 'js') {
            $jsFiles[] = getFileContents($files['tmp_name'][$i]);
        }
    }

    for ($i = 0; $i < count($svgFiles); $i += 2) {
        $mobileSVG = addslashes($svgFiles[$i]);
        $desktopSVG = addslashes($svgFiles[$i + 1]);

        $jsObject .= '"szene_' . (($i / 2) + 1) . '": {';
        $jsObject .= '"layout_mob": `' . $mobileSVG . '`,';
        $jsObject .= '"layout_dt": `' . $desktopSVG . '`';
        $jsObject .= '},';
    }

    $jsObject = rtrim($jsObject, ',');
    $jsObject .= '};';

    // Add the contents of the JS files to the end of the JavaScript object
    foreach ($jsFiles as $jsContent) {
        $jsObject .= "\n" . $jsContent;
    }

    // set the headers to force download
    header('Content-Type: application/octet-stream');
    header('Content-Disposition: attachment; filename="finalOutput.js"');
    echo $jsObject;
    exit();
}
?>
1 Like
3

Thanks Max. This is the code that replaces the code in 'processFile.php' - right? If so - I get a lot of error messages and the finalOutput.js is not being written...

4

Files: Archiv.zip (2,9 KB)
Demo: Drag & Drop File Upload

PS: These seem like Export To Hype files. You could just export all add-ons. Shouldn't that contain a file with all inside …

1 Like
5

Hey Max! First off, many thanks so far. The upload and writing of the js file are working wonderfully. However, the scenes array is getting quite shaken up... The different scene entries are assigned incorrect SVG contents.

As for creating with Export To Hype - you're absolutely right about using just one Illustrator graphic. But the Hype graphics we want to generate consist of several Illustrator graphics (each scene is an Illustrator graphic).

This is what is supposed to come out:

var scenes = {"szene_1": {"layout_mob": <svg ... hier content szene_1_layout_mob.svg ... ,"layout_dt": <svg ... hier content szene_1_layout_dt.svg ...},"szene_2": {"layout_mob": <svg ... hier content szene_2_layout_mob.svg,"layout_dt": <svg ... hier content szene_1_layout_dt.svg},"szene_3": {"layout_mob": <svg ... hier content szene_3_layout_dt.svg ...,"layout_dt": <svg ... hier SVG Content}};

This is what I get in the js file (.. or something like that ... it's a bit tricky to read it out... :grin:):

var scenes = {"szene_1": {"layout_mob": <svg ... szene_2_layout_mob.svg ... ,"layout_dt": <svg ... szene_2_layout_dt.svg ...},"szene_2": {"layout_mob": <svg ... szene_3_layout_mob.svg*,"layout_dt": <svg ... szene_3_layout_dt.svg},"szene_3": {"layout_mob": <svg ... szene_1_layout_dt.svg ...,"layout_dt": <svg ... szene_1_mob.svg}};

6

Does this fix it? Seem like the index does what you want…

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // get the uploaded files
    $files = $_FILES['files'];

    // a function to get file contents and return as string
    function getFileContents($fileTmpName) {
        $content = file_get_contents($fileTmpName);
        if ($content === false) {
            die('Failed to read file "' . $fileTmpName . '".');
        }
        return $content;
    }

    $svgFiles = [];
    $jsFiles = [];
    $jsObject = 'var scenes = {';

    // divide the files into SVGs and JSs, store in associative array with filenames as keys
    for ($i = 0; $i < count($files['name']); $i++) {
        $filename = $files['name'][$i];
        $extension = pathinfo($filename, PATHINFO_EXTENSION);
        if ($extension === 'svg') {
            $svgFiles[$filename] = getFileContents($files['tmp_name'][$i]);
        } else if ($extension === 'js') {
            $jsFiles[$filename] = getFileContents($files['tmp_name'][$i]);
        }
    }

    for ($i = 1; $i <= count($svgFiles)/2; $i++) {
        $mobileSVG = addslashes($svgFiles["szene_{$i}_layout_mob.svg"]);
        $desktopSVG = addslashes($svgFiles["szene_{$i}_layout_dt.svg"]);

        $jsObject .= '"szene_' . $i . '": {';
        $jsObject .= '"layout_mob": `' . $mobileSVG . '`,';
        $jsObject .= '"layout_dt": `' . $desktopSVG . '`';
        $jsObject .= '},';
    }

    $jsObject = rtrim($jsObject, ',');
    $jsObject .= '};';

    // Add the contents of the JS files to the end of the JavaScript object
    foreach ($jsFiles as $jsContent) {
        $jsObject .= "\n" . $jsContent;
    }

    // set a unique name for the temp file
    $tempFilename = uniqid('temp_', true) . '.js';

    // write the JS object to a temp file
    if (!file_put_contents($tempFilename, $jsObject)) {
        http_response_code(500);
        echo 'Fehler beim Schreiben der JS-Datei.';
        exit();
    }

    // send the temp file name back to JS
    echo $tempFilename;
}


if (isset($_GET['download'])) {
    $tempFilename = $_GET['download'];

    // ensure the file exists and is a valid file
    if (is_file($tempFilename) && strpos($tempFilename, 'temp_') === 0) {
        // set the headers to force download
        header('Content-Type: application/octet-stream');
        header('Content-Disposition: attachment; filename="finalOutput.js"');
        header('Content-Length: ' . filesize($tempFilename));

        // output the file content
        readfile($tempFilename);

        // delete the temp file
        unlink($tempFilename);
    }

    exit();
}
?>
3 Likes
7

Hi Max. Yes, this seems to be working well. At least with my current test files. I'm going to test this properly in different setups now... Thanks a million for your quick help, it helps me immensely!

1 Like