Symfony3 - Upload avec barre de progression

Bien le bonjour chers forumers ! je viens vers vous car cela fait maintenant 3 semaines que je m'arrache les cheveux avec un problème que vous trouverez peu être banal. Trois semaines que je harcèle les gens du chat .

je vous explique , je développe une API visant a être utilisée par des gens ne connaissant quasiment rien a l'informatique. Il faut donc que tout soit assez explicite.

Ces personnes en questions , auront souvent , a upload des fichiers , de toute taille , partant d'une simple image a un fichier de 1 ou 2 Go , il me faut donc une barre de progression pour que la personne voulant upload son gros fichier , ne compensant rien a l'informatique ,ne se dise pas , tiens il y a le sablier depuis un moment , ca a surement planté ! Je relance l'upload.

J'ai trouvé pas mal de plugins sur internet , du style : Jquery-upload , dropZone, et j'en passe. Mais , je n'ai pas réussi a l'adapté a Symfony , tout simplement car je ne comprends pas vraiment comment ces derniers fonctionne et comment l'adapter a Symfony.

Il y avait un Bundle qui gérait ceci sur Symfony2 d'après ce que j'ai trouvé sur la toile , mais pas fonctionnel sur Symfony3.

Ma question est donc ? Comment faire pour faire une ProgressBar pour mon upload , sans modifier tous mes fichiers gérant déjà l'upload de façon "Efficace" sans le visuel.
je vous envoie ce qui concerne l'upload.

La classe File :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369

