[solved] File upload in CP-Form integrieren

santscho · Post by **santscho** » Fri 28. Mar 2008, 17:06

Hallöle!

Da der Endkunde für sein personalisiertes Produkt ein ZIP-File mit 26 hochaufgelösten Fotos hochladen soll, brauche ich einen Uploader mit Statusanzeige und Datenüberprüfung vor dem Upload. Soweit habe ich ein Teil gefunden, welches als "Standalone" auch prächtig funktioniert.

Die JS sind im Template Head integriert/verknüpft. Das Core-Upload-Formular befindet sich in einem html-CP.

Habe nun versucht, den Uploader in ein phpwcms-form-cp zu packen, denn ich möchte das Formular noch mit phpwcms-Formelementen ausbauen.

Problem:
Form action des originalen Uploaders:

Code: Select all

action="http://www.gameculture.com.sg/uploader/flash_upload.php"

Form action phpwcms:

Code: Select all

action="http://www.gameculture.com.sg/index.php?aid=25#jumpForm88"

"flash_upload.php" steuert den eigentlichen Flash-Uploader.

Wie kann ich "flash_upload.php" im phpwcms-formular unterbringen und somit den uploader zum Laufen bringen?

Hier poste ich den Link. Vorerst dürft ihr gerne was hochladen (bitte nicht zu gross). Aber später, wenn die Seite online geht, muss ich die URL entfernen.
Gerne stelle ich euch die Core files des uploader zur Verfügung.
Das obere Formular = Core
Das untere Formular = phpwcms
http://www.gameculture.com.sg/index.php?aid=25

santscho · Post by **santscho** » Fri 28. Mar 2008, 17:11

Spontane Idee (OG wird mir den Kopf abreissen):

Könnte ich den Inhalt aus "flash_upload.php" kopieren und irgendwie im phpcms-form-script verpacken? Wenn ja, funktioniert der CP Formular weiterhin mit anderen Formularen auf der Website?

Man bedenke, dass ich PHP-Laie bin. Bitte mich nicht auslachen!

Ralph

Post by **Oliver Georgi** » Sat 29. Mar 2008, 00:44

Nein, das klappt nicht so simpel. Dateiupload ist eine ziemlich komplexe Sache. Aber bitte nicht im Content Part rumfuhrwerken!!!

Du könntest das aber mittels Frontend Render/Frontend Init und einem Custom Formular versuchen. Sollte klappen.

Den Upload des Flash Uploaders müsstest Du dann aber in Frontend Init handhaben - also bevor die phpwcms interne Formularverarbeitung greift.

Nicht ganz trivial - aber sollte gehen.

Oliver

santscho · Post by **santscho** » Sat 29. Mar 2008, 02:57

Du könntest das aber mittels Frontend Render/Frontend Init und einem Custom Formular versuchen. Sollte klappen. Den Upload des Flash Uploaders müsstest Du dann aber in Frontend Init handhaben - also bevor die phpwcms interne Formularverarbeitung greift.

Huch! Glaube nicht, dass ich das kann (Laienschicksal).

Der Uploader hat, so wie ich das interpretiere, die Funktion, Formulardaten nach dem Upload weiter zu geben. Leider ist diese Funktion nicht dokumentiert (oder ich bin zu blöd). Habe jetzt im Forum auf pixeline.be mein Anliegen gepostet. Wenn es wirklich möglich ist, die Formulardaten an ein Standard-Emailformular weiter zu geben, werde ich den Uploader ganz normal in einem HTML-Contentpart als "Standalone" application betreiben. Das wäre für mich auch eine gute Lösung.

Use Case 1: As Part Of A Form With Other Input Fields
Example: send a picture by email, the user must fill in its email and its correspondant email address
In this scenario, When the upload is finished, the jquUploader is replaced by a text input field.
This makes it easy to then submit your form and save the file path to a database field for instance, along with the rest of the form fields.
Note that this behaviour can be switched off by providing a url to the "afterScript" option. in such case, after the upload is finished, the flash file will redirect to a new page, allowing, for instance, to show the user its uploaded image.

Hier die Website des Uploaders: http://www.pixeline.be/experiments/jqUploader/
Klick auf "DEMO": Hier werden verschiedene mögliche Szenarien demonstriert.

Ralph

kubens · Post by **kubens** » Sat 29. Mar 2008, 08:03

Also normalerweise solltest dein Upload-Script explizit über einen Parameter mit angeben und nicht mit der Form-Action:

Code: Select all

