ajax-upload - wie einbinden, bzw. Alternativen zum Upload

Hi,

ich, Newbie, bin auf der Suche nach einer Datei-Upload-Erweiterung auf ajax-upload gestossen. Da fand ich aber keine Beschreibung zur Einbindung. Heisst dies, dass selbige anderweitig genutzt wird? Ich fand hierbei nämlich einen Verweis auf valumsFileUploader, welches leider noch im RC-Stadium und damit für mich nicht einsetzbar ist...

Oder anders gefragt: Was könnt ihr mal als Datei-Upload-Erweiterung empfehlen, welche eine Anleitung hat, nicht Flash- oder JavaApplet ist und sich nicht im RC-Stadium befindet?

Wieso ist der valumsFileUploader nicht nutzbar für dich? Nur weil der Status noch auf RC steht?? Wenn es dir nur um Status geht, stelle ich den gerne auf "stable"...

ajax-upload wird dir nichts bringen. das ist nur das js/css framework. valumsFileUploader bietet dir dagegen das Uploaderwidget

Danke, Andreas.

Grundsätzlich finde ich es super, was hier mit Contao an Erweiterungen existiert (und wie super-schnell und kompetent hier im Forum geantwortet wird).

Aber meine langjährigen mit Programmen, die als Status "RC" ausweisen und keine Beschreibung mitliefern, war in der Vergangenheit leider nicht besonders gut. Daher meine diesbezügliche Zurückhaltung...

du wirst keine andere erweiterung finden die das liefert was valums dir anbietet. es gibt auch einen wiki artikel zum uploader.

ich kann das gerne mal im ER aktualisieren, vllt legt sich dann deine angst.

Ah, den Wiki-Artikel hatte ich noch nicht gefunden. Jetzt aber ;). Danke nochmals.

Upps, da war ich wohl etwas zu vorschnell. Ich sehe gerade Wiki und in Contao, dass man den valumsFileUploader in den persönlichen Daten eines Benutzers aktivieren muß. Aber das passt nicht zu dem, was ich brauche, da es bei mir um Mitglieder geht... Oder verstehe ich da was miss?

was benötigst du genau? eine FE oder einen BE Uploader? schreib mir dein vorhaben bitte genau, dann kann ich besser helfen

Tut mir leid, ich weiss weder, was ein BE-, noch ein FE-Uploader ist...

Was ich möchte, ist dass bestimmte Mitglieder nach Anmeldung im Frontend, Dateien ohne den Einsatz von FTP, bzw. ohne vorher Java oder einen Flashplayer downzuloaden, auf meine zu erstellende Website hochladen können. Es handelt sich hierbei um Menschen, die Computer nur als Mittel zum Zweck sehen (so was soll es auch geben ;)) und nicht lange mit Vor-Installationen oder langen Vorerklärungen beschäftigt sein wollen. Wenn dann noch die Möglichkeit besteht, diese Dateien später wieder löschen zu können, wäre dies perfekt (ansonsten mache ich als Admin das irgendwann)...

dann ist valumsFileUploader genau richtig für dich. das löschen ist noch nicht implementiert, wir haben es aber vorgesehen.

... äh - und die Sache mit den Mitgliedern versus Benutzer...?

valums kann beides.

Benutzer = BE
Mitglieder = FE

für contao 3.0 > funktioniert der noch nich oder ?

Schaut Euch diesen Frontend-Uploader mal an:

GitHub: https://github.com/hayageek/jquery-upload-file/
Doku: http://hayageek.com/docs/jquery-upload-file.php

Ist zwar nicht Plug&Play, aber das Ajax-jQuery-Teil von Ravishanker Kusuma ist ohne Probleme in ein Contao-Formular einbindbar und sehr flexibel in der Anpassbarkeit. Multiupload ist auch kein Thema. Bin schwer begeistert!!!

Hab's in Contao 3.2.7 in ein Formular gepflanzt. In einer Setting-Javascriptdatei kann man diverse Einstellungen vornehmen und so z.B. auch eigene Variablen an php-Scripte (u.a. Upload-Script) zur Weiterverarbeitung übergeben. Mit etwas Sinn für Javascript und php kommt man schnell zum Ziel ;)

Hallo Coda,
kannst du uns zu deiner Lösung kurz aufzeigen, wie das Upload-Plugin in efg oder nativ im Formulargenerator eingebunden hast.

Vielen Dank

Markus

Joa, dann versuche ich das mal...

Ich habe mittlerweile an dem Teil einige eigene Einstellungen und Anpassungen vorgenommen. Von daher könnte mein Code etwas vom Original abweichen, sollte aber als Grundlage und Hilfestellung bestimmt helfen.

Ich habe das Teil einfach mittels Formulargenerator eingebaut.

Da ich gerne mit so wenigen Seitentemplates (z.B. fe_page.html5) wie möglich arbeite, frage ich im Seitentemplate erstmal die Seiten-ID ab und binde dann meine Scripte ein:

PHP-Code:

---

<?php
    global $objPage;
    $pageId = $objPage->id;
?>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<!-- Angenommen die Seiten-ID mit dem Uploadformular ist 10 -->

<?php if ($pageId == 10): echo "\n" //Datenupload ?>
    <link rel="stylesheet" href="files/css/uploads.css" media="screen">
    <script src="files/js/jquery.uploadfile.min.js"></script>
    <script src="files/js/jquery.uploadfile.settings.js"></script>
<?php endif; ?>

---

