From 4d96feaf28609a1c73e6adc91dccb985e87b77fa Mon Sep 17 00:00:00 2001
From: mike-esokia <mike.esokia@gmail.com>
Date: Thu, 31 May 2018 16:04:10 +0400
Subject: [PATCH 1/3] create form for uploading logo refactor admin setup
 layout for adding logo personalisation section

---
 .../Form/Configuration/GeneralFormType.php    |  21 ++++
 .../Configuration/PersonalisationLogoForm.php |  44 ++++++++
 resources/www/admin/styles/main.scss          |  80 ++++++++++++++
 .../web/admin/personalisation_logo.html.twig  | 102 ++++++++++++++++++
 templates/web/admin/setup.html.twig           |  32 ++++--
 5 files changed, 270 insertions(+), 9 deletions(-)
 create mode 100644 lib/Alchemy/Phrasea/Form/Configuration/PersonalisationLogoForm.php
 create mode 100644 templates/web/admin/personalisation_logo.html.twig

diff --git a/lib/Alchemy/Phrasea/Form/Configuration/GeneralFormType.php b/lib/Alchemy/Phrasea/Form/Configuration/GeneralFormType.php
index f9794112a8..cf4d55188d 100644
--- a/lib/Alchemy/Phrasea/Form/Configuration/GeneralFormType.php
+++ b/lib/Alchemy/Phrasea/Form/Configuration/GeneralFormType.php
@@ -56,6 +56,27 @@ class GeneralFormType extends AbstractType
             'attr'        => ['min' => -1],
             'constraints' => new GreaterThanOrEqual(['value' => -1]),
         ]);
+        $builder->add('personalize-logo-choice', new PersonalisationLogoForm(), [
+            'label' => 'Design of personalization logo section',
+            'attr'  => [
+                'id' => 'personalize-logo-container'
+            ]
+        ]);
+//        $builder->add('personalize-logo-choice', 'choice', [
+//            'label'       => 'Design of personalization logo section',
+//            'choices' => ['original' => 'original', 'personalize' => 'personalize'],
+//            'required'=>true,
+//            'expanded'=>true,
+//            'multiple'=>false,
+//            'placeholder'=>false,
+//            'attr' => [
+//                'id' => 'personalize-logo-container'
+//            ]
+//
+//        ]);
+//        $builder->add('personalize-logo', 'file', [
+//            'label'         => false,
+//        ]);
     }
 
     public function getName()
