413 nginx error fix

resources/assets/js/utils/fileHandler.js

@@ -0,0 +1,25 @@
+function validateFileSize() {
+    var input, file;
+
+    if (!window.FileReader) {
+        return true;
+    }
+
+    input = document.getElementById('thumbnail');
+    if(undefined )
+
+
+    if (!input) {
+        return true;
+    }
+    if (!input.files) {
+        return true;
+    }
+    else if (!input.files[0]) {
+        return true;
+    }
+    else {
+        file = input.files[0];
+        return file.size < 20971520; //file needs to be smaller dan 20 mb
+    }
+};

resources/lang/en/validation.php

@@ -18,6 +18,7 @@
     "date" => "Invalid birth date",
     "error" => "Error",
     'bannedEmailDomain' => "Email addresses of educational institutions (student.tue.nl) are not allowed to make sure you can still receive our emails after you graduate",
+    'fileToLarge' => 'Files is to large. The max size is 20mb',
     'attributes' => [
         'privacy_policy' => 'Privacy Policy',
         'termsconditions' => 'Terms and Conditions',

resources/lang/nl/validation.php

@@ -18,6 +18,7 @@
     "date" => "Geen geldige geboortedatum",
     "error" => "Error",
     'bannedEmailDomain' => "Email adressen van onderwijsinstellingen (student.tue.nl) zijn niet toegestaan om te voorkomen dat je onze mails niet meer ontvangt na je afstuderen",
+    'fileToLarge' => 'Bestanden is te groot. Bestanden mogen maximaal 20mb zijn',
     'attributes' => [
         'privacy_policy' => 'Privacy Policy',
         'termsconditions' => 'Terms and Conditions',

resources/views/beheer/agendaItem/create_edit.blade.php

@@ -23,7 +23,7 @@
         </ul>
     @endif
 
-    {!! Form::open(['method' => $fields['method'], 'url' => $fields['url'], 'enctype' => 'multipart/form-data'])  !!}
+    {!! Form::open(['method' => $fields['method'], 'url' => $fields['url'], 'enctype' => 'multipart/form-data', 'id' => 'agenda-form'])  !!}
     @include('beheer.agendaItem.create_edit_default_info')
     @include('beheer.agendaItem.create_edit_image')
     @include('beheer.agendaItem.create_edit_content')
@@ -37,6 +37,7 @@
 
 @push('scripts')
 <script src="{{mix("js/vendor/moment.js")}}" type="text/javascript"></script>
+<script src="{{mix("js/fileHandler.js")}}" type="text/javascript"></script>
 <script src="{{mix("js/vendor/tempusdominus.js")}}" type="text/javascript"></script>
 <script type="text/javascript">
     $('#startDateBox, #endDateBox, #subscription_endDateBox').datetimepicker({
@@ -54,6 +55,13 @@
         }
     });
 
+    $('#agenda-form').on('submit', function(event){
+        if(false === validateFileSize()){
+            alert('{{ trans('validation.fileToLarge') }}');
+            return false;
+        }
+    })
+
     $(function () {
         $('#startDateBox').datetimepicker();
         $('#startDateBox').datetimepicker();

resources/views/beheer/newsItem/create_edit.blade.php

@@ -70,11 +70,19 @@
 @endsection
 
 @push('scripts')
+    <script src="{{mix("js/fileHandler.js")}}" type="text/javascript"></script>
     <script type="text/javascript">
         $('.custom-file-input').on('change', function() { 
            let fileName = $(this).val().split('\\').pop(); 
            $(this).next('.custom-file-label').addClass("selected").html(fileName); 
         });
+
+        $('#news-item-form').on('submit', function(event){
+            if(false === validateFileSize()){
+                alert('{{ trans('validation.fileToLarge') }}');
+                return false;
+            }
+        })
     </script>
 
     <script type="text/javascript">

webpack.mix.js

@@ -35,6 +35,7 @@ mix.copy("node_modules/jquery/dist/jquery.js", "public/js/vendor")
    .copy("node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.js", "public/js/vendor/tempusdominus.js")
    .copy("node_modules/bootstrap/dist/js/bootstrap.js", "public/js/vendor")
    .copy("resources/assets/js/photoAlbum.js","public/js")
+   .copy("resources/assets/js/utils/fileHandler.js","public/js")
    .copy("node_modules/photoswipe/dist/photoswipe.min.js","public/js")
    .copy("node_modules/photoswipe/dist/photoswipe-ui-default.min.js","public/js")
    .copy("node_modules/blueimp-load-image/js/load-image.all.min.js","public/js");