Der Schnipsel mit 'jquery.min.js' steht mal zur Vollständigkeit hier drin. jQuery sollte natürlich über das Contao-Backend ins Seitentemplate eingebunden werden.

-----------------------

Irgendwohin sollen die Daten hochgeladen werden, also

Uploadordner anlegen, z.B. hier files/uploads

.htaccess in den Uploadordner, mit folgendem Inhalt:

Code:

---

<IfModule !mod_authz_core.c>
  Order deny,allow
  Deny from all
</IfModule>
<IfModule mod_authz_core.c>
  Require all denied
</IfModule>
Options -ExecCGI -Indexes

---

-----------------------

Im Contao-Backend:

Dankeseite anlegen.
Im Formulargenerator "Neues Formular" anlegen und soeben angelegte Dankeseite als 'Weiterleitungsseite' auswählen, ID namens 'dataform' zuweisen (wird später für jquery benötigt).
Im Formulargenerator alle Felder wie gehabt anlegen.
Keinen Absendebutton anlegen.

Dazu folgende Elemente:

Feldtyp: Textfeld
Feldname: filenames
Feldbezeichnung: Upload-Dateien
CSS-Klasse: filenames

Feldtyp: HTML
HTML-Code: <div id="fileuploader">Datei(en) wählen</div>

Das hier wird der Absende- und Upload-Button
Feldtyp: HTML
HTML-Code: <input type="submit" id="startUpload" class="submit" value="Upload starten">

-----------------------

Original-Uploadscript z.B. hier anlegen: /pfad/zum/uploaderverzeichnis/upload.php
und
output_dir zum eben angelegten Uploadverzeichnis anpassen:

PHP-Code:

---

$output_dir = "../../../files/uploads/";

//[...] 


---

-----------------------

Hier kommt ein Auszug des Inhaltes meiner 'jquery.uploadfile.settings.js'.
Weitere Funktionen und Anpassungen können hier leicht integriert werden. Das Tool ist sehr gut dokumentiert.

Wichtigste Funktion ist hier, dass nach erfolgtem Upload ein automatischer Submit des Formulares erfolgt. Nachdem also der Upload erfolgt ist, gelangt der User zur vorhin angelegten Dankeseite.

Code:

---

$(document).ready(function()
{
        var uploadObj = $("#fileuploader").uploadFile({
                url:"./pfad/zur/upload.php",
                fileName:"myfile",
                autoSubmit:false,
                showDelete: false,
                fileCounterStyle:". Datei: ",
                dragDropStr: "<span><b>Sie können Ihre Dateien auch in dieses Fenster ziehen (Drag & Drop).</b></span>",
                abortStr:"abbrechen",
                cancelStr:"Auswahl entfernen",
                doneStr:"fertig",
                allowedTypes:"jpg,jpeg,png,gif,doc,txt,pdf,psd,tif,tiff,eps,zip,rar",
                extErrorStr:"ist keine zugelassene Datei. Zulässige Dateiformate sind: ",
                maxFileSize: 1024*1024*500, //1024 = 1kb, 1048576 = 1024*1024= 1MB
                maxFileCount: 20,
                sizeErrorStr:"überschreitet die max. zulässige Dateigröße von ",
                // hier die restlichen gewünschten Parameter rein -> Am Ende immer ein Komma ,

                onSuccess:function(files,data,xhr) {
                        var inputfilenames = '#dataform .filenames'; // ID,classname of input collecting filenames
                        if ( $(inputfilenames).val() == '' ) {
                                $(inputfilenames).val(data+',');
                        } else {
                                if ( $(inputfilenames).val().indexOf(data) === -1 ) {
                                        $(inputfilenames).val( $(inputfilenames).val() + ',' + data);
                                }
                        }                       
                },
                afterUploadAll:function(obj)
                {       
                        var inputfilenames = '#dataform .filenames'; // ID,classname of input collecting filenames
                        $(inputfilenames).val( $(inputfilenames).val().replace(',', '') );
                        $(inputfilenames).val( $(inputfilenames).val().replace(/,/g,", ") );
                        // Kleiner Timeout und automatisches Absenden nach erfolgtem Upload
                        window.setTimeout('document.forms["dataform"].submit();', 1000);
                }
        })
        $('#dataform').on('submit', function(e) {       
                e.preventDefault();
                $(":input[required]").each(function () {                 
                var myForm = $('#dataform');
                var isValid = null;
                if (myForm[0].checkValidity())
                {
                          isVAlid = 1;
                  }         
        });
   
        if (isVAlid==1) {
                uploadObj.startUpload();
            }
        });
});

---

Dann mal viel Erfolgt beim Nachbasteln!
Viele Grüße,
Andy

Hallo Coda und Community,

vielen Dank für die Anleitung.
Ich hab das alles soweit eingebunden, bekommen aber in der gesendete E-Mail folgenden Fehler ausgegeben:

Zitat:

---

move_uploaded_file(/files/uploads/ausschlussliste.txt) [function.move-uploaded-file]: failed to open stream: No such file or directory in /www/xxx/assets/php/upload.php on line 19Warning: move_uploaded_file() [function.move-uploaded-file]: Unable to move '/tmp/phpFTKTAN' to '/files/uploads/ausschlussliste.txt' in /www/xxx/files/mees-zacke/assets/php/upload.php on line 19["ausschlussliste.txt"]

---

Vielleicht hast du ja eine Ahnung an was das liegen könnte.

Viele Grüße
Flox