<?php   namespace SA\PlatformBundle\Entity;   use Doctrine\Common\Collections\ArrayCollection; use Doctrine\ORM\Mapping as ORM; use SA\CoreBundle\Form\ValidType; use SA\UserBundle\Entity\User; use Symfony\Component\Form\Form; use Symfony\Component\HttpFoundation\File\UploadedFile; use Symfony\Component\HttpKernel\Exception\NotFoundHttpException; use Symfony\Component\Validator\Constraints as Assert;   /**  * File  *  * @ORM\Table(name="FILE")  * @ORM\Entity(repositoryClass="SA\PlatformBundle\Repository\FileRepository")  * @ORM\HasLifecycleCallbacks()  */ class File extends AbstractFile { /**   * @var int   *   * @ORM\Column(name="FILE_ID", type="integer")   * @ORM\Id   * @ORM\GeneratedValue(strategy="AUTO")   */ protected $id;   /**   * @ORM\Column(name="FILE_EXT",type="string")   *   */   protected $ext;   /**   * @ORM\Column(name="FILE_ADD_DATE",type="datetime")   */ protected $date; /**   * @ORM\ManyToMany(targetEntity="SA\BusinessBundle\Entity\Business",inversedBy="files", cascade={"persist"})   * @ORM\JoinTable(name="FILE_BUSINESS",   * joinColumns={@ORM\JoinColumn(name="FILE_ID", referencedColumnName="FILE_ID")},   * inverseJoinColumns={@ORM\JoinColumn(name="BUSINESS_ID", referencedColumnName="BUSINESS_ID")}   * )   */ protected $business;   /**   * @ORM\ManyToOne(targetEntity="SA\PlatformBundle\Entity\DocumentType")   * @ORM\JoinColumn(name="FILE_DOCUMENT_TYPE",referencedColumnName="DOCUMENT_ID")   */ protected $doctype;   /**   /**   * @ORM\ManyToMany(targetEntity="SA\UserBundle\Entity\User",inversedBy="files", cascade={"persist"})   * @ORM\JoinTable(name="FILE_USER",   * joinColumns={@ORM\JoinColumn(name="FILE_ID", referencedColumnName="FILE_ID")},   * inverseJoinColumns={@ORM\JoinColumn(name="USER_ID", referencedColumnName="USER_ID")}   * )   */ protected $users;   /**   * @ORM\Column(name="FILE_NAME" ,type="string")   */ protected $name;   /**   * @ORM\Column(name="FILE_NEW",type= "boolean")   *   */ protected $new = 0;     private $path;     private $validForm;   public function setValidform($form) {   $this->validForm = $form; return $this; } public function getValidform() { return $this->validForm; }             public function setPath() { $this->path = $this->getUploadDir().$this->date->format('YmdHis').'_'.$this->id.'.'.$this->ext; return $this; } public function getPath() { $this->setPath(); return $this->path; } //*******************************************************************************************************************   public function __construct() { $this->date = new \DateTime; $this->business = new ArrayCollection(); $this->users = new ArrayCollection();     }             //Getters & setters /**   * Get id   *   * @return int   */   public function getNew() { return $this->new; }   public function setNew(bool $new) { $this->new = $new; return $this; }   public function getId() { return $this->id; }         /**   * Set ext   *   * @param string $ext   *   * @return File   */ public function setExt($ext) { $this->ext = $ext;   return $this; }   /**   * Get ext   *   * @return string   */ public function getExt() { return $this->ext; }     /**   * Set date   *   * @param \DateTime $date   *   * @return File   */ public function setDate($date) { $this->date = $date;   return $this; }   /**   * Get date   *   * @return \DateTime   */ public function getDate() { return $this->date; }   /**   * Set doctype   *   * @param \SA\PlatformBundle\Entity\DocumentType $doctype   *   * @return File   */ public function setDoctype(\SA\PlatformBundle\Entity\DocumentType $doctype = null) { $this->doctype = $doctype;   return $this; }   /**   * Get doctype   *   * @return \SA\PlatformBundle\Entity\DocumentType   */ public function getDoctype() { return $this->doctype; }   /**   * Set user   *   * @param \SA\UserBundle\Entity\User $user   *   * @return File   */ public function setUser(\SA\UserBundle\Entity\User $user = null) { $this->user = $user;   return $this; }   /**   * Get user   *   * @return \SA\UserBundle\Entity\User   */ public function getUser() { return $this->user; }       /**   * Set alt   *   * @param string $alt   *   * @return File   */ public function setAlt($alt) { $this->alt = $alt;   return $this; }   /**   * Get alt   *   * @return string   */ public function getAlt() { return $this->alt; }   /**   * Add businessList   *   * @param \SA\BusinessBundle\Entity\Business $businessList   *   * @return File   */ public function addBusiness(\SA\BusinessBundle\Entity\Business $businessList) { $this->business[] = $businessList;   return $this; }   /**   * Remove businessList   *   * @param \SA\BusinessBundle\Entity\Business $businessList   */ public function removeBusiness(\SA\BusinessBundle\Entity\Business $businessList) { $this->business->removeElement($businessList); }   /**   * Get businessList   *   * @return \Doctrine\Common\Collections\Collection   */ public function getBusiness() { return $this->business; }   /**   * Add user   *   * @param \SA\UserBundle\Entity\User $user   *   * @return File   */ public function addUser(\SA\UserBundle\Entity\User $user) { $this->users[] = $user;   return $this; }   /**   * Remove user   *   * @param \SA\UserBundle\Entity\User $user   */ public function removeUser(\SA\UserBundle\Entity\User $user) { $this->users->removeElement($user); }   /**   * Get users   *   * @return \Doctrine\Common\Collections\Collection   */ public function getUsers() { return $this->users; }   /**   * Set name   *   * @param string $name   *   * @return File   */ public function setName($name) { $this->name = $name;   return $this; }   /**   * Get name   *   * @return string   */ public function getName() { return $this->name; }     }

---

La classe Abstraite, qui gère l'upload

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212

<?php /**  * Created by PhpStorm.  * User: san tanas  * Date: 19/11/2015  * Time: 12:04  */   namespace SA\PlatformBundle\Entity; use Symfony\Component\HttpFoundation\File\UploadedFile; use Doctrine\ORM\Mapping as ORM;   abstract class AbstractFile { public $file; protected $tempFilename;     public function setFile(UploadedFile $file)   {   $this->file = $file;     // On vérifie si on avait déjà un fichier pour cette entité   if (null !== $this->ext) {   // On sauvegarde l'extension du fichier pour le supprimer plus tard   $this->tempFilename = $this->ext;     // On réinitialise les valeurs des attributs url et alt   $this->ext = null;       }   } public function getFile()   {   return $this->file;   } /**   * @ORM\PrePersist()   * @ORM\PreUpdate()   */   public function preUpload()   {   // Si jamais il n'y a pas de fichier (champ facultatif)   if (null === $this->file) {   return;   }     // Le nom du fichier est son id, on doit juste stocker également son extension   // Pour faire propre, on devrait renommer cet attribut en « extension », plutôt que « url »   $this->ext = $this->file->guessExtension(); $this->name = $this->date->format('YmdHis');     // Et on génère l'attribut alt de la balise <img>, à la valeur du nom du fichier sur le PC de l'internaute       }   /**   * @ORM\PostPersist()   * @ORM\PostUpdate()   */   public function upload()   {   // Si jamais il n'y a pas de fichier (champ facultatif)   if (null === $this->file) {   return;   }     // Si on avait un ancien fichier, on le supprime   if (null !== $this->tempFilename) {   $oldFile = $this->getUploadRootDir().'/'.$this->getDate()->format('YmdHis').'_'.$this->id.'.'.$this->tempFilename;   if (file_exists($oldFile)) {   unlink($oldFile);   }   }     // On déplace le fichier envoyé dans le répertoire de notre choix   $this->file->move(   $this->getUploadRootDir(), // Le répertoire de destination   $this->getDate()->format('YmdHis').'_'.$this->getId().'.'.$this->getExt() // Le nom du fichier à créer, ici « id.extension »   );           }     /**   * @ORM\PreRemove()   */   public function preRemoveUpload()   {   // On sauvegarde temporairement le nom du fichier, car il dépend de l'id   $this->tempFilename = $this->getUploadRootDir().'/'.$this->getDate()->format('YmdHis').'_'.$this->id.'.'.$this->ext;   }     /**   * @ORM\PostRemove()   */   public function removeUpload()   {   // En PostRemove, on n'a pas accès à l'id, on utilise notre nom sauvegardé   if (file_exists($this->tempFilename)) {   // On supprime le fichier   unlink($this->tempFilename);   }   }   public function getUploadDir()   {   // On retourne le chemin relatif vers l'image pour un navigateur (relatif au répertoire /web donc)   $upload = 'uploads/';   if(isset($this->business[1]) OR isset($this->users[1])) return $upload.'commun/'; else{ if(isset($this->business[0])) { return $upload.$this->business[0]->getId().'/docs/';   } return $upload.$this->users[0]->getBusiness()->getId().'/clients/'.$this->users[0]->getId().'/';     }     }     protected function getUploadRootDir()   {   // On retourne le chemin relatif vers l'image pour notre code PHP   return __DIR__.'/../../../../web/'.$this->getUploadDir();   } }

---

Voici le formulaire d'ajout de fichier

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

{{ form_start(form,{'attr':{'class':'sign-place','id':'file_form'}})}} {{ form_errors(form) }} <div class="row"> {{ form_label(form.doctype,"Type de document",{'label_attr':{'class':'col-md-6 text-right'}}) }} {{ form_widget(form.doctype,{'attr':{'class':'col-md-6'}})}} {{ form_errors(form.doctype,{'attr':{'class':'formerror'}}) }} </div> <div class="row padding-top-2"> {{ form_label(form.file,"Choississez un fichier a envoyer",{'label_attr':{'class':'col-md-6 text-right'}}) }} {{ form_widget(form.file,{'attr':{'class':'col-md-6 '}}) }} {{ form_errors(form.file,{'attr':{'class':'formerror'}}) }} </div>   {% if form.users is defined and form.users is not empty %}   <div class="row padding-top-2">     {{ form_label(form.users,"Choisissez le client à qui est destiné le fichier",{'label_attr':{'class':'col-md-12 text-center'}}) }} {{ form_widget(form.users,{'attr':{'class':'col-md-12'}}) }} {{ form_errors(form.users,{'attr':{'class':'formerror'}}) }}   </div>   {% endif %}   {% if form.business_list is defined and form.business_list is not empty %}   <div class="row padding-top-2">       {{ form_label(form.business_list,"Choisissez la ou les entreprises à qui est destiné le fichier",{'label_attr':{'class':'col-md-6 text-right'}}) }} {{ form_widget(form.business_list,{'attr':{'class':'col-md-12'}}) }} {{ form_errors(form.business_list,{'attr':{'class':'formerror'}}) }}   </div>   <div id="progress"></div>   {% endif %} <div class="form_group row"> <button type="submit" id="send" class="btn btn-primary btn-gradient dark col-md-4 col-md-offset-4 col-xs-12">Valider</button> </div>     {{ form_end(form) }}

---

Et le FormType :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135

<?php   namespace SA\PlatformBundle\Form;     use SA\UserBundle\Repository\UserRepository; use Symfony\Component\DependencyInjection\Dump\Container; use Symfony\Component\Form\AbstractType; use Symfony\Component\Form\Extension\Core\Type\SubmitType; use Symfony\Component\Form\Extension\Core\Type\TextType; use Symfony\Component\Form\FormBuilderInterface; use Symfony\Component\Form\FormEvent; use Symfony\Component\Form\FormEvents; use Symfony\Component\HttpFoundation\Session\Session; use Symfony\Component\OptionsResolver\OptionsResolver; use Symfony\Bridge\Doctrine\Form\Type\EntityType;   class FileType extends AbstractType {   private $options; /**   * @param FormBuilderInterface $builder   * @param array $options   */ public function buildForm(FormBuilderInterface $builder, array $options) {   $this->options = $options; $builder ->add('doctype', EntityType::class, array( 'class' => 'SAPlatformBundle:DocumentType', 'choice_label' => 'name', 'multiple' => false )) ->add('file', \Symfony\Component\Form\Extension\Core\Type\FileType::class,array( 'attr'=>array('accept'=>'application/pdf'), ))     ;   $builder->addEventListener( FormEvents::PRE_SET_DATA, function(FormEvent $event){   $file = $event->getData(); if($this->options['user']!=null) { $user = $this->options['user']; $addType = $this->options['addType'];   if($user->hasRole('ROLE_BUSINESS') AND $file->getId() == 0 AND $addType) {     $event->getForm()->add('users', EntityType::class, array( 'class' => 'SAUserBundle:User', 'choice_label' => 'email', 'multiple' => true, 'query_builder' => function(UserRepository $repository) use($user){ return $repository->findForBusinessQueryBuilder($user->getBusiness()->getId()); }   ));   } elseif($user->hasRole('ROLE_ADMIN') OR $user->hasRole('ROLE_SUPER_ADMIN') AND $file->getId() == 0) {   $event->getForm()->add('business',EntityType::class,array( 'class' => 'SABusinessBundle:Business', 'choice_label' => 'name', 'multiple' => true,   ));   }   elseif($user->hasRole('ROLE_CLIENT') AND $file->getId() == 0 ) { $file->addBusiness($user->getBusiness());     }       } elseif($file->getId() != 0 ) { $event->getForm() ->remove('doctype') ->remove('file') ->add('name',TextType::class);       ; }     } );     /*if(isset($options['business_id']))   $this->business_id = $options['business_id'];   $builder   ->add('users', EntityType::class, array(   'class' => 'SAUserBundle:User',   'choice_label' => 'email',   'multiple' => false,   ))   ;*/ }   /**   * @param OptionsResolver $resolver   */ public function configureOptions(OptionsResolver $resolver) { $resolver->setDefaults(array( 'data_class' => 'SA\PlatformBundle\Entity\File', 'user' =>null )); }   public function getName() { return 'sa_file_add'; } }

---

S'il vous plait , sauvez moi ! Merci d'avance j'espère avoir été bien clair dans mes explications :)

Bonjour,
Je vais raconter un truc .
Les barres progresse Upload ou chargement de page fonctionnent avec le même principe , JQuery et timer .
Par exemple avec Mediafire , la barre se charge automatiquement avec Timer et se bloque à 99%.(par exemple )
Une fois le fichier est envoyé c'est OnSuccess (ajax call ), ca devient 100% .
Je resume , c'est pas proportionnel , c'est pas parceque tu vois 50% que tu as envoyé 50% du fichier :D

Salut,

As-tu essayé ce module d'upload ajax ?

C'est pas un module symfony mais il est entièrement autonome et prêt à l'emploi pour peu que tu utilises php côté serveur. Il a toutes les fonctionnalités que tu souhaites et même plus : informations temps réel, affichage vignettes, recadrage avant upload, téléchargement de gros fichiers avec sauvegardes en continu permettant de reprendre un téléchargement interrompu en utilisant la partie sauvegardée (y compris sur un mutualisé avec les réglages par défaut) etc. Fourni dans un dossier prêt à l'emploi avec les classes Php d'upload côté serveur et de nombreux exemples de formulaires finalisés et fonctionnels. Tu peux donc le tester directement en quelques minutes : suffit de décompresser le dossier et de le poser sur le serveur.

Après je sais pas dans quelle mesure tu peux l'intégrer dans symfony mais le fait qu'il soit déjà autonome et fonctionnel te permettrais sans doute de faire des tests plus facilement.

Perso je te conseille Dropzone de la façon suivante extraite d'un de mes projets.
Je pense que ça va t'aider ;)

Dans ton controlleur:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

/**   * @Route("/ajax/foto/upload/", name="app_admin_galerias_foto_upload")   *   * @param Request $request   * @return \Symfony\Component\HttpFoundation\JsonResponse   */ public function uploadFotoAction(Request $request) { $foto = new Foto(); foreach ($request->files as $uploadedFile) { if ($uploadedFile instanceof UploadedFile) { $foto->setImagemFile($uploadedFile); } } $manager = $this->getDoctrine()->getManager(); $manager->persist($foto); $manager->flush(); return new JsonResponse([]); }

---

Dans ton js:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

$(document).ready(function () { /**   * Dropzone   */ Dropzone.options.dz = { url: "/ajax/foto/upload/", paramName: "file", //maxFilesize: 20, acceptedFiles: ".png,.jpg", dictDefaultMessage: "Soltar imagems aqui ou clique para subir imagems.", init: function() { this.on("complete", function() { if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) { location.reload(); } }); } };

---