$('#example2').jqUploader({
  uploadScript: '/uploadscript.php',
  afterScript:	'redirected.php',
  background:	'FFFFDF',
  barColor:	'64A9F6',
  allowedExt:     '*.avi; *.jpg; *.jpeg; *.png',
  allowedExtDescr: 'Images and movies (*.avi; *.jpg; *.jpeg; *.png)'
});

Allerdings solltest du dein afterScript Parameter entfernen, weil ich glaube das brauchst du an dieser Stelle nicht wirklich

Gruß
Wolfgang

santscho · Post by **santscho** » Sat 29. Mar 2008, 09:00

Hallo Wolfgang

Ich verstehe nicht ganz...
Das Upload-Script funktioniert ja, das ist nicht das Problem. Aber es muss möglich sein, nach dem Upload ein Email mit dem file name der hochgeladenen Datei an den Webmaster zu schicken.

santscho · Post by **santscho** » Sat 29. Mar 2008, 09:56

Habe jetzt mal den Uploader in ein normals Formular integriert. Nach dem Upload der Datei erhalte ich aber

HTTP error: with test.jpg:error#404

Hier mein html (abgeändertes "Beispiel 2" aus dem "demo.html"

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqUploader demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css"/>
<script type="text/javascript" src="jquery-1.2.1.min.js"></script>
<script type="text/javascript" src="jquery.flash.js"></script>
<script type="text/javascript" src="jquery.jqUploader.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#example1').jqUploader({background:'FFFFDF',barColor:'FFDD00',allowedExt:'*.avi; *.jpg; *.jpeg; *.png',allowedExtDescr: 'what you want',validFileMessage: 'Thanks, now hit Upload!',endMessage: 'and don\'t you come back ;)',hideSubmit: false});
	$('#example2').jqUploader({
  uploadScript: '/flash_upload.php',
  background:   'FFFFDF',
  barColor:   '64A9F6',
  allowedExt:     '*.avi; *.jpg; *.jpeg; *.png',
  allowedExtDescr: 'Images and movies (*.avi; *.jpg; *.jpeg; *.png)'
});

	$("#example3").jqUploader({background:	"FFFFDF",barColor:	"FF00FF"});
});
</script>
</head>
<body>
<div id="page">
			The form

			<form id="FormName" action="(EmptyReference!)" method="post" name="FormName"><fieldset>
    <legend>Upload your file</legend>
    <ol>
      <li id="example2">
        <label for="example2_field">Choose a file to upload:</label>
        <input name="myFile2" id="example2_field"  type="file" />
      </li>
    </ol></form>
		</div>
		
</body>
</html>

kubens · Post by **kubens** » Sat 29. Mar 2008, 10:02

Du lädst die Datei mit jqUpload hoch
jqUpload speichert den hochgeladenen Filenamen in einem hidden Field. Der Name des hidden Fields ist der, welchen du vom type='File' gesetzt hast
Du submitest deine Form und bekommst den Filenamen ganz normal mitgeschickt

demo.html

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqUploader demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css"/>
<script type="text/javascript" src="jquery-1.2.1.min.js"></script>
<script type="text/javascript" src="jquery.flash.js"></script>
<script type="text/javascript" src="jquery.jqUploader.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#example1').jqUploader(
    {
      uploadScript: 'flash_upload.php',
      background:'FFFFDF',
      barColor:'FFDD00',
      allowedExt:'*.avi; *.jpg; *.jpeg; *.png',
      allowedExtDescr: 'what you want',
      validFileMessage: 'Thanks, now hit Upload!',
      hideSubmit: false
    }
  );
});
</script>
</head>
<body>
<div id="page">

<form action="submit_form.php" method="POST" class="a_form">
  <fieldset>
    <legend>eMail</legend>
    <input name="email"  id="email" type="text" />
  </fieldset>
  <fieldset>
    <legend>File</legend>
    <div id="example1">
      <input name="MAX_FILE_SIZE" value="1048576" type="hidden" />
      <input name="filename"  type="file" />
    </div>
  </fieldset>
  <input type="submit" name="submit" value="Send" />
</form>


</div>
</body>
</html>

submit_form.php

Code: Select all

<?php

foreach ($_POST as $key => $value)
{
  echo $key,':',$value,'<br>';
}

?>

santscho · Post by **santscho** » Sat 29. Mar 2008, 10:24

submit_form.php ist in diesem Fall einfach eine "Simulation" des "richtigen" Formmailers (das kann CGI sein, oder der interne Mailer von phpwcms)?
Okay, Beim Upload erhalte ich zwar grünes Licht (100% hochgeladen), jedoch finde ich im Upload-Folder keine Datei (FTP). Die geht irgendwie verloren.

