JSON string wordt getoond na integratie van jQuery file upload in CakePHP

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Sam Clauw

Sam Clauw

31/05/2015 10:38:25
Quote Anchor link
Ik ben laatst op zoek gegaan naar een goede file upload module en ben uiteindelijk bij jQuery file upload (https://github.com/blueimp/jQuery-File-Upload) terecht gekomen. Het ziet er een degelijke file upload uit en maakt gebruik van Twitter Bootstrap, hetgeen ik ook gebruik voor m'n eigen CMS systeempje.

De integratie van jQuery file upload is m'n CMS systeem is zo goed als rond: de upload werkt en wordt naar een zelfbepaalde map weggeschreven. Het gaat echter fout wanneer ik de upgeloadde foto's in een lijst onder de knoppen wil tonen. De JSON string die de foto's ophaalt wordt namelijk geprint in plaats van achterliggend z'n ding te doen:

Quote:
{"files":[{"name":"foto1.jpg","size":221882,"url":"D:\\Websites\\Optiek Cardoen\\05 - Cake\\app\\webroot\\img\\outlets\\6\\foto1.jpg","thumbUrl":"D:\\Websites\\Optiek Cardoen\\05 - Cake\\app\\webroot\\img\\outlets\\6\\thumb\/foto1.jpg","deleteUrl":"http:\/\/cake.optiekcardoen.be\/app\/webroot\/index.php?file=foto1.jpg","deleteType":"DELETE"},{"name":"foto2.jpg","size":184839,"url":"D:\\Websites\\Optiek Cardoen\\05 - Cake\\app\\webroot\\img\\outlets\\6\\foto2.jpg","thumbUrl":"D:\\Websites\\Optiek Cardoen\\05 - Cake\\app\\webroot\\img\\outlets\\6\\thumb\/foto2.jpg","deleteUrl":"http:\/\/cake.optiekcardoen.be\/app\/webroot\/index.php?file=foto2.jpg","deleteType":"DELETE"},{"name":"foto3 (1).jpg","size":171300,"url":"D:\\Websites\\Optiek Cardoen\\05 - Cake\\app\\webroot\\img\\outlets\\6\\foto3%20%281%29.jpg","thumbUrl":"D:\\Websites\\Optiek Cardoen\\05 - Cake\\app\\webroot\\img\\outlets\\6\\thumb\/foto3%20%281%29.jpg","deleteUrl":"http:\/\/cake.optiekcardoen.be\/app\/webroot\/index.php?file=foto3%20%281%29.jpg","deleteType":"DELETE"},{"name":"foto3.jpg","size":171300,"url":"D:\\Websites\\Optiek Cardoen\\05 - Cake\\app\\webroot\\img\\outlets\\6\\foto3.jpg","thumbUrl":"D:\\Websites\\Optiek Cardoen\\05 - Cake\\app\\webroot\\img\\outlets\\6\\thumb\/foto3.jpg","deleteUrl":"http:\/\/cake.optiekcardoen.be\/app\/webroot\/index.php?file=foto3.jpg","deleteType":"DELETE"},{"name":"foto4.jpg","size":222763,"url":"D:\\Websites\\Optiek Cardoen\\05 - Cake\\app\\webroot\\img\\outlets\\6\\foto4.jpg","thumbUrl":"D:\\Websites\\Optiek Cardoen\\05 - Cake\\app\\webroot\\img\\outlets\\6\\thumb\/foto4.jpg","deleteUrl":"http:\/\/cake.optiekcardoen.be\/app\/webroot\/index.php?file=foto4.jpg","deleteType":"DELETE"}]}


Is er iemand die een idee heeft hoe dit te verhinderen is?

Hier is de controller code binnen OutletPhotosController.php:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
public function add()
    {

        App::import('Vendor', 'CoasterCms.UploadHandler', array('file' => 'jQueryFileUpload' . DS . 'UploadHandler.php'));
        App::import('Vendor', 'CoasterCms.CustomUploadHandler', array('file' => 'jQueryFileUpload' . DS . 'CustomUploadHandler.php'));
        
        $options = array(
            // foto's naar onderstaande map schrijven. Als map niet bestaat wordt ze automatisch aangemaakt
            'upload_dir' => WWW_ROOT . 'img' . DS . 'outlets' . DS . $this->request->params['named']['outlet_id'] . DS,
            // pad waar de foto's staan (JSON kijkt naar deze url om de upgeloade foto's in te laden
            'upload_url' => WWW_ROOT . 'img' . DS . 'outlets' . DS . $this->request->params['named']['outlet_id'] . DS,
            'accept_file_types' => '/\.(gif|jpe?g|png)$/i',
            'image_versions' => array(
                'thumb' => array(
                    'max_width' => 20,
                    'max_height' => 20,
                    'crop' => true
                )
            )
        );


        $upload_handler = new CustomUploadHandler($options);
}

?>


En dan de simpele initialisatie van het script in main.js:

<script>
$(function () {
'use strict';

// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({

});
});
</script>
 
PHP hulp

PHP hulp

24/12/2024 14:20:42
 
Thomas van den Heuvel

Thomas van den Heuvel

31/05/2015 11:51:18
Quote Anchor link
Waarschijnlijk bestaat er binnen je applicatie verwarring over het terug te ontvangen formaat (dataType?).

Ofwel dat, ofwel de verzendende kant (die de JSON serveert) verstuurt de verkeerde Content-Type header mee (terug), zodat de data verkeerd geinterpreteerd wordt.

Zoiets.

Dat is iig het eerste wat ik zou controleren.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.