diff --git a/lib/Alchemy/Phrasea/Form/Configuration/PersonalisationLogoForm.php b/lib/Alchemy/Phrasea/Form/Configuration/PersonalisationLogoForm.php
new file mode 100644
index 0000000000..0036ab0f50
--- /dev/null
+++ b/lib/Alchemy/Phrasea/Form/Configuration/PersonalisationLogoForm.php
@@ -0,0 +1,44 @@
+<?php
+/*
+ * This file is part of Phraseanet
+ *
+ * (c) 2005-2014 Alchemy
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Alchemy\Phrasea\Form\Configuration;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\FormBuilderInterface;
+
+class PersonalisationLogoForm extends AbstractType
+{
+    public function buildForm(FormBuilderInterface $builder, array $options)
+    {
+        $builder->add('originalChoiceInput', 'choice', [
+            'label'    => false,
+            'choices'  => ['original' => 'original'],
+            'expanded' => true,
+
+        ]);
+        $builder->add('personaliseChoiceInput', 'choice', [
+            'label'    => false,
+            'choices'  => ['personalise' => 'personalise'],
+            'expanded' => true,
+
+        ]);
+        $builder->add('personalizeLogoInput', 'file', [
+            'label' => false,
+        ]);
+        $builder->add('logoChoice', 'hidden', [
+            'label' => false,
+        ]);
+    }
+
+    public function getName()
+    {
+        return null;
+    }
+}
\ No newline at end of file
diff --git a/resources/www/admin/styles/main.scss b/resources/www/admin/styles/main.scss
index 513e89ab84..d54760491e 100644
--- a/resources/www/admin/styles/main.scss
+++ b/resources/www/admin/styles/main.scss
@@ -630,6 +630,86 @@ span.simplecolorpicker.picker {
   }
 }
 
+.personalise-logo-row-container {
+  height: 105px;
+  td:first-child {
+    border-right: 1px solid #3b99fc;
+  }
+  td {
+    padding: 4px 40px 10px 40px;
+    min-width: 100px;
+    max-width: 200px;
+    vertical-align: top;
+    input[type="radio"] {
+      height: 25px;
+      margin: 0;
+    }
+    label {
+      display: inline-block;
+      line-height: 25px;
+      margin-left: 10px;
+    }
+    .image-container {
+      height: 42px;
+      width: 52px;
+      border: 1px solid #979797;
+      display: block;
+    }
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: scale-down;
+    }
+    a {
+      font-family: Roboto;
+      font-size: 10px;
+      font-weight: normal;
+      font-style: normal;
+      font-stretch: normal;
+      line-height: normal;
+      letter-spacing: normal;
+      color: #3b99fc;
+      text-align: left;
+      display: block;
+      margin-top: 10px;
+    }
+    #select-logo-btn {
+      border-radius: 5px;
+      box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.09);
+      background-color: #ffffff;
+      border: solid 1px #c3c3c3;
+      font-family: Roboto;
+      font-size: 11px;
+      text-align: left;
+      color: #000000;
+      margin-top: 10px;
+      padding: 3px 20px;
+      line-height: 11px;
+    }
+    #help-text {
+      font-family: Roboto;
+      font-size: 12px;
+      line-height: 1.33;
+      letter-spacing: normal;
+      text-align: left;
+      color: #000000;
+    }
+    #error-text {
+      font-family: Roboto;
+      font-size: 12px;
+      font-weight: normal;
+      font-style: italic;
+      line-height: 1.33;
+      letter-spacing: normal;
+      text-align: left;
+      color: #ff0404;
+    }
+    //input[type="file"] {
+    //  display: none;
+    //}
+  }
+}
+
 @media screen and (max-width: 1150px) {
   .langTab {
     display: block;
diff --git a/templates/web/admin/personalisation_logo.html.twig b/templates/web/admin/personalisation_logo.html.twig
new file mode 100644
index 0000000000..44f75eee26
--- /dev/null
+++ b/templates/web/admin/personalisation_logo.html.twig
@@ -0,0 +1,102 @@
+<table cellspacing="0">
+    <tr class="personalise-logo-row-container">
+        <td>
+            {{ form_widget(form.originalChoiceInput, { 'attr': {'class': 'choice-radio'} }) }}
+            <div class="image-container">
+                <img id="original-image-placeholder" src="/assets/common/images/logo.png"/>
+            </div>
+            <a href="#">{{ 'prod::setup: download gabari' | trans }}</a>
+        </td>
+        <td>
+            {{ form_widget(form.personaliseChoiceInput) }}
+            <span id="help-text">{{ 'prod::setup: help text' | trans }}</span>
+            <span id="error-text"></span>
+            <div class="image-container" id="personalize-image-container">
+                <img id="personalise-image-placeholder"/>
+            </div>
+            <div>
+                {{ form_widget(form.personalizeLogoInput) }}
+                <button id="select-logo-btn">{{ 'prod::setup: select file' | trans }}</button>
+            </div>
+        </td>
+    </tr>
+    {{ form_widget(form.logoChoice) }}
+</table>
+
+<script type="text/javascript">
+    $(document).ready(function () {
+
+        var errorDimension = '{{ 'prod::setup: error text dimension' | trans }}';
+        var errorFileType = '{{ 'prod::setup: error text file type' | trans }}';
+        //by default select original logo
+        $('#general_personalize-logo-choice_originalChoiceInput_0').attr('checked', true);
+        $('#general_personalize-logo-choice_logoChoice').val('original');
+
+        $('#help-text').show();
+        $('#personalize-image-container').hide();
+        $('#error-text').hide();
+
+        $('input[type=radio]').on('change', function () {
+            $('#general_personalize-logo-choice_logoChoice').val($(this).val());
+            $(this).closest('td').siblings().find('input').prop('checked', false);
+        });
+
+        $('#select-logo-btn').on('click', function (e) {
+            e.stopPropagation();
+            $('#general_personalize-logo-choice_personalizeLogoInput').trigger('click');
+        });
+
+        $("#general_personalize-logo-choice_personalizeLogoInput").change(function () {
+            readURL(this);
+        });
+
+        function readURL(input) {
+            if (input.files && input.files[0]) {
+                var reader = new FileReader();
+
+                reader.onload = function (e) {
+                    var image = new Image();
+                    image.src = e.target.result;
+
+                    //Validate the File Height and Width.
+                    image.onload = function () {
+                        var height = this.height;
+                        var width = this.width;
+
+                        //check dimensions
+                        if (height > 42 || width > 52) {
+                            debugger;
+                            $('#error-text').text(errorDimension);
+                            $('#error-text').show();
+                            $('#help-text').hide();
+                            $('#personalize-image-container').hide();
+                            $('#general_personalize-logo-choice_personalizeLogoInput').val("");
+                            return false;
+                        }
+
+                        //check file extension
+                        var ext = $('#general_personalize-logo-choice_personalizeLogoInput').val().split('.').pop().toLowerCase();
+                        if (ext != 'png') {
+                            $('#general_personalize-logo-choice_personalizeLogoInput').val("");
+                            $('#error-text').text(errorFileType);
+                            $('#error-text').show();
+                            $('#help-text').hide();
+                            $('#personalize-image-container').hide();
+                            return false;
+                        }
+
+                        $('#personalize-image-container').show();
+                        $('#error-text').hide();
+                        $('#help-text').hide();
+                        $('#personalise-image-placeholder').attr('src', e.target.result);
+                        return true;
+                    };
+                }
+
+                reader.readAsDataURL(input.files[0]);
+            }
+        }
+    });
+
+</script>
+
diff --git a/templates/web/admin/setup.html.twig b/templates/web/admin/setup.html.twig
index 020cc46753..fbb3fb598a 100644
--- a/templates/web/admin/setup.html.twig
+++ b/templates/web/admin/setup.html.twig
@@ -38,16 +38,30 @@
         <fieldset>
             <legend>{{ daform.vars['label'] }}</legend>
             {% for formdata in daform %}
-                <div class="control-group">
-                    {{ form_errors(formdata) }}
-                    {{ form_label(formdata, null, { 'label_attr': {'class' : 'control-label'} } ) }}
-                    <div class="controls">
-                        {{ form_widget(formdata, {'attr': {'class': 'input-xxlarge'}}) }}
-                    </div>
+                {% if formdata.vars['attr'] is defined and formdata.vars['attr']['id'] is defined
+                and formdata.vars['attr']['id'] == 'personalize-logo-container' %}
+                    <div class="control-group">
+                        {{ form_errors(formdata) }}
+                        {{ form_label(formdata, null, { 'label_attr': {'class' : 'control-label'} } ) }}
+                        <div class="controls">
+                            {% include 'admin/personalisation_logo.html.twig' with {'form': formdata} %}
+                        </div>
 
-                    <div>{{ formdata.vars['help_message'] }}</div>
-                    {{ form_rest(formdata) }}
-                </div>
+                        <div>{{ formdata.vars['help_message'] }}</div>
+                        {{ form_rest(formdata) }}
+                    </div>
+                {% else %}
+                    <div class="control-group">
+                        {{ form_errors(formdata) }}
+                        {{ form_label(formdata, null, { 'label_attr': {'class' : 'control-label'} } ) }}
+                        <div class="controls">
+                            {{ form_widget(formdata, {'attr': {'class': 'input-xxlarge'}}) }}
+                        </div>
+
+                        <div>{{ formdata.vars['help_message'] }}</div>
+                        {{ form_rest(formdata) }}
+                    </div>
+                {% endif %}
             {% endfor %}
             {{ form_rest(daform) }}
         </fieldset>

From 3d50c59e89dfe0420d95f7615c9ece12863696d9 Mon Sep 17 00:00:00 2001
From: mike-esokia <mike.esokia@gmail.com>
Date: Fri, 1 Jun 2018 11:29:09 +0400
Subject: [PATCH 2/3] add download function refactored code of personalisation
 logo section wip - file upload

---
 .../Controller/Admin/SetupController.php      |  2 +
 .../Form/Configuration/GeneralFormType.php    | 15 -------
 .../Configuration/PersonalisationLogoForm.php |  4 +-
 resources/www/admin/styles/main.scss          |  7 ++--
 .../web/admin/personalisation_logo.html.twig  | 41 ++++++++++++++-----
 templates/web/admin/setup.html.twig           |  3 +-
 6 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/lib/Alchemy/Phrasea/Controller/Admin/SetupController.php b/lib/Alchemy/Phrasea/Controller/Admin/SetupController.php
index a8e585d88a..c6bdf0c5c8 100644
--- a/lib/Alchemy/Phrasea/Controller/Admin/SetupController.php
+++ b/lib/Alchemy/Phrasea/Controller/Admin/SetupController.php
@@ -46,6 +46,8 @@ class SetupController extends Controller
         }
 
         if ('POST' === $request->getMethod()) {
+            var_dump($request);
+            die('here');
             $form->submit($request->request->all());
 
             if ($form->isValid()) {
diff --git a/lib/Alchemy/Phrasea/Form/Configuration/GeneralFormType.php b/lib/Alchemy/Phrasea/Form/Configuration/GeneralFormType.php
index cf4d55188d..904a261a90 100644
--- a/lib/Alchemy/Phrasea/Form/Configuration/GeneralFormType.php
+++ b/lib/Alchemy/Phrasea/Form/Configuration/GeneralFormType.php
@@ -62,21 +62,6 @@ class GeneralFormType extends AbstractType
                 'id' => 'personalize-logo-container'
             ]
         ]);
-//        $builder->add('personalize-logo-choice', 'choice', [
-//            'label'       => 'Design of personalization logo section',
-//            'choices' => ['original' => 'original', 'personalize' => 'personalize'],
-//            'required'=>true,
-//            'expanded'=>true,
-//            'multiple'=>false,
-//            'placeholder'=>false,
-//            'attr' => [
-//                'id' => 'personalize-logo-container'
-//            ]
-//
-//        ]);
-//        $builder->add('personalize-logo', 'file', [
-//            'label'         => false,
-//        ]);
     }
 
     public function getName()
diff --git a/lib/Alchemy/Phrasea/Form/Configuration/PersonalisationLogoForm.php b/lib/Alchemy/Phrasea/Form/Configuration/PersonalisationLogoForm.php
index 0036ab0f50..eb9f7eae07 100644
--- a/lib/Alchemy/Phrasea/Form/Configuration/PersonalisationLogoForm.php
+++ b/lib/Alchemy/Phrasea/Form/Configuration/PersonalisationLogoForm.php
@@ -19,13 +19,13 @@ class PersonalisationLogoForm extends AbstractType
     {
         $builder->add('originalChoiceInput', 'choice', [
             'label'    => false,
-            'choices'  => ['original' => 'original'],
+            'choices'  => ['original' => 'original-choice-label'],
             'expanded' => true,
 
         ]);
         $builder->add('personaliseChoiceInput', 'choice', [
             'label'    => false,
-            'choices'  => ['personalise' => 'personalise'],
+            'choices'  => ['personalise' => 'personalise-choice-label'],
             'expanded' => true,
 
         ]);
diff --git a/resources/www/admin/styles/main.scss b/resources/www/admin/styles/main.scss
index d54760491e..57a271b416 100644
--- a/resources/www/admin/styles/main.scss
+++ b/resources/www/admin/styles/main.scss
@@ -685,6 +685,7 @@ span.simplecolorpicker.picker {
       margin-top: 10px;
       padding: 3px 20px;
       line-height: 11px;
+      margin-left: 0;
     }
     #help-text {
       font-family: Roboto;
@@ -704,9 +705,9 @@ span.simplecolorpicker.picker {
       text-align: left;
       color: #ff0404;
     }
-    //input[type="file"] {
-    //  display: none;
-    //}
+    input[type="file"] {
+      display: none;
+    }
   }
 }
 
diff --git a/templates/web/admin/personalisation_logo.html.twig b/templates/web/admin/personalisation_logo.html.twig
index 44f75eee26..90cfcfa7b2 100644
--- a/templates/web/admin/personalisation_logo.html.twig
+++ b/templates/web/admin/personalisation_logo.html.twig
@@ -3,9 +3,10 @@
         <td>
             {{ form_widget(form.originalChoiceInput, { 'attr': {'class': 'choice-radio'} }) }}
             <div class="image-container">
-                <img id="original-image-placeholder" src="/assets/common/images/logo.png"/>
+                <img id="original-image-placeholder" alt="gabari"
+                     src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAACOCAYAAABg4BtLAAADgUlEQVR4Xu2czyt8URjGnyErWfgLWClLCUuxsmCDoijJwpo0GT+S/EhSFmyUErGQ2LBQFrJEmrKxmuIvsLRAo3vM+M5M3c6drnO/hs8s77n3zPu+zznP8z4zZyaWTqfT+gOvGIn+MpRB9JcBKhAF0RKtAEu3RIHzDTsworFYLG+SbEOVvV7YYP2v636ZkmhhZUA0s6RZugXmyPXeZY8GtWnsUfbop+5GTVLsUfZowRqAjCAjyMgpG8O6sC6s+1kBPmHIrATXdsxvfsgIMoKMIKO8NQAZOTYBsC6sC+vCurBubgVcyw6sC+vCurAurAvr5lTgu2QHeUFekBfkBXlBXpCXfxUoVl/RUXQUHUVH0VF0FB1FR78qwBkGn9aI370UFoZjrI6/waap9ykw7gX3gnvBveBecC+4F9wL7sWvI8pex73gXjIV4OcgmUIUa6++637cC+4F94J7wb3gXnAvuBfcC+4l25LSGdEZ0RnRGdEZ0RnRGdEZ0RnRGfmsAY7fcPymRP9FzsZqP3088LdpPz0RW3wkaqtQqY2DaKkhZosXRG0VKnb88fFRy8vLOj4+1uvrqzo6OjQ5OamGhgYVdl3Fzh3k/kgQfXh40PDwsK6vr/Niqqmp0e7urlpbW4PEGuoe54m+vLxobGxM5+fnWlxcVE9Pj8rKynR0dKSZmRk1Nzdra2tL1dXVoRKxPew80fv7e/X29hpE4/G4ysvLTUzv7+9aXV3VxsaGTk9P1djYaIs11LjzRA8PDw2iucm8vb3p8vJS09PTur291f7+vgYGBkIlYnvYeaLr6+tmH3oJ19XVKZlMam5uTmdnZ1+xeSSVSCRssYYad57owsKCLi4utLS0pO3tbe3t7amqqsos55GREbNP29vbNTs7GyoR28POE/UQHR8f/4qjs7NT8/PzRlZSqZT6+/sNQZU8ogcHBxocHFRTU5PRUQ89j3W9193dnbq6uuQVo6+vzwZKqHHniGaTmZiYMKSUe0LMS3Btbe13sO7z87NGR0d1c3Nj5KS7u9sgc3JyYuSmra1Nm5ubqqysDIWY7WHniHoBXF1daWhoSE9PT3nxtLS0aGdnR/X19bY4Q49Hkqh3EtSTlZWVFdMhVVRUGAKamppSbW1t6CSCTBBJokECcX0PibqucNTzg2jUFXf9fiDqusJRzw+iUVfc9fuBqOsKRz3/n0H0A2kqGPz1ouCnAAAAAElFTkSuQmCC"/>
             </div>
-            <a href="#">{{ 'prod::setup: download gabari' | trans }}</a>
+            <a id="download-image-template" href="#">{{ 'prod::setup: download gabari' | trans }}</a>
         </td>
         <td>
             {{ form_widget(form.personaliseChoiceInput) }}
@@ -16,7 +17,8 @@
             </div>
             <div>
                 {{ form_widget(form.personalizeLogoInput) }}
-                <button id="select-logo-btn">{{ 'prod::setup: select file' | trans }}</button>
+                <label for="general_personalize-logo-choice_personalizeLogoInput"
+                       id="select-logo-btn">{{ 'prod::setup: select file' | trans }}</label>
             </div>
         </td>
     </tr>
@@ -25,6 +27,7 @@
 
 <script type="text/javascript">
     $(document).ready(function () {
+        var fileToUpload = null;
 
         var errorDimension = '{{ 'prod::setup: error text dimension' | trans }}';
         var errorFileType = '{{ 'prod::setup: error text file type' | trans }}';
@@ -41,15 +44,31 @@
             $(this).closest('td').siblings().find('input').prop('checked', false);
         });
 
-        $('#select-logo-btn').on('click', function (e) {
-            e.stopPropagation();
-            $('#general_personalize-logo-choice_personalizeLogoInput').trigger('click');
-        });
-
         $("#general_personalize-logo-choice_personalizeLogoInput").change(function () {
             readURL(this);
         });
 
+        $("#download-image-template").on('click', function (event) {
+            event.preventDefault();
+            var imageInBase64 = $('#original-image-placeholder').attr('src');
+            var mimeInfo = base64MimeType(imageInBase64);
+            var ext = mimeInfo.split('/').pop();
+            var filename = $('#original-image-placeholder').attr('alt') + "." + ext;
+            download(imageInBase64, filename, mimeInfo);
+        });
+
+        var base64MimeType = function base64MimeType(encoded) {
+            var result = null;
+            if (typeof encoded !== 'string') {
+                return result;
+            }
+            var mime = encoded.match(/data:([a-zA-Z0-9]+\/[a-zA-Z0-9-.+]+).*,.*/);
+            if (mime && mime.length) {
+                result = mime[1];
+            }
+            return result;
+        };
+
         function readURL(input) {
             if (input.files && input.files[0]) {
                 var reader = new FileReader();
@@ -65,7 +84,6 @@
 
                         //check dimensions
                         if (height > 42 || width > 52) {
-                            debugger;
                             $('#error-text').text(errorDimension);
                             $('#error-text').show();
                             $('#help-text').hide();
@@ -84,7 +102,7 @@
                             $('#personalize-image-container').hide();
                             return false;
                         }
-
+                        fileToUpload = input.files[0];
                         $('#personalize-image-container').show();
                         $('#error-text').hide();
                         $('#help-text').hide();
@@ -96,7 +114,10 @@
                 reader.readAsDataURL(input.files[0]);
             }
         }
