Merge dfae060 into e549d27

src/Backend/Core/Js/backend.js

@@ -1197,6 +1197,26 @@ jsBackend.forms = {
     jsBackend.forms.meta()
     jsBackend.forms.datePicker()
     jsBackend.forms.bootstrapTabFormValidation()
+    jsBackend.forms.imagePreview()
+  },
+
+  imagePreview: function () {
+    $('input[type=file]').on('change', function () {
+      let imageField = $(this).get(0)
+      // make sure we are uploading an image by checking the data attribute
+      if (imageField.getAttribute('data-fork-cms-role') === 'image-field' && imageField.files && imageField.files[0]) {
+        // get the image preview by matching the image-preview data-id to the ImageField id
+        let $imagePreview = $('[data-fork-cms-role="image-preview"][data-id="' + imageField.id + '"]')
+        // use FileReader to get the url
+        let reader = new FileReader()
+
+        reader.onload = function (event) {
+          $imagePreview.attr('src', event.target.result)
+        }
+
+        reader.readAsDataURL(imageField.files[0])
+      }
+    })
   },
 
   bootstrapTabFormValidation: function () {

src/Backend/Core/Layout/Templates/FormLayout.html.twig

@@ -225,7 +225,7 @@
     {% if show_preview or show_remove_image %}
       <div class="form-group">
         {% if show_preview and preview_url %}
-          <img class="{% if preview_class is defined and preview_class is not empty %}{{ preview_class }}{% endif %}" src="{{ preview_url }}">
+          <img data-fork-cms-role="image-preview" data-id="{{ form.file.vars.id }}" class="{% if preview_class is defined and preview_class is not empty %}{{ preview_class }}{% endif %}" src="{{ preview_url }}">
         {% endif %}
         {% if show_remove_image %}
           {{ form_widget(form.remove) }}

src/Backend/Modules/Blog/Actions/Edit.php

@@ -205,7 +205,7 @@ private function loadForm(): void
         $this->form->addDate('publish_on_date', $this->record['publish_on']);
         $this->form->addTime('publish_on_time', date('H:i', $this->record['publish_on']));
         if ($this->imageIsAllowed) {
-            $this->form->addImage('image');
+            $this->form->addImage('image')->setAttribute('data-fork-cms-role', 'image-field');
             $this->form->addCheckbox('delete_image');
         }
 

src/Backend/Modules/Blog/Layout/Templates/Edit.html.twig

@@ -80,7 +80,7 @@
                     <div class="panel-body">
                       {% if item.image %}
                         <div>
-                          <img src="{{ FRONTEND_FILES_URL }}/Blog/images/128x128/{{ item.image }}" class="img-thumbnail" width="128" height="128" alt="{{ 'lbl.Image'|trans|ucfirst }}" />
+                          <img data-fork-cms-role="image-preview" data-id="{{ form_edit.field('image').attributes.id }}" src="{{ FRONTEND_FILES_URL }}/Blog/images/128x128/{{ item.image }}" class="img-thumbnail" width="128" height="128" alt="{{ 'lbl.Image'|trans|ucfirst }}" />
                         </div>
                         <ul class="list-unstyled">
                           <li class="checkbox">

src/Backend/Modules/Pages/Actions/Edit.php

@@ -242,7 +242,7 @@ private function loadForm(): void
         );
 
         // image related fields
-        $this->form->addImage('image');
+        $this->form->addImage('image')->setAttribute('data-fork-cms-role', 'image-field');
         $this->form->addCheckbox('remove_image');
 
         // move page fields

src/Backend/Modules/Pages/Layout/Templates/Edit.html.twig

@@ -315,7 +315,7 @@
                 </div>
                 <div class="form-group">
                   {% if item.data.image %}
-                    <img src="{{ FRONTEND_FILES_URL }}/Pages/images/source/{{ item.data.image }}" class="img-responsive" />
+                    <img data-fork-cms-role="image-preview" data-id="{{ form_edit.field('image').attributes.id }}" src="{{ FRONTEND_FILES_URL }}/Pages/images/source/{{ item.data.image }}" class="img-responsive" />
                     <label for="removeImage">{% form_field remove_image %} {{ 'lbl.Delete'|trans|ucfirst }}</label>
                     {% form_field_error remove_image %}
                   {% endif %}

src/Common/Form/ImageType.php

@@ -44,7 +44,10 @@ function (FormEvent $event) use ($options) {
                     $fileFieldOptions = [
                         'label' => false,
                         'required' => $required,
-                        'attr' => ['accept' => $options['accept']],
+                        'attr' => [
+                            'accept' => $options['accept'],
+                            'data-fork-cms-role' => 'image-field',
+                        ],
                     ];
                     if ($required) {
                         $fileFieldOptions['constraints'] = [

src/Frontend/Core/Js/frontend.js

@@ -208,6 +208,26 @@ jsFrontend.forms = {
     jsFrontend.forms.validation()
     jsFrontend.forms.filled()
     jsFrontend.forms.datePicker()
+    jsFrontend.forms.imagePreview()
+  },
+
+  imagePreview: function () {
+    $('input[type=file]').on('change', function () {
+      let imageField = $(this).get(0)
+      // make sure we are uploading an image by checking the data attribute
+      if (imageField.getAttribute('data-fork-cms-role') === 'image-field' && imageField.files && imageField.files[0]) {
+        // get the image preview by matching the image-preview data-id to the ImageField id
+        let $imagePreview = $('[data-fork-cms-role="image-preview"][data-id="' + imageField.id + '"]')
+        // use FileReader to get the url
+        let reader = new FileReader()
+
+        reader.onload = function (event) {
+          $imagePreview.attr('src', event.target.result)
+        }
+
+        reader.readAsDataURL(imageField.files[0])
+      }
+    })
   },
 
   // once text has been filled add another class to it (so it's possible to style it differently)