legume form: gestion de la vignette de l'image à uploader

src/PotageBundle/Resources/views/Legume/ajaxDisplay.js

@@ -147,12 +147,32 @@ function displayEditLegume(jsonRow)
             form.querySelector('#legume_quantiteStep').value = json.quantiteStep ? json.quantiteStep : null;
             form.querySelector('#legume_unite').value = json.unite;
             form.querySelector('#legume_prixUnitaire').value = json.prixUnitaire;
+
+            let imgPath = '/web/uploads/images/legumes/' + json.image;
+            form.querySelector('#preview').setAttribute('src', imgPath);
         });
     });
     return editBtn;
 }
 
 
+/*
+*   Charge une preview pour l'image qu'on s'apprête à uploader
+*/
+let uploadInput = form.querySelector('#legume_imageFile_file');
+uploadInput.addEventListener('change', function(e)
+{
+    if(this.files && this.files[0])
+    {
+        let reader = new FileReader();
+        reader.onload = function(e) {
+            $('#preview').attr('src', this.result)
+        };
+        reader.readAsDataURL(this.files[0])
+    }
+});
+
+
 /*
 *   Affiche un bouton pour dupliquer une rangée
 *   @param json object jsonRow
@@ -291,6 +311,9 @@ createButton(function() {
     form.querySelector('#legume_quantiteStep').value = null;
     form.querySelector('#legume_unite').value = 'kg';
     form.querySelector('#legume_prixUnitaire').value = null;
+    form.querySelector('#legume_imageFile_file').value = null;
+    form.querySelector('#preview').setAttribute('src', ''); // TODO mettre une image par défaut
+
     submitURL = Routing.generate('api_legume_create');
 });
 

src/PotageBundle/Resources/views/Legume/modalForm.html.twig

@@ -70,6 +70,11 @@
                     <div class="col-sm-8">
                         {{ form_widget(formLegume.imageFile) }}
                         {{ form_errors(formLegume.imageFile) }}
+                        <div class="logo sm">
+                            <div class="crop">
+                                <img id="preview" src="" alt="previsualisation">
+                            </div>
+                        </div>
                     </div>
                 </div>