Bilder-Upload/Blob-Url

[Forumsgast]

Hallo,

ich beschäftige mich gerade mit den Bilder-Upload über ein contenteditable-div.

Ist es möglich von einer Blob-Url ("blob:http://..../3af95315-a0f1-4ef0-91e5-ad35f3ad2cbb") aus, wieder das richtige File zu erstellen?
Meine Versuche mit z. B: var file = new File([bloburl], "filename" ) sind kläglich gescheitert.

Oder sind die Blob-Urls nur für Previews und der gleichen gedacht?

Gruß
stiff

[Forumsgast]

Du suchst wahrscheinlich nach base64_decode.

[Forumsgast]

Hm, das weiß ich noch nicht.
Ich bin ja noch bei javascript.

            $file    = new File([$path], "filename", {type: 'image/png'} )

            $formData = new FormData();
            $formData.append('insertNewImage', $file);


            $maxFileSize    = 1000;
            $formData.append('maxFileSize', $maxFileSize);

            $.ajax({
                url: 'file_upload.ajax.php',
                type: 'post',
                data: $formData,
                contentType: false,
                processData: false,
                success: function($response)
                {
                    if ($response.length == 0)
                    {
                        alert('ok');
                    }

                    else
                    {
                        alert($response);
                    }

                },
                error: function ($request, status, error)
                {
                    alert("Status: " + $request.status + "\nFehler : " + error);
                }

            });

        });

var $path ist die Blob-Url.

Es wird zwar ein File weitergeleitet, aber das Bild ist leer.

[Forumsgast]

Ich geb's auf. 3 Tage und kein Ergebnis.
Ich werde das dann anders machen:

Sobald jemand über das Input-File-Element ein Bild auswählt, lade ich es hoch, packe das Bild in einen Zwischenordner und setzte im contenteditable-div einen Verweis auf das Bild.
Speichert der User den Artikel ab, verschiebe ich das Bild in den richtigen Ordner und ändere den Verweis im contenteditable-div.

Allerdings muss ich mir dann noch einen Workaround einfallen lassen, die Bilder aus dem Zwischenordner zu löschen, wenn jemand z. B. den Browser/Tab einfach geschlossen hat ohne den Artikel zu speichern.
Das war auch der Grund, warum ich die Bilder ursprünglich über die Blob-Url ins contenteditable-div zuerst einbinden und erst beim Abspeichern des Artikels die Bilder endgültig hochladen wollte.

[Forumsgast]

Willst du das Bild vor dem Upload bearbeiten, dann hast du ein base64 kodiertes Bild auf dem Server.
Wenn du das Bild nicht bearbeitest und einfach hochlädst, nach dem es im input File ausgewählt wurde liegt das Bild auf dem Server im Binärformat vor und du kannst es auf dem Server einfach speichern.

Was das jetzt mit deinem Div, ob content editable eingeschaltet ist oder nicht. zu tun hat ist mir nebelhaft.

Hast du nun ein Formular vorliegen oder etwas anderes?

Bitte zeige mal dein Code dazu und zwar komplett, da man sonst nur wieder raten muss.

[Forumsgast]

form.append("blob",blob, filename);

https://developer.mozilla.org/en-US/...ormData/append

Allerdings muss ich mir dann noch einen Workaround einfallen lassen, die Bilder aus dem Zwischenordner zu löschen, wenn jemand z. B. den Browser/Tab einfach geschlossen hat ohne den Artikel zu speichern.

lässt halt nen cron job laufen, der alte bilder in tmpUploadDir löscht.

[Forumsgast]

Hallo,

danke für die Antworten.
Alles werde ich wohl nicht posten können, da zu viel Code.
Es handelt sich hierbei um einen Editor (contenteditable div).

Hier wird beim Klick auf den entsprechenden Button in der Toolbar das File-Input Element eingeblendet:

        else if ($id == 'image_insertImage')
        {
            if ($('section.image').css('display') == 'none')
            {
                $('section.image').css({
                    display:    'block',
                    width:        '250px'
                });
                if (typeof($('section.image')[0].children[1]) == 'undefined')
                {
                    $('section.image').append('<input style="width: 240px; margin: 0 5px 5px 0;" type="file" id="insertNewImage" name="insertNewImage" />');
                }
            }
        }

Es wurde ein Bild ausgewählt, also soll das Bild angezeigt werden:

    $(document).on('change', '[name="insertNewImage"]', function(event) {

        $tmpPath = window.URL.createObjectURL($(this)[0].files[0]);
        document.execCommand('insertHTML', false, '<img src="' + $tmpPath + '" />');

        window.URL.revokeObjectURL($tmpPath);
        $(this).val('');
        $('section.wrapHidden:visible').hide('fast');

    });

