[php] upload form waarde retour aan JS

[Ivar]

Ik heb al heel wat topics gelezen middels de search over file uploads i.c.m. JavaScript maar niets wat mijn probleem oplost. Dubieus om in dit forum te plaatsen (i.p.v. in W&G) maar het betreft zowel server-side als client-side scripting. Het uploaden van een bestand middels het formulier is geen probleem, maar na het uploaden moet de waarde van een variabele die hierna pas is vastgesteld teruggegeven worden aan de modalDialog waarin het formulier zich bevindt. Oftewel:

Het bestand wordt geopend middels:

code:

showModalDialog("dlg_ins_image.php", window, "status:no;dialogWidth:400px;dialogHeight:240px;help:no")

Het formulier in dit bestand (modalDialog):

code:

<form name="upload_form" id="theForm" target="_self" enctype="multipart/form-data" action="dlg_ins_image.php" method="POST"> 
  <input type="file" name="file">
  </form>

...met aan het eind van dit document een knop (plaatje+link) met een onClick die de volgende javaScript functie in de header aanroept:

code:

  function insertImage() {
    if (document.forms.theForm.file.value) {
            theForm.submit();
    window.returnValue = '<IMG' + attr("alt", alt.value) 
                                + attr("src",  <?=$filename?>)
                                + attr("align", align[align.selectedIndex].value)
                                + ((width.value)?attr("width", width.value):"")
                                + ((height.value)?attr("height", height.value):"")
                                + ((vspace.value)?attr("vspace", vspace.value):"")
                                + ((hspace.value)?attr("hspace", hspace.value):"")
                                + ((border.value)?attr("border", border.value):attr("border",0))
                                + '/>';
        window.close();
    }
    else if (url.value) {
        // niet belangrijk
    }
  }

Hiermee wordt het formulier gesubmit en gaat de PHP code aan de slag het bestand te uploaden. Hier komt al een probleem om de hoek kijken: het submitten van het formulier opent ondanks de target="_self" tag in een nieuw venster. Na het uploaden is er een variabele bekend, die onder de naam $filename vervolgens door het modalDialog weer returned wordt aan het openende document. Doordat het submitten van het formulier in een nieuw venster gebeurt, is de naam van deze variabele dus niet bekend en kan niet teruggegeven worden door de modalDialog. Wat is de beste manier om ervoor te zorgen dat het JavaScriptje wacht tot het bestand is geupload, de variabele van PHP gevoerd wordt en vervolgens pas verder gaat met het uitvoeren van de rest (namelijk het teruggeven van die variabele)?

[Spider.007]

ik vindt het een moeilijk te begrijpen verhaal; maar wat je kunt doen is tussen nieuwe windows en hun ouders dingen versturen met window.opener waarmee je naar de opener van een nieuw window refereert. Je kunt dus var's zetten ed. Verder heb je probs met die target van die form; wat gebeurd er als je de target leeg laat?

[Ivar]

Spider.007 schreef op 02 February 2003 @ 22:42:
ik vindt het een moeilijk te begrijpen verhaal; maar wat je kunt doen is tussen nieuwe windows en hun ouders dingen versturen met window.opener waarmee je naar de opener van een nieuw window refereert. Je kunt dus var's zetten ed. Verder heb je probs met die target van die form; wat gebeurd er als je de target leeg laat?

Klopt, het is geen makkelijk verhaal , maar ik zal het nog iets proberen te verduidelijken:

-Klikken op button roept JS functie aan
-Deze submit het formulier
-Hierna moet deze functie een variabele teruggeven (middels window.returnValue) aan het document dat de modalDialog had opgeroepen.
-Deze variabele is pas bekend nadat het formulier met PHP verwerkt is

Als het mogelijk zou zijn om het formulier in hetzelfde window te laten verwerken door PHP, is het probleem al opgelost. Ben geen goede JS-er en volg window.opener dan ook niet helemaal...

PHP code voor het verwerken van het formulier:

PHP:

  $base_dir = "/content/images/";
  $upload_dir = "/var/site44/www/content/images/";
  $tmp_name = $HTTP_POST_FILES[file][tmp_name];
  $filename = $HTTP_POST_FILES[file][name];
  
  if ($HTTP_SERVER_VARS['REQUEST_METHOD'] == 'POST') { 
    if(file_exists("$upload_dir$filename")) {
        $filename = uniqid("") .$filename;
    }
    if (move_uploaded_file("$tmp_name", "$upload_dir$filename")) { 
        $GLOBALS['filename'] = "$base_dir$filename";
            chmod("$upload_dir$filename", 0644);
    }
         else {
                  echo "Possible file upload attack!  Here's some debugging info:\n";
            print_r($HTTP_POST_FILES);
            die();
        }
  }

$filename is de variabele die bij het JavaScript bekend en vervolgens teruggegeven aan het openende document moet worden.

[ Voor 37% gewijzigd door Ivar op 03-02-2003 00:16 . Reden: php code voor verwerken formulier toegevoegd ]

[drm]

Ivar
Als ik het goed begrijp is het enige probleem toch echt een clientside probleem:
Je submit een pagina maar die komt niet in het modalDialog terecht
Daardoor kun je met de resultaten van het form ook niet de modalDialog.returnValue zetten

Niks serverside aan move Programming & Webscripting naar Webdesign & Graphics dus