+
+
     });
 
 </script>
 
+
diff --git a/templates/web/admin/setup.html.twig b/templates/web/admin/setup.html.twig
index fbb3fb598a..0dd7e11dde 100644
--- a/templates/web/admin/setup.html.twig
+++ b/templates/web/admin/setup.html.twig
@@ -80,7 +80,8 @@
 <div style="clear: both;"></div>
 <div class="well well-large">
     <div style="max-width: 400px;margin: 0 auto 10px;">
-        <input type="submit" class="btn btn-primary btn-block btn-large" value="{{ 'boutton::valider' | trans }}"/>
+        <input type="submit" id="submitSetupForm" class="btn btn-primary btn-block btn-large"
+               value="{{ 'boutton::valider' | trans }}"/>
     </div>
 </div>
 {{ form_end(form) }}

From 275730c3fbff729ce001c7de4911e4cde392e18b Mon Sep 17 00:00:00 2001
From: mike-esokia <mike.esokia@gmail.com>
Date: Fri, 1 Jun 2018 17:19:05 +0400
Subject: [PATCH 3/3] wip file upload

---
 .../Controller/Admin/SetupController.php      |  2 --
 .../web/admin/personalisation_logo.html.twig  | 21 ++++++++++---------
 templates/web/admin/setup.html.twig           |  3 +--
 3 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/lib/Alchemy/Phrasea/Controller/Admin/SetupController.php b/lib/Alchemy/Phrasea/Controller/Admin/SetupController.php