An Schreibrechten kann es nicht liegen. Mit der originalen "Demo.html" funktioniert der Upload.

kubens · Post by **kubens** » Sat 29. Mar 2008, 10:38

Ja, das liegt daran, daß das flash_upload Skript warnings wirft. Nimmst du dieses Beispiel, dann funktioniert es:

Code: Select all

<?php

$uploadDir = dirname(__FILE__) . '/files/';
$uploadFile = $uploadDir . basename($_FILES['Filedata']['name']);

if ($_FILES['Filedata']['name']) 
{
  if (move_uploaded_file ($_FILES['Filedata']['tmp_name'], $uploadFile)) 
  {
    // delete the file
    //  @unlink ($uploadFile);
    return $uploadFile;
  }
}
?>

Wichtig:
Du mußt ggf. sicherstallen, daß $uploadDir existiert.

santscho · Post by **santscho** » Sat 29. Mar 2008, 10:47

hmmm.

die ganze php braucht nur das obige code schnippsel? den rest kann ich löschen?

oder ist das als "Ersatz" für den ersten Teil der php gedacht?

santscho · Post by **santscho** » Sat 29. Mar 2008, 10:52

Ha! Geil!
Als Standalone Application funktionierts jetzt. Das Ding noch in ein form-CP packen und "ab geht die Post".
Das "hidden" feld kann ich mit einem "hidden" aus phpwcms ersetzten, nur die richtigen variabeln vergeben. Richtig?

Sag mal, hast schon Erfahrung mit diesem Uploader? Verwendest Du ihn in phpwcms?

kubens · Post by **kubens** » Sat 29. Mar 2008, 11:01

Naja, mein Skript checkt die ganzen Sonderfälle nicht ab, aber hier wird es dann schon besser:

upload.php

Code: Select all

<?php

$uploadDir = dirname(__FILE__) . '/files/';
$uploadFile = $uploadDir . basename($_FILES['Filedata']['name']);

if ($_FILES['Filedata']['name']) 
{
  if (move_uploaded_file ($_FILES['Filedata']['tmp_name'], $uploadFile)) 
  {
    // delete the file
    //  @unlink ($uploadFile);
      return $uploadFile;
  }
  else 
  {

    switch ($_FILES[0]['error']) {
        case 1:
            return 'The file is bigger than this PHP installation allows';
            break;
        case 2:
            return 'The file is bigger than this form allows';
            break;
        case 3:
            return 'Only part of the file was uploaded';
            break;
        case 4:
            return 'No file was uploaded';
            break;
        default:
            return 'unknown errror';
    }

  }
}

?>

Wenn du Lust hast, dann schau Dir mal swfUpload an. Die Funktionsweise ist analog zu der des jqUploader Plugins.

Gruß
Wolfgang

kubens · Post by **kubens** » Sat 29. Mar 2008, 11:33

... also ich sehe das wie Oliver. Du solltest i.d.R nix an den original Files ändern. Ich würde es als RT machen, aber jetzt funzt es ja

Ja, ich nutze den Uploader. Allerdings bin ich nicht so der klassische und repräsentative phpWCMS User. Ich arbeite mit einer 'gepimpten' Version die jede Menge individuelle Erweiterungen (such mal nach meinen Threads hier im Forum) beinhaltet. In einer dieser Erweiterungen nutze ich auch das swfUpload. Allerdings nutze ich es innerhalb eigener CP, damit die Redakteure diverse Files hochladen können.

Hier ist meine letzte aktuelle Spielwiese an der ich ab und an schon mal 'n paar Sachen ausprobiere

Gruß
Wolfgang

santscho · Post by **santscho** » Sat 29. Mar 2008, 11:53

Nette Spielwiese, Wolfgang. Werde sie mir mal genauer anschauen. Leider im Stress

Ich beisse mir gerade die Zähne aus, den Uploader in ein CP-Formular zu integrieren. Ich melde mich dann wenn wich "hänge"

Ralph

[solved] File upload in CP-Form integrieren

[solved] File upload in CP-Form integrieren

Re: File upload in CP-Form integrieren

Re: File upload in CP-Form integrieren

Re: File upload in CP-Form integrieren

Re: File upload in CP-Form integrieren

Re: File upload in CP-Form integrieren

Re: File upload in CP-Form integrieren

Re: File upload in CP-Form integrieren

Re: File upload in CP-Form integrieren

Re: File upload in CP-Form integrieren

Re: File upload in CP-Form integrieren

Re: File upload in CP-Form integrieren

Re: File upload in CP-Form integrieren

Re: File upload in CP-Form integrieren

Re: File upload in CP-Form integrieren