Autor Zpráva
Hitman
Profil
Dobrý den,

snažím se použít script pro upload obrázků přes TinyMCE. Samotný upload už mám vyřešený - obrázek se do TinyMCE vloží, nahraje na server. Potřebuji ale nějakým způsobem vracet do TinyMCE url obrázku který jsem nahrál. Tohle byl vzorový kód pro zpracování:


$accepted_origins = array("https://localhost", "https://mojeulr.cz");

  $imageFolder = "https://mojeurl.cz/test/";

  reset ($_FILES);
  $temp = current($_FILES);
  if (is_uploaded_file($temp['tmp_name'])){
    if (isset($_SERVER['HTTP_ORIGIN'])) {
      // same-origin requests won't set an origin. If the origin is set, it must be valid.
      if (in_array($_SERVER['HTTP_ORIGIN'], $accepted_origins)) {
        header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
      } else {
        header("HTTP/1.1 403 Origin Denied");
        return;
      }
    }


    // Sanitize input
    if (preg_match("/([^\w\s\d\-_~,;:\[\]\(\).])|([\.]{2,})/", $temp['name'])) {
        header("HTTP/1.1 400 Invalid file name.");
        return;
    }

    // Verify extension
    if (!in_array(strtolower(pathinfo($temp['name'], PATHINFO_EXTENSION)), array("gif", "jpg", "png"))) {
        header("HTTP/1.1 400 Invalid extension.");
        return;
    }

    // Accept upload if there was no origin, or if it is an accepted origin
    $filetowrite = $imageFolder . $temp['name'];
    move_uploaded_file($temp['tmp_name'], $filetowrite);

    // Respond to the successful upload with JSON.
    // Use a location key to specify the path to the saved image resource.
    // { location : '/your/uploaded/image/file'}
    echo json_encode(array('location' => $filetowrite));
  } else {
    // Notify editor that the upload failed
    header("HTTP/1.1 500 Server Error");
  }

Předpokládal jsem že pro odpověď stačí pouze:

echo json_encode(array('location' => $filetowrite));

S tím že v $filetowrite mám samozdřejmě uloženou adresu obrázku. Bohužel nefunguje. Zkoušel jsem i:

header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
echo json_encode(array('location' => $filetowrite));


Které řádky z uvedeného scriptu slouží pro JSON odpověď? Resp. v čem může být ještě problém? Aktuálně se mi do src obrázku vloží "data:image/jpeg;base64,data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4Q/+RXhpZgAATU0AKgAAAAgACwEPAAIAAAA.........atd."

Díky
Keeehi
Profil
Hitman:
Nejdříve je potřeba zjistit, zda se script vůbec vykonává a zda se dostane úspěšně až na konec. Ve vývojářských nástrojích prohlížeče si zobraz kartu se sítí, tam najdi požadavek který upload vytvořil a zobraz si odpověď. Jestli je tam ta json odpověď se správnou adresou, pak je na straně serveru vše v pořádku a problém bude s konfigurací TinyMCE. Pokud tam ale něco bude špatně, musíš nejprve spravit serverovou část.
Kajman
Profil
Před echo zkuste dát
header('Content-Type: application/json');
pak by i v těch síťových požadavcích měla být odpověď parsovaná jako json.
Hitman
Profil
Tohle byl původní kód co jsem někde našel. Aktuálně mám jen jednoduchou verzi.


Po přidání

 header('Content-Type: application/json');

v debuggeru je uvedeno:

SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data at line 1 column 20 of the JSON data

A obsah odpovědi: {"location":"..\/data\/clanky\/ElbXzkhblobid1526455542650.jpg"} Obrázek nahrán.


Pokud odstraním řádek co psal Kajman, tak chyba v debuggeru zmizí. Nicméně v src po uložení článku je stále nesmyslný, velmi dlouhý řetězec...Pokud v TinyMCE kliknu na zdrojový kód je tam v src "blob:mojeurl.cz/b6a77f51-0d41-4037-844c-c2b29665ef49". To by se předpokládám po nahrátí a odpovědi přes JSON mělo změnit na tu cílovou adresu, ne?

Obsah odpovědi je: {"location":"..\/data\/clanky\/flhdarqblobid1526457738964.jpg"} Obrázek nahrán.

Čili to vypadá že je vše v pořádku a problém bude v tom tinyMCE. Tam mám kód:

 tinymce.init({
                        selector: "textarea[name=obsah]",
                        plugins: [
                                        "advlist autolink lists link image charmap print preview anchor",
                                        "searchreplace visualblocks code fullscreen",
                                        "insertdatetime media table contextmenu paste"
                        ],
                        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image code",
                        entities: "160,nbsp",
        
        file_picker_types: 'image',
        images_upload_url: 'https://mojeurl.cz/pomocne/nahravani-obrazku.php',
        images_upload_base_path: 'https://mojeurl.cz/data/clanky/',
        images_upload_credentials: true,
        automatic_uploads: true,
        file_picker_callback: function(cb, value, meta) {
            var input = document.createElement('input');
 
            input.setAttribute('type', 'file');
            input.setAttribute('accept', 'image/*');
 
            input.onchange = function() {
                var file = this.files[0],
                    reader = new FileReader();
 
                reader.readAsDataURL(file);
 
                reader.onload = function () {
                    var blobCache =  tinymce.activeEditor.editorUpload.blobCache,
                        blobInfo = blobCache.create('blobid' + (new Date()).getTime(), file, reader.result);
 
                    blobCache.add(blobInfo);
 
                    cb(blobInfo.blobUri(), { title: file.name });
                };
            };
 
            input.click();
        }
    });
Kajman
Profil
A proč tam máte to
Obrázek nahrán
? Tím to rozbijete.
Hitman
Profil
Aha, myslel jsem že JSON je jedna věc a nějaké další výstupy přímo "na obrazovku" věc jiná. Zase taková blbost....

Díky, to byl celý problém :-)

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: