upload file and preview

config/configuration.yml

@@ -1,6 +1,6 @@
 imports:
   - { resource: './database/image_slider.yml' }
-  - { resource: './database/image_slider_lang.yml' }
   - { resource: './database/image_slider_image.yml' }
+  - { resource: './database/image_slider_lang.yml' }
   - { resource: './database/image_slider_shop.yml' }
   - { resource: './hooks/register.yml' }

config/database/image_slider_image.yml

@@ -11,22 +11,3 @@ database_tables:
         length: 255
     primary:
       - id_image
-
-    constraint_keys:
-      - name: is_imageslider_constraint_image_slider_image_lang
-        foreign_table: image_slider_lang
-        update: NO ACTION
-        delete: CASCADE
-        local_columns:
-          - id_image
-        foreign_columns:
-          - image
-
-      - name: is_imageslider_constraint_image_slider_image_mobile_lang
-        foreign_table: image_slider_lang
-        update: NO ACTION
-        delete: CASCADE
-        local_columns:
-          - id_image
-        foreign_columns:
-          - image_mobile

config/database/image_slider_lang.yml

@@ -36,14 +36,6 @@ database_tables:
       - id_slide
       - id_lang
 
-    indexes:
-      - name: image_slider_lang_image
-        columns:
-          - image
-      - name: image_slider_lang_image_mobile
-        columns:
-          - image_mobile
-
     constraint_keys:
       - name: is_imageslider_constraint_lang
         foreign_table: lang
@@ -53,3 +45,21 @@ database_tables:
           - id_lang
         foreign_columns:
           - id_lang
+
+      - name: is_imageslider_constraint_image_slider_image_lang
+        foreign_table: image_slider_image
+        update: NO ACTION
+        delete: CASCADE
+        local_columns:
+          - image
+        foreign_columns:
+          - id_image
+
+      - name: is_imageslider_constraint_image_slider_image_mobile_lang
+        foreign_table: image_slider_image
+        update: NO ACTION
+        delete: CASCADE
+        local_columns:
+          - image_mobile
+        foreign_columns:
+          - id_image

src/Controller/Admin/ImagesliderController.php

@@ -120,7 +120,6 @@ public function create(Request $request, CommandBusInterface $commandBus): Respo
 
                 return $this->redirectToRoute('admin_imageslider_controller_index');
             } catch (\Exception $e) {
-                throw $e;
                 $this->addFlash('error', $this->getErrorMessagesForExceptions($e, $this->getErrorMessages()));
             }
         }

src/Domain/ImageSlider/CommandHandler/CreateImageSliderHandler.php

@@ -4,16 +4,22 @@
 
 namespace Oksydan\IsImageslider\Domain\ImageSlider\CommandHandler;
 
+use Oksydan\IsImageslider\Helper\UploadHelper;
 use Oksydan\IsImageslider\Repository\ImageSliderRepository;
 use Oksydan\IsImageslider\Domain\ImageSlider\Command\CreateImageSliderCommand;
 
 final class CreateImageSliderHandler implements CreateImageSliderHandlerInterface
 {
+    use UploadFilesTrait;
+
     private ImageSliderRepository $imageSliderRepository;
 
-    public function __construct(ImageSliderRepository $imageSliderRepository)
+    private UploadHelper $uploadHelper;
+
+    public function __construct(ImageSliderRepository $imageSliderRepository, UploadHelper $uploadHelper)
     {
         $this->imageSliderRepository = $imageSliderRepository;
+        $this->uploadHelper = $uploadHelper;
     }
 
     public function handle(CreateImageSliderCommand $command): void
@@ -22,6 +28,7 @@ public function handle(CreateImageSliderCommand $command): void
         $files = $command->getFiles();
 
         $imageSlider->setPosition($this->imageSliderRepository->getHighestPosition() + 1);
+        $this->saveImagesToSliderLang($files, $imageSlider->getSliderLangs());
 
         $this->imageSliderRepository->save($imageSlider);
     }

src/Domain/ImageSlider/CommandHandler/EditImageSliderHandler.php

@@ -5,22 +5,30 @@
 namespace Oksydan\IsImageslider\Domain\ImageSlider\CommandHandler;
 
 use Oksydan\IsImageslider\Domain\ImageSlider\Command\EditImageSliderCommand;
+use Oksydan\IsImageslider\Helper\UploadHelper;
 use Oksydan\IsImageslider\Repository\ImageSliderRepository;
 
 final class EditImageSliderHandler implements EditImageSliderHandlerInterface
 {
+    use UploadFilesTrait;
+
     private ImageSliderRepository $imageSliderRepository;
 
-    public function __construct(ImageSliderRepository $imageSliderRepository)
+    private UploadHelper $uploadHelper;
+
+    public function __construct(ImageSliderRepository $imageSliderRepository, UploadHelper $uploadHelper)
     {
         $this->imageSliderRepository = $imageSliderRepository;
+        $this->uploadHelper = $uploadHelper;
     }
 
     public function handle(EditImageSliderCommand $command): void
     {
         $imageSlider = $command->getImageSlider();
         $files = $command->getFiles();
 
+        $this->saveImagesToSliderLang($files, $imageSlider->getSliderLangs());
+
         $this->imageSliderRepository->save($imageSlider);
     }
 }

src/Domain/ImageSlider/CommandHandler/UploadFilesTrait.php

@@ -0,0 +1,46 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Oksydan\IsImageslider\Domain\ImageSlider\CommandHandler;
+
+use Doctrine\Common\Collections\Collection;
+use Oksydan\IsImageslider\Entity\ImageSliderImage;
+use Oksydan\IsImageslider\Entity\ImageSliderLang;
+use Symfony\Component\HttpFoundation\File\UploadedFile;
+
+trait UploadFilesTrait
+{
+    public function uploadFile(UploadedFile $file): ImageSliderImage
+    {
+        $image = new ImageSliderImage();
+
+        $fileName = $this->uploadHelper->uploadImage($file);
+        $image->setName($fileName);
+
+        return $image;
+    }
+
+    public function saveImagesToSliderLang(array $files, Collection $sliderLangs): void
+    {
+        foreach ($sliderLangs as $index => $sliderLang) {
+            $langFiles = $files[$index] ?? [];
+
+            foreach ($langFiles as $name => $langFile) {
+                $file = $langFile['image'];
+                $name = str_replace('_', '', ucwords($name, '_'));
+                $setter = 'set' . $name;
+
+                if (null === $file) {
+                    continue;
+                }
+
+                $imageSliderImage = $this->uploadFile($file);
+
+                if (method_exists($sliderLang, $setter)) {
+                    $sliderLang->$setter($imageSliderImage);
+                }
+            }
+        }
+    }
+}

src/Entity/ImageSliderLang.php

@@ -65,13 +65,13 @@ class ImageSliderLang
     private string $description;
 
     /**
-     * @ORM\OneToOne(targetEntity="Oksydan\IsImageslider\Entity\ImageSliderImage", cascade={"persist", "remove"}, mappedBy="imageSlideLang")
+     * @ORM\OneToOne(targetEntity="Oksydan\IsImageslider\Entity\ImageSliderImage", cascade={"persist", "remove"}, mappedBy="imageSlideLang", fetch="EAGER")
      * @ORM\JoinColumn(name="image", referencedColumnName="id_image", nullable=true)
      */
     private ImageSliderImage $image;
 
     /**
-     * @ORM\OneToOne(targetEntity="Oksydan\IsImageslider\Entity\ImageSliderImage", cascade={"persist", "remove"}, mappedBy="imageSlideLang")
+     * @ORM\OneToOne(targetEntity="Oksydan\IsImageslider\Entity\ImageSliderImage", cascade={"persist", "remove"}, mappedBy="imageSlideLang", fetch="EAGER")
      * @ORM\JoinColumn(name="image_mobile", referencedColumnName="id_image", nullable=true)
      */
     private ImageSliderImage $imageMobile;

src/Form/Type/Lang/LangFieldsType.php

@@ -43,7 +43,6 @@ public function buildView(FormView $view, FormInterface $form, array $options)
 
         $view->vars['locales'] = $locales;
         $view->vars['default_locale'] = $this->getDefaultLocale($locales);
-
     }
 
     public function finishView(FormView $view, FormInterface $form, array $options)

src/Form/Type/Slider/ImageSliderLangType.php

@@ -54,13 +54,13 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
                 'label' => $this->translator->trans('Description', [], TranslationDomains::TRANSLATION_DOMAIN_ADMIN),
                 'required' => false,
             ])
