bnbc/upload-bundle

Symfony Upload Ajax Bundle

Bundle d'upload pour Symfony 2 et 3

Ce bundle vous permettra d'ajouter des champs d'upload en ajax dans vos formulaires. Basé sur le plugin d'upload blueimp/jQuery-File-Upload, _(*1)

Installation via composer

Ajoutez le require à votre fichier composer.json et lancer la commande composer update, _(*2)

# composer.json

{
    // ...
    require: {
        // ...
        "bnbc/upload-bundle": "dev-master"
    }
}

Configuration

Ajoutez le bundle à votre kernel, _(*3)

# app/AppKernel.php

// in AppKernel::registerBundles()
$bundles = array(
    // ...
    new Bnbc\UploadBundle\BnbcUploadBundle(),
    // ...
);

Si cela n'a pas déjà été fais par composer, copiez les assets situés dans le dossier /vendor/bnbc/upload-bundle/Bnbc/UploadBundle/Resources/public/js dans le dossier /web/bundles/bnbcupload/js et ajoutez les fichiers javascripts à votre template, supprimez la ligne avec jQuery si vous l'avez déjà (requiert jQuery 1.6+)., _(*4)

<script src="{{ asset('bundles/bnbcupload/js/1_jquery.min.js') }}"></script>
<script src="{{ asset('bundles/bnbcupload/js/2_jquery.ui.widget.js') }}"></script>
<script src="{{ asset('bundles/bnbcupload/js/3_jquery.iframe-transport.js') }}"></script>
<script src="{{ asset('bundles/bnbcupload/js/4_jquery.fileupload.js') }}"></script>
<script src="{{ asset('bundles/bnbcupload/js/5_init.js') }}"></script>

Ajouter la route, _(*5)

# app/config/routing.yml

bnbc_upload:
    resource: "@BnbcUploadBundle/Controller/"
    type:     annotation
    prefix:   /upload

Ajouter la ressource pour le type de champs bnbc_ajax_file, _(*6)

# app/config/config.yml

twig:
    form_themes:
            - BnbcUploadBundle:Form:fields.html.twig

Options de configuration globale (facultatives)

uniqid

Conversion de tous les noms de fichiers en uniqid
Défaut : false, _(*7)

max_file_size

Taille de fichier max en octets
Défaut : null (la limite dépendra alors des variables upload_max_filesize et post_max_size de votre php.ini)
Exemple : 10 * 1024 * 1024 = 10485760 représente (10 Mo), _(*8)

accept_file_types

Expression régulière pour gérer les fichiers ou types de fichiers acceptés
Défaut : '/.+$/i' (Autorise tous les fichiers)
Exemple : '/\.(gif|jpe?g|png)$/i' (Autorise uniquement les fichiers images gif, jpeg et png), _(*9)

upload_folder

