Typo3: SWF Uploader – "Alter alterius auxilio eget."

Hier beschreiben wir, wie Sie eine einfache (Flash-) Anwendung in Ihre Typo3-Seite integrieren, mit der Ihre Besucher eine – oder gleichzeitig mehrere – Datei(en) auf Ihren Server hoch laden können. Inklusive E-Mail Benachrichtigung beim Eingang neuer Dateien.

1. Laden Sie sich das Installationspaket SWFUpload herunter Link: swfupload.org . Alternativ können Sie sich in unserem Download-Bereich die hier verwendeten Dateien vollständig herunterladen (swf_upload.zip). Entpacken Sie das Archiv. Wenn Sie unsere Dateien nehmen, erhalten Sie zwei Verzeichnisse (swfupload und simpledemo).

2. Öffnen Sie die Datei /simpledemo/upload.php und tragen Sie in Zeile 29 die gewünschte E-Mail Adresse ein, an die eine Benachrichtigung gesendet werden soll, wenn ein neuer Upload statt gefunden hat:

$upload_notify_email = ‚upload@domain.de‘

Tragen Sie zusätzlich in Zeile 159 die gewünschte Absender E-Mail Adresse ein, z.B.

$from = ‚SWFUpload@mailinator.com‘ ;

Speichern nicht vergessen.

3. Laden Sie die beiden Verzeichnisse am besten in Ihr Typo3-Verzeichnis …/fileadmin/ hoch. Kontrollieren Sie anschließend, ob die Leserechte korrekt gesetzt sind.

Legen Sie anschließend (falls noch nicht vorhanden) das Verzeichnis /fileadmin/uploads an. Dort werden die empfangenen Daten abgelegt.

4a. Öffnen Sie Ihr Typo3-Backend (admin).

4b. Legen Sie eine neue Seite „Datei Upload“ in Ihrer Typo3-Installation an.

4c. Geben Sie als neues Inhaltselement „Allgemeines Plugin-in“ an (Bereich „plug-ins“). In der sich öffnen neuen Seitenübersicht wählen Sie unter der Kartei „Allgmein“ > Inhaltselement (Typ) > PHP-Script aus (unterster Punkt in der Dropdown-Liste).

4d. Tragen Sie in das Fenster mit der Überschrift „PHP Code (direct, example: <?php phpinfo(); ?>)“ folgendes Skript ein:

<html>
<head>
<link href=“fileadmin/swfupload.css“ rel=“stylesheet“ type=“text/css“ />
<script type=“text/javascript“ src=“fileadmin/swfupload/swfupload.js“></script>
<script type=“text/javascript“ src=“fileadmin/simpledemo/js/swfupload.queue.js“></script>
<script type=“text/javascript“ src=“fileadmin/simpledemo/js/fileprogress.js“></script>
<script type=“text/javascript“ src=“fileadmin/simpledemo/js/handlers.js“></script>
<script type=“text/javascript“>
var swfu;

        window.onload = function() {
            var settings = {
                flash_url : „fileadmin/swfupload/swfupload.swf“,
                upload_url: „fileadmin/simpledemo/upload.php“,
                post_params: {„PHPSESSID“ : „<?php echo session_id(); ?>“},
                //file_post_name: „Filedata“,
                file_size_limit : „100 MB“,
                file_types : „*.*“,
                file_types_description : „All Files“,
                file_upload_limit : 100,
                file_queue_limit : 0,
                custom_settings : {
                    progressTarget : „fsUploadProgress“,
                    cancelButtonId : „btnCancel“
                },
                debug: false,

                // Button settings
                button_image_url: „fileadmin/simpledemo/images/TestImageNoText_65x29.png“,
                button_width: „65“,
                button_height: „29“,
                button_placeholder_id: „spanButtonPlaceHolder“,
                button_text: ‚<span class=“theFont“>Datei</span>‘,

                button_text_style: „.theFont { font-size: 14; }“,
                button_text_left_padding: 12,
                button_text_top_padding: 5,

                // The event handler functions are defined in handlers.js
                file_queued_handler : fileQueued,
                file_queue_error_handler : fileQueueError,
                file_dialog_complete_handler : fileDialogComplete,
                upload_start_handler : uploadStart,
                upload_progress_handler : uploadProgress,
                upload_error_handler : uploadError,
                upload_success_handler : uploadSuccess,
                upload_complete_handler : uploadComplete,
                queue_complete_handler : queueComplete    // Queue plugin event
            };

            swfu = new SWFUpload(settings);
         };
    </script>
</head>
<body>
    <form id=“form1″ action=“index.php“ method=“post“ enctype=“multipart/form-data“>
        <p>Hier können Sie Dateien auf den Server hoch laden – wenn Ihr Rechner Flash unterstützt. Eine gleichzeitige Mehrfachauswahl an Dateien ist möglich.</p><br><br>

            <div class=“fieldset flash“ id=“fsUploadProgress“>
            <span class=“legend“>Upload Queue</span>
            </div>
        <div id=“divStatus“>0 Files hoch geladen.</div><br>
            <div>
                <span id=“spanButtonPlaceHolder“></span>
                <input id=“btnCancel“ type=“button“ value=“Upload abbrechen“ onclick=“swfu.cancelQueue();“ disabled=“disabled“ style=“margin-left: 2px; font-size: 8pt; height: 29px;“ />
            </div>

</form>
</body>
</html>

6. Grundsätzlich sollte nun alles funktionieren. Kontrollieren Sie, ob im Frontend die neue Seite und die Upload-Variante angezeigt wird. Starten Sie einen Upload, in dem Sie auf „Datei“ klicken.

7. Mail: Wenn ein Dateiupload erfolgreich abgeschlossen wurde, wird an die unter Punkt 2. angegebene E-Mail Adresse eine Nachricht gesendet. Der Nachrichtenaufbau enthält alle relevanten Details zum Upload und sieht folgendermaßen aus:

Save Path: /www/htdocs/w009c4c2/fileadmin/uploads/README.txt

$_FILES data:
Array
(
    [Filedata] => Array
        (
            [name] => README.txt
            [type] => application/octet-stream
            [tmp_name] => /tmp/phpvGHzXi
            [error] => 0
            [size] => 80
        )
)

8. Sie können das Aussehen des Uploadformulars über die /simpledemo/index.php anpassen.

Kommentar Abbrechen