-            ->add('image_file', ImageType::class, [
+            ->add('image', ImageType::class, [
                 'label' => $this->translator->trans('Image', [], TranslationDomains::TRANSLATION_DOMAIN_ADMIN),
-                'mapped' => false,
+                'required' => false,
             ])
-            ->add('image_mobile_file', ImageType::class, [
+            ->add('image_mobile', ImageType::class, [
                 'label' => $this->translator->trans('Image mobile', [], TranslationDomains::TRANSLATION_DOMAIN_ADMIN),
-                'mapped' => false,
+                'required' => false,
             ]);
     }
 

src/Form/Type/Slider/ImageType.php

@@ -5,7 +5,6 @@
 namespace Oksydan\IsImageslider\Form\Type\Slider;
 
 use Oksydan\IsImageslider\Entity\ImageSliderImage;
-use PrestaShopBundle\Form\Admin\Type\ImagePreviewType;
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\FileType;
 use Symfony\Component\Form\FormBuilderInterface;
@@ -31,11 +30,6 @@ public function __construct(
     public function buildForm(FormBuilderInterface $builder, array $options): void
     {
         $builder
-            ->add('image_preview', ImagePreviewType::class, [
-                'required' => false,
-                'mapped' => false,
-                'label' => false,
-            ])
             ->add('image', FileType::class, [
                 'data_class' => null,
                 'mapped' => false,

src/Helper/UploadHelper.php

@@ -0,0 +1,32 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Oksydan\IsImageslider\Helper;
+
+use Symfony\Component\HttpFoundation\File\Exception\FileException;
+use Symfony\Component\HttpFoundation\File\UploadedFile;
+
+class UploadHelper
+{
+    private string $imagesDir;
+
+    public function __construct(string $imagesDir)
+    {
+        $this->imagesDir = $imagesDir;
+    }
+
+    /**
+     * @throws FileException
+     */
+    public function uploadImage(UploadedFile $file): string
+    {
+        $originalFilename = pathinfo($file->getClientOriginalName(), PATHINFO_FILENAME);
+
+        $newFilename = md5($originalFilename . '-' . uniqid()) . '.' . $file->guessExtension();
+
+        $file->move($this->imagesDir, $newFilename);
+
+        return $newFilename;
+    }
+}

views/js/form.js

@@ -1,10 +1,11 @@
 
 const handleFileInputChange = () => {
-  const $fileInput = $('#image_slider [type="file"]');
+  const $fileInput = $('.js-slider-image-block [type="file"]');
 
   $fileInput.on('change', (e) => {
     const $input = $(e.currentTarget);
-    const $relatedImage = $(`[data-related-field="${$input.attr('id')}"]`);
+    const $block = $input.closest('.js-slider-image-block');
+    const $relatedImage = $block.find('.js-slider-image-block-img');
     const files = $input[0].files;
 
     if (FileReader && files && files.length) {

views/templates/admin/form/form_theme.html.twig

@@ -1,24 +1,17 @@
 {% use '@PrestaShop/Admin/TwigTemplateForm/prestashop_ui_kit.html.twig' %}
 
-{% block image_preview_widget -%}
-{# This is the hidden input #}
-{% if value %}
-{{- block('form_widget_simple') -}}
-<img
-    data-related-field="{{ form.vars.id|replace({'_preview': ''}) }}"
-    src="{{ value }}"
-    alt="{{ ('Image preview for ' ~ form.vars.name)|trim }}"
-    style="max-width: 50%;"
-    class="{{ form.vars.image_class }}" />
-{% endif %}
-{%- endblock image_preview_widget %}
-
 {% block image_widget -%}
-  {% if form.vars.value %}
-    {{ dump(form.vars.value) }}
-  {% endif %}
+  <div class="js-slider-image-block">
+    <div class="mb-3">
+      {% if form.vars.value.name is defined %}
+        <img src="{{ asset('../modules/is_imageslider/img/' ~ form.vars.value.name) }}" class="img-fluid js-slider-image-block-img">
+      {% else %}
+        <img src="{{ asset('../modules/is_imageslider/views/img/placeholder.jpeg') }}" class="img-fluid js-slider-image-block-img">
+      {% endif %}
+    </div>
 
-  {{ form_widget(form) }}
+    {{ form_widget(form) }}
+  </div>
 {%- endblock image_widget %}
 
 {% block langfields_widget -%}
@@ -30,20 +23,29 @@
   <div class="js-locale-input-group">
 
     {% if not hide_locales %}
-      <div class="dropdown">
-        <button class="btn btn-outline-secondary dropdown-toggle js-locale-btn"
-                type="button"
-                data-toggle="dropdown"
-                aria-haspopup="true"
-                aria-expanded="false"
-        >
-          {{ default_locale.isoCode|upper }}
-        </button>
+      <div class="form-group row text-widget">
 
-        <div class="dropdown-menu dropdown-menu-right locale-dropdown-menu">
-          {% for locale in locales %}
-            <span class="dropdown-item js-locale-item" data-locale="{{ locale.isoCode }}">{{ locale.name }}</span>
-          {% endfor %}
+        <label class="form-control-label">
+          {{ 'Select language:'|trans({}, 'Modules.Isimageslider.Admin') }}
+        </label>
+
+        <div class="col-sm">
+          <div class="dropdown">
+            <button class="btn btn-outline-secondary dropdown-toggle js-locale-btn"
+                    type="button"
+                    data-toggle="dropdown"
+                    aria-haspopup="true"
+                    aria-expanded="false"
+            >
+              {{ default_locale.isoCode|upper }}
+            </button>
+
+            <div class="dropdown-menu dropdown-menu-right locale-dropdown-menu">
+              {% for locale in locales %}
+                <span class="dropdown-item js-locale-item" data-locale="{{ locale.isoCode }}">{{ locale.name }}</span>
+              {% endfor %}
+            </div>
+          </div>
         </div>
       </div>
     {% endif %}
@@ -60,7 +62,15 @@
            class="{{ classes }}"
       >
         <div class="col px-0">
-          {{ form_widget(formFields) }}
+          {% for innerForm in formFields %}
+
+            {% if not hide_locales %}
+              {% set label = innerForm.vars.label ~ ' (' ~ formFields.vars.form_locale.isoCode|upper ~ ')' %}
+            {% else %}
+              {% set label = innerForm.vars.label %}
+            {% endif %}
+            {{ form_row(innerForm, { label: label }) }}
+          {% endfor %}
         </div>
       </div>
     {% endfor %}