[Verwijderd]

Dat een formulier submit in een nieuw window, ipv in het modaldialog is een (voor mij) bekend probleem. Na veel klooien kwam ik met een hele simpele oplossing. Zorg dat de source van de modaldialog een frameset is.
Het aanklikken van links en posten van formulieren is dan geen probleem meer.

[Verwijderd]

offtopic:
Je hoeft niet iedere variabele te quoten, en tegenwoordig hebben we $_POST[] en $_GLOBAL enzo

[Ivar]

drm schreef op 03 februari 2003 @ 10:04:
Ivar
Als ik het goed begrijp is het enige probleem toch echt een clientside probleem:
Je submit een pagina maar die komt niet in het modalDialog terecht
Daardoor kun je met de resultaten van het form ook niet de modalDialog.returnValue zetten

Niks serverside aan move Programming & Webscripting naar Webdesign & Graphics dus

Het was inderdaad een beetje dubieus, maar ik hoopte eigenlijk dat het met wat mooie PHP code op te lossen was, omdat JS mijn sterkste kant niet is. Thanx voor de move iig.

Verwijderd schreef op 03 februari 2003 @ 11:30:
Dat een formulier submit in een nieuw window, ipv in het modaldialog is een (voor mij) bekend probleem. Na veel klooien kwam ik met een hele simpele oplossing. Zorg dat de source van de modaldialog een frameset is.
Het aanklikken van links en posten van formulieren is dan geen probleem meer.

Die oplossing had ik wel al bedacht, maar nog niet geprobeerd... ik ga er mee aan de slag.

Verwijderd schreef op 03 February 2003 @ 11:33:

offtopic:
Je hoeft niet iedere variabele te quoten, en tegenwoordig hebben we $_POST[] en $_GLOBAL enzo

I know, gebruik ik normaal gesproken ook, maar om zeker van m'n zaak te zijn dat het ging kloppen heb ik de boel maar zo gedaan.

[Ivar]

Thanx all (voornamelijk Tjabber voor de tip), het is met een hoop gepruts gelukt . Voor de geinteresseerden post ik nog de code hieronder.

De modalDialog (dlg_ins_image.php) is een frameset geworden met een onzichtbaar bottomFrame waar het formulier verwerkt gaat worden:

code:

<frameset rows="100%,0%" frameborder="no" border="0" framespacing="0">
  <frame src="insert_image.php" name="mainFrame" frameborder="no" scrolling="no" noresize="noresize" marginwidth="0" marginheight="0" id="mainFrame" title="mainFrame" />
  <frame src="process_image.php" name="bottomFrame" frameborder="no" scrolling="no" noresize="noresize" marginwidth="0" marginheight="0" id="bottomFrame" title="bottomFrame" />
</frameset>

insert_image.php is 1 groot formulier geworden met de JS voor het posten van het formulier:

code:

  <form name="upload_form" id="theForm" target="bottomFrame" enctype="multipart/form-data" action="process_image.php" method="POST"> 
    // hoop HTML...
    <input type="hidden" name="MAX_FILE_SIZE" value="100000">
    <input type="file" name="file">
  </form>

process_image.php bevat de code voor het verwerken van het upload formulier en het teruggeven van de variabele aan het oproepende window:

PHP:

<?php 
  session_start();
  if ($HTTP_SERVER_VARS['REQUEST_METHOD'] == 'POST') { 
    $tmp_name = $HTTP_POST_FILES[file][tmp_name]; // As of PHP 4.1.0 preferably use autoglobal $_FILES
    $filename = $HTTP_POST_FILES[file][name];
    if (!isset($base_dir)) { // session variable base_dir
         $base_dir = "/images/";
    }
    if (!isset($upload_dir)) { // session variable upload_dir
         $upload_dir = "/var/site44/www/images/";
    }
    if(file_exists("$upload_dir$filename")) {
        $name = $filename;
        $filename = uniqid("") .$name;
    }
    if (move_uploaded_file("$tmp_name", "$upload_dir$filename")) { 
            echo "<html>\n<head>\n<title>Upload Success</title>\n</head>\n<body>\n";
        $filename = "$base_dir$filename";
            chmod("$upload_dir$filename", 0644);
?>
        <script language="JavaScript">
                  function attr(name, value) {
                    if (!value || value == "") return "";
                    return ' ' + name + '="' + value + '"';
                  }
<?php
        echo "window.returnValue = '<IMG' + attr(\"alt\", '$alt') + attr(\"src\", '$filename') + attr(\"align\", '$align') + (('$width')?attr(\"width\", '$width'):\"\") + (('$height')?attr(\"height\", '$height'):\"\") + (('$vspace')?attr(\"vspace\", '$vspace'):\"\") + (('$hspace')?attr(\"hspace\", '$hspace'):\"\") + (('$border')?attr(\"border\", '$border'):attr(\"border\",0)) + '/>';\n";
        echo "window.close();\n</script>";
        echo "</body></html>";
    }
        else {
            echo "<html><head><title>Upload Error</title></head><body>";
            echo "Possible file upload attack! Here's some debugging info:\n";
            print_r($HTTP_POST_FILES);
            echo "</body></html>";
            die();
        }
  }
?>

That's it...

[ Voor 35% gewijzigd door Ivar op 03-02-2003 16:36 . Reden: code iets aangepast en wat toegevoegd ]