Der Artikel wurde fertig bearbeitet, also neue Bilder hochladen und an die entsprechende Stelle verschieben:
Und das ist wohl der Teil, wo es klemmt.
Und was ich noch nicht probiert habe, evtl. gleich mehrere Bilder an PHP zum hochladen weiterleiten.

    $(document).on('submit', function(event) {

        event.preventDefault();

        $('#editor').find('img').each(function(event, $index) {

            $path = $($index).attr('src');

            console.log($index);
            console.log($path);

            $file    = new File([$path], "filename", {type: 'image/png'} );

            $formData = new FormData();
            $formData.append('insertNewImage', $file);

            $maxFileSize    = 1000;
            $formData.append('maxFileSize', $maxFileSize);

            $.ajax({
                url: 'file_upload.ajax.php',
                type: 'post',
                data: $formData,
                contentType: false,
                processData: false,
                success: function($response)
                {
                    if ($response.length == 0)
                    {
                        alert('ok');
                    }

                    else
                    {
                        alert($response);
                    }
                },
                error: function ($request, status, error)
                {
                    alert("Status: " + $request.status + "\nFehler : " + error);
                }
            });
        });

der PHP-Teil (ist aber noch nicht fertig)

$uploadDir    = '../../_upload/';
$uploadFile    = $uploadDir . 'test';


$arrFileType = array("image/png", "image/jpeg", "image/gif");

if (isset($_FILES['insertNewImage']))
{    
    $uploadDir    = '../../_upload/';
    $uploadFile    = $uploadDir . basename($_FILES['insertNewImage']['name']);

    if ($_FILES['insertNewImage']['error'])
    {
        echo 'Fehler beim Upload: ' . $_FILES['insertNewImage']['error'];
    }

    elseif ($_FILES['insertNewImage']['size'] > $_POST['maxFileSize'])
    {
        echo 'Die Datei ist ' . ($_FILES['insertNewImage']['size'] - $_POST['maxFileSize']) . 'kb zu groß';
    }

    elseif (!in_array($_FILES['insertNewImage']['type'] , $arrFileType))
    {
        echo 'Das Format ' . $_FILES['insertNewImage']['type'] . ' ist nicht zulässig!';
    }

    elseif (!move_uploaded_file($_FILES['insertNewImage']['tmp_name'], $uploadFile))
    {
        echo 'Upload fehlgeschlagen!';
    }
}

else
{
    echo 'Es wurde keine Datei übergeben!';
} 

[Forumsgast]

Jetzt hab ich noch eine andere Idee:

Wenn jemand ein neues Bild auswählt, erstelle ich ein Array und lasse das Bild ganz normal über die Blob-Url anzeigen.
Bevor der Artikel dann gespeichert wird, gehe ich das Array durch und hol mir die Bilder zum hochladen.

Ich denke, das ist am einfachsten.

[Forumsgast]

Ich bin's nochmal.

Mir war ja klar, das die Blob-Url's nur solange existieren wie der Browser bzw. der Tab geöffnet ist.
Ich wusste aber nicht, das sie auch weg sind, wenn Falscheingaben des Users mittels PHP geprüft und abgefangen werden und dadurch die Seite erneut geladen werden muss.
Dann bringen doch die Blob-Url's für meinen Fall gar nichts, dann kann ich ja immer die ausgewählten Bilder direkt hochladen (ob der entsprechende Datensatz nun in der DB ankommt oder nicht) und mit einem CronJob den tmp Ordner bereinigen (alle Bilder vom Vortag löschen oder so), oder das Script selbst übernimmt die Aufgabe.

Alles Andere ist nur eine Verbiegung und Rumstückelei.

Mir ging es ja darum, den Server nicht unnötig mit Daten zu belasten und eine 100%ige Synchronität zwischen hochgeladenen Dateien und der Datenbank zu gewährleisten.
Aber ich glaube, das ist gar nicht möglich, es sei denn, ich würde die Dateien direkt in der DB ablegen, was ich aber nicht wollte.

[Forumsgast]

Warum wird die Seite nach einer Prüfung neu geladen? AJAX ist ja dafür da, dass die Seite nicht neu geladen werden muss.

[Forumsgast]

Weil ich den Editor/contenteditable-Div (mit Bilderupload) als Plugin gebaut habe, damit ich ihn immer da einsetzen kann, wo ich ihn brauche.
In diesem Fall ist er ein Bestandteil eines Formulars mit weiteren Eingabefeldern.
Da ich also beim Abspeichern des Formulars nicht auf das File-Input-Feld ($_FILES) zurückgreifen kann, die Bilder befinden sich ja via Url im contenteditable-Div, sollte der ajax-Teil dafür sorgen, die Bilder hochzuladen.

[Forumsgast]

Warum nicht das Formular mit AJAX absenden?

[Forumsgast]

Hm, da könnte ich ja nochmal drüber nachdenken

[Forumsgast]

Da ich mich mit Ajax noch nicht so gut auskenne, ergibt sich für mich folgende Frage:

Wenn ich ein Formular mit Ajax nachlade, kann das nachgeladene Formular dann auf Variablen der Seite zurückgreifen (als wenn das Formular von Anfang an in der Seite integriert wäre)? Bei mir wird immer null angezeigt.
Oder muss eine Variable erst an JavaScript übergeben werden und JavaScript via Ajax dann an das nachzuladende Formular?

[Forumsgast]

Eine Seite hat keine Variablen. Es gibt PHP-Variablen und es gibt JavaScript-Variablen. PHP kann auf PHP-Variablen zugreifen, JavaScript auf JavaScript-Variablen.

Und üblicherweise wird kein Formular nachgeladen, sondern nur an den Server geschickt und der Server liefert dann ein Ergebnis.