Zend FR

Consultez la FAQ sur le ZF avant de poster une question

Vous n'êtes pas identifié.

#1 28-06-2010 12:25:01

phpman
Membre
Date d'inscription: 20-03-2008
Messages: 138

[Zend_Form]Image upload Comment voir l'image sur le formulaire d'édit

Bonjour,

J'ai un formulaire contenant un input pour uploader des images, je voudrais pouvoir afficher l'image uploadée à coté de l'input lorsque j'édite mon objet, je cherche depuis longtemps et je vois pas comment faire, auriez vous une idée ?

Merci

Dernière modification par sebondus (28-06-2010 12:25:36)

Hors ligne

 

#2 28-06-2010 13:34:48

sekaijin
Membre
Date d'inscription: 17-08-2007
Messages: 1137

Re: [Zend_Form]Image upload Comment voir l'image sur le formulaire d'édit

je ne saisis pas bien
mais si tu veux afficher ton image après l'avoir uploadé
il tez faut côté serveur la stocker dans un dossier visible du Web (accessible par http:///moserveur/chemin/monImage)
et là tu fais comme pour n'importe quelle image.

sinon tu la mets côté serveur dans un dossier protégé mais alors il te faut une action qui te retourne ton image (http://monserveur/controller/get-image/id/monIdDeMonImage) cette action n'a pas de vue il faut désactiver le viewrenderer ajouter les header pour le mime type et ouvrir le fichioer image et envoyer son contenu au client
dans la page tu t'en sert comme pour toutes les images.


enfin si tu veux afficher ton image dans ton formulaire lorsque le client clique sur parcourir avant de soumettre le formulaire c'est plus compliquer.

il te faut un javascript qui lorsque le client à choisit une image envoie celle-ci par XmlHttpRequest au serveur à un controlleur qui va la placé dans un dossier temporaire et retourner une url comme celle du cas précédent. à la réception de la réponse le client ajout l'image avec l'url reçu dans la page.
le navigateur vas alors invoquer le controlleur qui envoie l'image (comme pour le cas précédent)

lors que client soumet le formulaire le contrôleur qui reçois la soumission nettoie le dossier temporaire


enfin comme le processus peut être interrompu n'importe quand il risque de rester des image dans le dossier temps
il faut donc régulièrement faire le ménage.

A+JYT

Hors ligne

 

#3 28-06-2010 14:00:52

phpman
Membre
Date d'inscription: 20-03-2008
Messages: 138

Re: [Zend_Form]Image upload Comment voir l'image sur le formulaire d'édit

Non j'arrive bien à l'uploader, j'ai aucun soucis avec ça, je veux que lorsque je suis en édition (donc l'image a déja été uploadée) l'image s'affiche à coté de l'input file, sinon je sais pas si une image a déjà été uploadée ou non.

Hors ligne

 

#4 29-06-2010 09:38:51

phpman
Membre
Date d'inscription: 20-03-2008
Messages: 138

Re: [Zend_Form]Image upload Comment voir l'image sur le formulaire d'édit

Voila ce que je voudrais :

http://www.popucode.com/wp-content/uploads/2009/09/Astrology-Garden-Edit-Profile.png

Je voudrais faire ça en surchangeant Zend_Form_Element_File, pour ne pas avoir a creer un element pour l'input et un élément pour l'image.

Et je voudrais simplement afficher l'image à droite de l'input après le bouton "parcourir"

Quelqu'un saurait comment faire ça proprement ?

Hors ligne

 

#5 29-06-2010 10:01:11

shadypierre
Membre
Date d'inscription: 24-03-2010
Messages: 617

Re: [Zend_Form]Image upload Comment voir l'image sur le formulaire d'édit

Peut etre que je vais faire une réponse bete mais...
Pourquoi ne pas faire un simple test sur ta base, si le champs image est null tu n'affiche rien, sinon tu fais un simple echo "<img src='' alt='' />";
Non?

Hors ligne

 

#6 29-06-2010 12:10:23

phpman
Membre
Date d'inscription: 20-03-2008
Messages: 138

Re: [Zend_Form]Image upload Comment voir l'image sur le formulaire d'édit

...

Je sais comment afficher une image dans du code html big_smile
Je veux integrer ça dans le composant Zend_Form_Element_File, et que le rendu soit :

INPUT puis IMAGE

Hors ligne

 

#7 29-06-2010 13:23:44

shadypierre
Membre
Date d'inscription: 24-03-2010
Messages: 617

Re: [Zend_Form]Image upload Comment voir l'image sur le formulaire d'édit

Je me doute bien que tu sais faire je comprend simplement pas pourquoi tu te prend la tête ^^

Mais si tu trouve hésite pas à nous faire partager big_smile

Hors ligne

 

#8 29-06-2010 13:38:52

phpman
Membre
Date d'inscription: 20-03-2008
Messages: 138

Re: [Zend_Form]Image upload Comment voir l'image sur le formulaire d'édit

Simplement parceque j'affiche mon form avec un echo $form, et que je veux que ça m'affiche mon image à coté de l'input ...

Hors ligne

 

#9 29-06-2010 17:08:26

nORKy
Membre
Date d'inscription: 06-03-2008
Messages: 1098

Re: [Zend_Form]Image upload Comment voir l'image sur le formulaire d'édit

utilise le décorateur htmlTag en plus de File


----
Gruiiik !

Hors ligne

 

#10 02-07-2010 09:54:42

phpman
Membre
Date d'inscription: 20-03-2008
Messages: 138

Re: [Zend_Form]Image upload Comment voir l'image sur le formulaire d'édit

Je comprends vraiment quedale aux décorators,
J'ai ça pour mon inputFile :

$element->setDecorators(array(
                    'File',
                    'Description',
                    'Errors',
                    array('Label'),
                    array(array('row'=>'HtmlTag'),array('tag'=>'div', 'class'=>'form_row')),
                ));

Comment je rajoute ce tag <img en remplissant le src ?

Hors ligne

 

#11 05-07-2010 12:52:35

phpman
Membre
Date d'inscription: 20-03-2008
Messages: 138

Re: [Zend_Form]Image upload Comment voir l'image sur le formulaire d'édit

J'ai reussi mais le probleme est que la source de l'image dépend de l'objet à éditer, je ne parviens pas à la récupérer :

Les décorateurs de mon element file :

Code:

$element->setDecorators(array(
                    'File',
                    'Description',
                    'Errors',
                    array('Label'),
                    array(array('row'=>'HtmlTag'),array('tag'=>'div', 'class'=>'form_row')),
                    array(array('ImageTag' => 'HtmlTag'), array('tag'=>'img', 'placement'=>'append', 'src'=>'/images/add1.gif'))
                ));

Là la source de l'image est en dur, mais j'aimerai qu'elle soit dynamiquement settée quand je fais $form->populate($data), avec src = $data->image

Quelqu'un sait comment faire ça ?

Hors ligne

 

#12 03-06-2011 14:06:12

gege35
Nouveau membre
Date d'inscription: 03-06-2011
Messages: 1

Re: [Zend_Form]Image upload Comment voir l'image sur le formulaire d'édit

Bonjour,
Débutant sous Zend voila plusieurs jours que je cherche a faire exactement ce que tu voulais faire sebondus.
Après avoir lu vos différents posts j'en suis arriver au même point que toi ou mon nom d'image n'est pas dynamique. As tu trouvé une solution a ton problème??

Si quelqu'un d'autre a une idée je suis preneur merci beaucoup par avance.

Hors ligne

 

#13 14-06-2011 18:35:29

fhebert
Membre
Date d'inscription: 30-11-2010
Messages: 20

Re: [Zend_Form]Image upload Comment voir l'image sur le formulaire d'édit

Bonjour,

de mon côté j'ai créé un décorateur "bidouille".
Pour passer le nom du fichier au décorateur via l'élément j'utilise la surcharge d'attributs de Zend_Form_Element.
Ce mécanisme est à l'origine prévu pour faire quelque chose comme :

Code:

$element->setAttribute('class', 'maclasse');

Si on accepte d'avoir des attributs HTML non valides dans l'input file, ça passe.

En voici le code :

Code:

[lang=php]
<?php
/** 
 * Add an img tag next to the file input if the 
 * associated file is an image.
 * 
 * One drawback here : we can't get the file's path 
 * from Zend_Form_Element_File::getValue method; so we are 
 * using a dirty hack to pass this value around, getting it from 
 * a element's custom attribute. But this attribute is in turn added to
 * the input HTML tag (namely filepath and fileurl)! You will be warned.
 * 
 * @author fhebert
 * @uses Local_View_Helper_HtmlImg
 * @uses Zend_Form_Element_File::getAttrib()
 * @example <pre>
 *       $this->addElement('file', 'frontCover', array(
 *                'validators' => array(
 *                    $coversValidators
 *                ),
 *                'required' => true,
 *                'filters' => array(
 *                    $fileFilters
 *                ),
 *                'decorators' => array(
 *                    'File',
 *                    array(
 *                        'decorator' => 'File_Thumbnail',
 *                        'options' => array(
 *                             'width' => '90',
 *                            'alt' => 'Prévisualisation de l\'image téléchargée.',
 *                            'class' => 'frontCover-preview'
 *                        )
 *                    ),
 *                    'Errors',
 *                    array(
 *                        'decorator' => 'Description',
 *                        'options' => array(
 *                             'escape' => false,
 *                             'tag' => 'p',
 *                             'class' => 'description'  
 *                        )
 *                    ),
 *                    array(
 *                        'decorator' => 'HtmlTag',
 *                        'options' => array(
 *                              'tag' => 'dd',
 *                              'id'  => 'frontCover-element'
 *                        )
 *                    ),
 *                    array(
 *                        'decorator' => 'Label',
 *                        'options' => array(
 *                             'requiredSuffix' => '*',
 *                             'tag' => 'dt'
 *                        )
 *                    )
 *                ),
 *                'destination' =>  $ehessConfiguration['covers']['upload']['destinationPath']
 *        ));
 * </pre> 
 */
class Local_Form_Decorator_File_Thumbnail extends Zend_Form_Decorator_Abstract
{
    /**
     * Decorator options
     * @see Zend_Form_Decorator_Abstract::$_options
     */
    /**
     * The width img tag's attribute value
     * @var integer
     *
     * width = null;
     *
     * The height img tag's attribute value
     * @var integer
     *    
     * height = null;
     *
     * The alt img tag's attribute value
     * @var string
     *
     * alt = null;
     *
     * The src img tag's attribute value
     * @var string
     *
     * src = null;
     **/
    
    public function render($content)
    {
        
        $element = $this->getElement();
        if (!$element instanceof Zend_Form_Element_File) {
            return $content;
        }
        
        $view = $element->getView();
        if (null === $view) {
            return $content;
        }
        
        $src = $element->getAttrib('fileURL');
        if (empty($src)) {
            return $content;
        }
        $filePath = $element->getAttrib('filePath');
        if (empty($filePath)) {
            $filePath = $src;
        }
        
        $validate = new Zend_Validate_File_IsImage();
        if (!$validate->isValid($filePath)) {
            return $content;
        }
        
        $attribs = $this->getOptions();
        $attribs['src'] = $src;
        
        switch ($this->getPlacement()) {
            case self::PREPEND:
                return $view->htmlImg($attribs) . $this->getSeparator() . $content; 
                break;
            
            case self::APPEND:
                return $content . $this->getSeparator() . $view->htmlImg($attribs); 
                break;
            
            default:
                break;
        }
        
    }
}
?>

et le code de Local_View_Helper_HtmlImg :

Code:

[lang=php]
<?php
class Local_View_Helper_HtmlImg extends Zend_View_Helper_HtmlElement
{
    public function htmlImg($src = null, $alt = null, $width = null, 
                            $height = null, $title = null, $class = null, 
                            $prependServerUrl = false
    ) {
        if (empty($src)) {
            return '';    
        }
        
        if (is_array($src)) {
            $attribs = $src;
            if (!is_null($alt)) {
                $prependServerUrl = $alt;
            } else {
                if (isset($attribs['prependServerUrl'])) {
                    $prependServerUrl = $attribs['prependServerUrl'];
                }
            }
            unset($attribs['prependServerUrl']);
        } else {
            $attribs = array_combine(
                            array(
                                'src', 
                                'alt', 
                                'width', 
                                'height', 
                                'title', 
                                'class',
                                'prependServerUrl'
                            ), 
                            func_get_args()
            );
            unset($attribs['prependServerUrl']);
        }
        
        $attribs = array_merge(
            array(
                'src' => null, 
                'alt' => '', 
                'width' => 0, 
                'height' => 0,
            ), 
            $attribs
        );
        
        $src = $attribs['src'];
        
        if (empty($src) || !is_string($src)) {
            return '';
        }
        /**
         * non empty arrays return 1, empty 0
         * @see %Length entity in  XHTML DTD <p>
         * http://www.w3.org/TR/xhtml1/dtds.html#dtdentry_xhtml1-strict.dtd_Length
         * </p>
         */
        $width = $attribs['width'];
        if (intval($width) === 0 || intval($width) === 1 
            || ($widthValue = (string)intval($width)) 
            && (strlen($widthValue) !== strlen($width))
            && (substr($width, -1) !== '%')
        ) {
            unset($attribs['width']);
        }
        
        $height = $attribs['height'];
        if (intval($height) === 0 || intval($height) === 1 
            || ($heightValue = (string)intval($height)) 
            && (strlen($heightValue) !== strlen($height))
            && (substr($height, -1) !== '%')
        ) {
            unset($attribs['height']);
        }
        
        
        if (!substr($src, 0, 1) === '/') {
            $src = $this->view->baseUrl($src);
        }
            
        if ($prependServerUrl) {
            $src = $this->view->serverUrl($src);         
        }
        
        $attribs['src'] = $src;
        
        return '<img ' . $this->_htmlAttribs($attribs) . ' ' . $this->getClosingBracket();
    }
}

Dans le contrôleur on fait quelque chose comme :

Code:

[lang=php]
$form->getSubForm('addAuthor')->getElement('portrait')->filePath = $filePath; 
$form->getSubForm('addAuthor')->getElement('portrait')->fileURL = $fileURL;

Si quelqu'un connait une meilleure méthode pour passer les chemins de l'image je suis preneur !

Frédéric

Dernière modification par fhebert (14-06-2011 18:46:20)

Hors ligne

 

#14 10-07-2011 00:25:38

Momal
Membre
Date d'inscription: 13-06-2011
Messages: 22

Re: [Zend_Form]Image upload Comment voir l'image sur le formulaire d'édit

Bonjours à tous,

pour afficher l'image juste après l'édition, je vois 2 façons de faire:

- la 1ère est d'utiliser une applet Java qui s'exécute coté client, c'était la solution utilisé chez Facebook il y'a de celà une année: une petite démo par ici ==> http://uploadease.com/demo.php (seule défaut , il faut que le client télécharge une JRE sur son poste locale).
- la seconde est d'utiliser un composant JQuery très efficace ==> http://aquantum-demo.appspot.com/file-upload qui n'a pas cette contrainte d'avoir à télécharger tous ces "extras"

Ce ne sont pas des façons de faire typiquement "ZF" mais le framework est suffisamment flexible pour permettre d'intégrer facilement tous ces composants.

Bon courage,

Hors ligne

 

Pied de page des forums

Propulsé par PunBB
© Copyright 2002–2005 Rickard Andersson
Traduction par punbb.fr

Graphisme réalisé par l'agence Rodolphe Eveilleau
Développement par Kitpages