index c6bdf0c5c8..a8e585d88a 100644
--- a/lib/Alchemy/Phrasea/Controller/Admin/SetupController.php
+++ b/lib/Alchemy/Phrasea/Controller/Admin/SetupController.php
@@ -46,8 +46,6 @@ class SetupController extends Controller
         }
 
         if ('POST' === $request->getMethod()) {
-            var_dump($request);
-            die('here');
             $form->submit($request->request->all());
 
             if ($form->isValid()) {
diff --git a/templates/web/admin/personalisation_logo.html.twig b/templates/web/admin/personalisation_logo.html.twig
index 90cfcfa7b2..4224814a32 100644
--- a/templates/web/admin/personalisation_logo.html.twig
+++ b/templates/web/admin/personalisation_logo.html.twig
@@ -82,16 +82,6 @@
                         var height = this.height;
                         var width = this.width;
 
-                        //check dimensions
-                        if (height > 42 || width > 52) {
-                            $('#error-text').text(errorDimension);
-                            $('#error-text').show();
-                            $('#help-text').hide();
-                            $('#personalize-image-container').hide();
-                            $('#general_personalize-logo-choice_personalizeLogoInput').val("");
-                            return false;
-                        }
-
                         //check file extension
                         var ext = $('#general_personalize-logo-choice_personalizeLogoInput').val().split('.').pop().toLowerCase();
                         if (ext != 'png') {
@@ -102,6 +92,17 @@
                             $('#personalize-image-container').hide();
                             return false;
                         }
+
+                        //check dimensions
+                        if (height > 42 || width > 52) {
+                            $('#error-text').text(errorDimension);
+                            $('#error-text').show();
+                            $('#help-text').hide();
+                            $('#personalize-image-container').hide();
+                            $('#general_personalize-logo-choice_personalizeLogoInput').val("");
+                            return false;
+                        }
+
                         fileToUpload = input.files[0];
                         $('#personalize-image-container').show();
                         $('#error-text').hide();
diff --git a/templates/web/admin/setup.html.twig b/templates/web/admin/setup.html.twig
index 0dd7e11dde..098c35625c 100644
--- a/templates/web/admin/setup.html.twig
+++ b/templates/web/admin/setup.html.twig
@@ -30,8 +30,7 @@
 </form>
 
 
-
-{{ form_start(form, {'method': 'POST', 'action' : path('setup_display_globals'), 'attr': {'class' : 'form-horizontal'}}) }}
+{{ form_start(form, {'method': 'POST', 'action' : path('setup_display_globals'), 'attr': {'class' : 'form-horizontal', 'id': 'setupForm'}}) }}
 {{ form_errors(form) }}
 {% for daform in form %}
     {% if daform.vars['label'] != null %}