Dossier de téléversement des fichiers par rapport à la racine du dossier web
Défaut : 'uploads'
Exemple : 'uploads/test' (Il est possible d'indiquer des sous-dossiers, ils se créeront automatiquement), _(*10)

image_versions

Génération de formats supplémentaires, 3 formats possibles: thumbnail, medium, large. Le paramètre crop permet de recadrer l'image à la taille indiquée
Défaut : null
Exemple :, _(*11)

thumbnail:
    max_width: 100
    max_height: 100
    crop: true
medium:
    max_width: 300
    max_height: 300
    crop: false
large:
    max_width: 1024
    max_height: 768
    crop: false

Exemple complet

# app/config/config.yml

bnbc_upload:
    uniqid: true
    max_file_size: 10485760
    accept_file_types: '/\.(gif|jpe?g|png)$/i'
    upload_folder: 'uploads/test'
    image_versions:
        thumbnail:
            max_width: 100
            max_height: 100
            crop: true
        medium:
            max_width: 300
            max_height: 300
            crop: false
        large:
            max_width: 1024
            max_height: 768
            crop: false

Utilisation

Ajouter un champs de type bnbc_ajax_file à votre formulaire, _(*12)

# Symfony 2
$formBuilder->add('myfield', 'bnbc_ajax_file');

# Symfony 3
$formBuilder->add('myfield', AjaxfileType::class);

Options de configuration du champs fichier (facultatives)

required

Champs requis ou non
Défaut : false, _(*13)

progressBar

Affichage d'une barre de progression (calque qui voit sa largeur passer de 0 à 100%)
Défaut : false, _(*14)

progressBarClass

Classe(s) css pour la barre de progression (séparé par des espaces)
Défaut : bnbc-ajax-file-progress, _(*15)

progressBarPosition

Position de la barre de progression, toutes les fonctions d'insertion jQuery sont autorisées
Défaut : append, _(*16)

progressElement

Nom de l'élément auquel on assigne un attribut de progression qui va de 0 à 100 : data-progress
Défaut : null, _(*17)

progressText

Nom de l'élément dans lequel le pourcentage de progression va être mis en texte
Défaut : null, _(*18)

multiple

Téléversement de plusieurs fichiers en même temps
Défaut : false, _(*19)

label

Label pour le bouton d'upload si vous souhaitez le personnaliser en css Défaut : null, _(*20)

autoUpload

Le(s) fichier(s) se téléverse(nt) automatiquement après avoir été ajouté, si false un bouton de soumission apparait.
Défaut : true, _(*21)

dropZone

Affichage d'une zone de glisser/déposer
Défaut : true, _(*22)

dropZoneText

Texte la zone de glisser/déposer
Défaut : 'Drop file(s) here', _(*23)

callbackFunction

Nom d'une fonction javascript à appeler une fois le téléversement terminé
Défaut : null
Exemple : afterUpload
Utilisation dans un template : var afterUpload = function(files){}; où files est un tableau des fichiers téléversés, _(*24)

formData

Vous pouvez redéfinir les options de configuration globale pour chaque champs dans le paramètre formData
Défaut : ne pas mettre le paramètre, _(*25)

# Symfony 2
$formBuilder->add('myfield', 'bnbc_ajax_file',
    array(
        'required'            => false,
        'progressBar'         => false,
        'progressBarClass'    => 'bnbc-ajax-file-progress',
        'progressBarPosition' => 'append',
        'multiple'            => false,
        'label'               => null,
        'autoUpload'          => true,
        'dropZone'            => true,
        'dropZoneText'        => 'Drop file(s) here',
        'callbackFunction'    => null,
        'formData'            => array(
            'uniqid'            => false,
            'max_file_size'     => 5 * 1024 * 1024,
            'accept_file_types' => null,
            'upload_folder'     => 'test',
            'image_versions'    => array(
                'thumbnail' => array(
                    'max_width'  => 100,
                    'max_height' => 100,
                    'crop'       => true
                )
            )
        )
    )
);

# Symfony 3
$formBuilder->add('myfield', AjaxfileType::class,
    array(
        'required'            => false,
        'progressBar'         => false,
        'progressBarClass'    => 'bnbc-ajax-file-progress',
        ...        
    )
);

Exemple de code css pour personnaliser le bouton "Parcourir"

A venir..., _(*26)

Exemple de traitement du fichier téléversé (pas optimisé et pas forcément adapté à tous)

    /**
     * Creates a new entity.
     *
     * @Route("/new", name="admin_entity_new")
     * @Method({"GET", "POST"})
     */
    public function newAction(Request $request)
    {
        $entity = new Entity();
        $form = $this->createForm('AdminBundle\Form\EntityType', $entity);
        $form->handleRequest($request);

        if ($form->isSubmitted() && $form->isValid()) {
            $em = $this->getDoctrine()->getManager();
            $em->persist($entity);
            $em->flush($entity);

            if($entity->getPhoto()){
                $entity->setPhoto($this->_movePhoto($entity));
            }            
            $em->flush($entity);

            return $this->redirectToRoute('admin_entity_show', array('id' => $entity->getId()));
        }

        return $this->render('AppBundle:entity:new.html.twig', array(
            'entity' => $entity,
            'form' => $form->createView(),
        ));
    }

    # Traitement de la photo
    protected function _movePhoto($data){
        $fs = new Filesystem();

        $dir = $this->get('kernel')->getRootDir() . '/../web/uploads/';
        $coach_dir = $this->_createEntityFolder($data);

        # On déplace la photo dans le dossier
        if($photo = $data->getPhoto()){
            $ext = pathinfo($photo, PATHINFO_EXTENSION);
            $name = 'photo.' . $ext;

            # Si le fichier existe (il peut ne pas exister dans le cas d'une modification où on uploaderai pas un nouveau fichier)
            if(file_exists($dir . $photo)){
                $fs->copy($dir . $photo, $coach_dir . '/' . $name, true);
                $fs->remove($dir . $photo);
            }
            return $name;
        }
        else {
            return null;
        }
    }

    # Création du dossier pour accueillir l'image
    protected function _createEntityFolder($data){
        $fs = new Filesystem();
        $dir = $this->get('kernel')->getRootDir() . '/../web/data/entity/' . $data->getId();
        try {
            $fs->mkdir($dir);
        }
        catch (IOExceptionInterface $e) {
            echo "Une erreur est survenue lors de la création du dossier : ". $e->getPath();
        }
        return $dir;
    }