Merge pull request #156 from lanfisis/master

Better uploaded file type management
monsieurbiz · Aug 20, 2021 · 2b1ece0 · 2b1ece0
2 parents c2f379d + 4142fa9
commit 2b1ece0
Show file tree

Hide file tree

Showing 15 changed files with 300 additions and 92 deletions.
diff --git a/src/Controller/FormController.php b/src/Controller/FormController.php
@@ -14,10 +14,10 @@
 namespace MonsieurBiz\SyliusRichEditorPlugin\Controller;
 
 use MonsieurBiz\SyliusRichEditorPlugin\Exception\UiElementNotFoundException;
-use MonsieurBiz\SyliusRichEditorPlugin\Service\FileUploader;
 use MonsieurBiz\SyliusRichEditorPlugin\UiElement\RegistryInterface;
+use MonsieurBiz\SyliusRichEditorPlugin\Uploader\FileUploader;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
-use Symfony\Component\Form\Extension\Core\Type\FileType;
+use Symfony\Component\Form\Extension\Core\Type\FileType as NativeFileType;
 use Symfony\Component\Form\FormInterface;
 use Symfony\Component\HttpFoundation\File\UploadedFile;
 use Symfony\Component\HttpFoundation\JsonResponse;
@@ -222,9 +222,9 @@ private function processFormDataWithoutChild(FormInterface $form, FileUploader $
     {
         if ($form->isValid() && $form->getData() instanceof UploadedFile) {
             // Upload image selected by user
-            return $fileUploader->upload($form->getData());
+            return $fileUploader->upload($form->getData(), $form->getConfig()->getOption('file-type'));
         }
-        if ($form->getConfig()->getType()->getInnerType() instanceof FileType && !empty($requestData)) {
+        if ($form->getConfig()->getType()->getInnerType() instanceof NativeFileType && !empty($requestData)) {
             // Check if we have a string value for this fields which is the file path (During edition for example)
             return $requestData; // Will return the current filename string
         }

diff --git a/src/DependencyInjection/Configuration.php b/src/DependencyInjection/Configuration.php
@@ -47,6 +47,7 @@ private function addUiElements(ArrayNodeDefinition $rootNode): void
         $rootNode
             ->children()
                 ->scalarNode('upload_directory')->end()
+                ->scalarNode('image_upload_directory')->end()
                 ->scalarNode('default_element')->defaultValue('monsieurbiz.html')->end()
                 ->scalarNode('default_element_data_field')->defaultValue('content')->end()
                 ->arrayNode('ui_elements')

diff --git a/src/DependencyInjection/MonsieurBizSyliusRichEditorExtension.php b/src/DependencyInjection/MonsieurBizSyliusRichEditorExtension.php
@@ -29,6 +29,7 @@ public function load(array $config, ContainerBuilder $container): void
         $config = $this->processConfiguration(/** @scrutinizer ignore-type */ $configuration, $config);
         $container->setParameter('monsieurbiz.richeditor.config.ui_elements', $config['ui_elements']);
         $container->setParameter('monsieurbiz.richeditor.config.upload_directory', $config['upload_directory']);
+        $container->setParameter('monsieurbiz.richeditor.config.image_upload_directory', $config['image_upload_directory']);
         $container->setParameter('monsieurbiz.richeditor.config.default_element', $config['default_element']);
         $container->setParameter('monsieurbiz.richeditor.config.default_element_data_field', $config['default_element_data_field']);
 

diff --git a/src/Form/Type/AbstractFileType.php b/src/Form/Type/AbstractFileType.php
@@ -0,0 +1,43 @@
+<?php
+
+/*
+ * This file is part of Monsieur Biz' Rich Editor plugin for Sylius.
+ *
+ * (c) Monsieur Biz <sylius@monsieurbiz.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace MonsieurBiz\SyliusRichEditorPlugin\Form\Type;
+
+use MonsieurBiz\SyliusRichEditorPlugin\Uploader\FileUploader;
+use Symfony\Component\Form\Extension\Core\Type\FileType as BaseFileType;
+use Symfony\Component\Form\FormInterface;
+use Symfony\Component\Form\FormView;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+abstract class AbstractFileType extends BaseFileType
+{
+    /**
+     * {@inheritdoc}
+     */
+    public function buildView(FormView $view, FormInterface $form, array $options): void
+    {
+        parent::buildView($view, $form, $options);
+        $view->vars['fileType'] = $options['file-type'];
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        parent::configureOptions($resolver);
+        $resolver->setDefaults([
+            'file-type' => FileUploader::FILE_TYPE_DOCUMENT,
+        ]);
+    }
+}
diff --git a/src/Form/Type/ImageType.php b/src/Form/Type/ImageType.php
@@ -0,0 +1,51 @@
+<?php
+
+/*
+ * This file is part of Monsieur Biz' Rich Editor plugin for Sylius.
+ *
+ * (c) Monsieur Biz <sylius@monsieurbiz.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace MonsieurBiz\SyliusRichEditorPlugin\Form\Type;
+
+use MonsieurBiz\SyliusRichEditorPlugin\Uploader\FileUploader;
+use Symfony\Component\Form\FormInterface;
+use Symfony\Component\Form\FormView;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+final class ImageType extends AbstractFileType
+{
+    /**
+     * {@inheritdoc}
+     */
+    public function getBlockPrefix()
+    {
+        return 'monsieurbiz_rich_editor_plugin_image';
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function buildView(FormView $view, FormInterface $form, array $options): void
+    {
+        parent::buildView($view, $form, $options);
+        $view->vars['filterWidth'] = $options['filter-width'];
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        parent::configureOptions($resolver);
+        $resolver->setDefaults([
+            'file-type' => FileUploader::FILE_TYPE_IMAGE,
+            'filter-width' => 200,
+        ]);
+    }
+}
diff --git a/src/Form/Type/VideoType.php b/src/Form/Type/VideoType.php
@@ -0,0 +1,27 @@
+<?php
+
+/*
+ * This file is part of Monsieur Biz' Rich Editor plugin for Sylius.
+ *
+ * (c) Monsieur Biz <sylius@monsieurbiz.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace MonsieurBiz\SyliusRichEditorPlugin\Form\Type;
+
+use Symfony\Component\Form\Extension\Core\Type\FileType;
+
+final class VideoType extends FileType
+{
+    /**
+     * {@inheritdoc}
+     */
+    public function getBlockPrefix()
+    {
+        return 'monsieurbiz_rich_editor_plugin_video';
+    }
+}
diff --git a/src/Resources/config/config.yaml b/src/Resources/config/config.yaml
@@ -2,6 +2,7 @@ imports:
     - { resource: "services.yaml" }
     - { resource: "sylius/ui.yaml" }
     - { resource: "richeditor.yaml" }
+    - { resource: 'images.yaml' }
 
 knp_gaufrette:
     adapters:

diff --git a/src/Resources/config/images.yaml b/src/Resources/config/images.yaml
@@ -0,0 +1,6 @@
+liip_imagine:
+    filter_sets:
+        monsieurbiz_rich_editor_uploaded_image:
+            filters:
+                thumbnail: { size: [400, 400], mode: inset }
+                relative_resize: { widen: 32 }
diff --git a/src/Resources/config/richeditor.yaml b/src/Resources/config/richeditor.yaml
@@ -1,5 +1,6 @@
 monsieurbiz_sylius_richeditor:
     upload_directory: '/media/rich-editor'
+    image_upload_directory: '/media/image'
     ui_elements:
         monsieurbiz.html:
             alias: html

diff --git a/src/Resources/config/services.yaml b/src/Resources/config/services.yaml
@@ -33,7 +33,8 @@ services:
     MonsieurBiz\SyliusRichEditorPlugin\UiElement\RegistryInterface: '@monsieurbiz.richeditor.registry'
 
     # File uploader
-    MonsieurBiz\SyliusRichEditorPlugin\Service\FileUploader:
+    MonsieurBiz\SyliusRichEditorPlugin\Uploader\FileUploader:
         arguments:
-            $targetPath: '%monsieurbiz.richeditor.config.upload_directory%'
+            $fileTargetPath: '%monsieurbiz.richeditor.config.upload_directory%'
+            $imageTargetPath: '%monsieurbiz.richeditor.config.image_upload_directory%'
             $publicDirectory: '%kernel.project_dir%/public'
diff --git a/src/Resources/views/Form/theme.html.twig b/src/Resources/views/Form/theme.html.twig
@@ -1,18 +1,49 @@
 {% extends '@SyliusAdmin/Form/theme.html.twig' %}
 
-{% block file_widget %}
 
-    {# Retrieve current file in form vars, when editing an element, it's a string #}
-    {% set current_file_path = form.vars.data %}
+{% block monsieurbiz_rich_editor_plugin_image_widget %}
+    {% set current_file_path = monsieurbiz_richeditor_get_current_file_path() %}
+    {% if form.vars.valid and current_file_path is not empty %}
+        <div>
+            <p>
+                <small>{{ 'monsieurbiz_richeditor_plugin.form.current_image' | trans }}</small><br />
+                <img src="{{ current_file_path|imagine_filter('monsieurbiz_rich_editor_uploaded_image', {"relative_resize": {"widen": filterWidth }}) }}" alt="" style="max-width: 300px;max-height: 300px;" />
+            </p>
+            <button type="button" class="ui button" onclick="monsieurBizRichEditorRemoveFile('{{ form.vars.full_name | escape }}');">
+                {{ 'monsieurbiz_richeditor_plugin.file.change' | trans }}
+            </button>
+            <input type="hidden" name="{{ form.vars.full_name }}" value="{{ current_file_path }}" />
+        </div>
+        {{- form_widget(form, {'attr': {'style': 'display: none;'}, 'full_name': 'change_' ~ form.vars.full_name}) -}}
+    {% else %}
+        {{- form_widget(form) -}}
+    {% endif %}
+{% endblock %}
 
-    {# Manage current uploaded files when users uploads files but the form is not completely valid #}
-    {% if app.request.get('rich_editor_uploaded_files') is not empty %}
-        {% set uploadedFiles = app.request.get('rich_editor_uploaded_files') %}
-        {% if attribute(uploadedFiles, form.vars.full_name) is defined %}
-            {% set current_file_path =  attribute(uploadedFiles, form.vars.full_name) %}
-        {% endif %}
+{% block monsieurbiz_rich_editor_plugin_video_widget %}
+    {% set current_file_path = monsieurbiz_richeditor_get_current_file_path() %}
+    {% if form.vars.valid and current_file_path is not empty %}
+        <div>
+            <p>
+                <small>{{ 'monsieurbiz_richeditor_plugin.form.current_video' | trans }}</small><br />
+                <video width="100%" controls style="max-width: 300px;max-height: 300px;">
+                    <source src="{{ current_file_path }}" type="video/{{ current_file_path|split('.')|last }}">
+                </video>
+            </p>
+            <button type="button" class="ui button" onclick="monsieurBizRichEditorRemoveFile('{{ form.vars.full_name | escape }}');">
+                {{ 'monsieurbiz_richeditor_plugin.file.change' | trans }}
+            </button>
+            <input type="hidden" name="{{ form.vars.full_name }}" value="{{ current_file_path }}" />
+        </div>
+        {{- form_widget(form, {'attr': {'style': 'display: none;'}, 'full_name': 'change_' ~ form.vars.full_name}) -}}
+    {% else %}
+        {{- form_widget(form) -}}
     {% endif %}
+{% endblock %}
+
+{% block file_widget %}
 
+    {% set current_file_path = monsieurbiz_richeditor_get_current_file_path() %}
     {% if form.vars.valid and current_file_path is not empty %}
         <div>
             {% if form.vars.attr['data-image'] is defined %}

diff --git a/src/Service/FileUploader.php b/src/Service/FileUploader.php
diff --git a/src/Twig/RichEditorExtension.php b/src/Twig/RichEditorExtension.php
@@ -77,6 +77,7 @@ public function getFunctions(): array
             new TwigFunction('monsieurbiz_richeditor_get_elements', [$this, 'getElements'], ['is_safe' => ['html']]),
             new TwigFunction('monsieurbiz_richeditor_get_default_element', [$this, 'getDefaultElement'], ['is_safe' => ['html']]),
             new TwigFunction('monsieurbiz_richeditor_get_default_element_data_field', [$this, 'getDefaultElementDataField'], ['is_safe' => ['html']]),
+            new TwigFunction('monsieurbiz_richeditor_get_current_file_path', [$this, 'getCurrentFilePath'], ['needs_context' => true, 'is_safe' => ['html']]),
         ];
     }
 
@@ -238,4 +239,28 @@ public function getDefaultElementDataField(): string
     {
         return $this->defaultElementDataField;
     }
+
+    /**
+     * @param array $context
+     *
+     * @return string|null
+     */
+    public function getCurrentFilePath(array $context): ?string
+    {
+        $form = $context['form'];
+        $app = $context['app'];
+        if (empty($form) || empty($app)) {
+            return null;
+        }
+
+        $path = $form->vars['data'];
+        if (!empty($app->getRequest()->get('rich_editor_uploaded_files'))) {
+            $uploadedFile = $app->getRequest()->get('rich_editor_uploaded_files');
+            if (null !== ($fullName = $uploadedFile['full_name'] ?? null)) {
+                return $fullName;
+            }
+        }
+
+        return $path;
+    }
 }