Add chunk size input

Author: sangnguyenplus

public/js/data-synchronize.js

@@ -71,7 +71,7 @@ $(() => {
             dropzone.removeAllFiles()
         }
 
-        const importData = (fileName, offset, limit = $form.data('chunk-size'), total = 0) => {
+        const importData = (fileName, offset, limit = parseInt($form.find('input[name=chunk_size]').val()), total = 0) => {
             formData.set('file_name', fileName)
             formData.set('offset', offset)
             formData.set('limit', limit)
@@ -92,7 +92,7 @@ $(() => {
                 .catch(() => cleanup())
         }
 
-        const validate = (fileName, offset, limit = $form.data('chunk-size')) => {
+        const validate = (fileName, offset, limit = parseInt($form.find('input[name=chunk_size]').val())) => {
             formData.set('file_name', fileName)
             formData.set('offset', offset)
             formData.set('limit', limit)

resources/js/data-synchronize.js

@@ -16,6 +16,8 @@
             'dropzone_message' => 'Drag and drop file here or click to upload',
             'allowed_extensions' => 'Choose a file with following extensions: :extensions.',
             'import_button' => 'Import',
+            'chunk_size' => 'Chunk size',
+            'chunk_size_helper' => 'The number of rows to be imported at a time is defined by the chunk size. Increase this value if you have a large file and data is imported very fast. Decrease this value if you encounter memory limits or gateway timeout issues when importing data.',
         ],
 
         'example' => [

resources/lang/en/data-synchronize.php

@@ -13,7 +13,6 @@
     :data-import-url="$importer->getImportUrl()"
     data-bb-toggle="import-form"
     :data-accepted-files="$acceptedFiles"
-    :data-chunk-size="$importer->chunkSize()"
     :data-uploading-message="trans('packages/data-synchronize::data-synchronize.import.uploading_message')"
     :data-validate-failed-message="trans('packages/data-synchronize::data-synchronize.import.validating_failed_message')"
     class="data-synchronize-import-form"
@@ -54,7 +53,7 @@ class="data-synchronize-import-form"
 
             {!! apply_filters('data_synchronize_import_form_before', null, $importer) !!}
 
-            <div>
+            <div class="mb-3">
                 <div class="dropzone">
                     <div class="dz-message">
                         {{ trans('packages/data-synchronize::data-synchronize.import.form.dropzone_message') }}
@@ -66,6 +65,14 @@ class="data-synchronize-import-form"
                 </x-core::form.helper-text>
             </div>
 
+            <div class="mb-3">
+                <x-core::form.label for="chunk-size">{{ trans('packages/data-synchronize::data-synchronize.import.form.chunk_size') }}</x-core::form.label>
+                <x-core::form.text-input type="number" class="form-control" id="chunk-size" name="chunk_size" value="{{ $importer->chunkSize() }}" />
+                <x-core::form.helper-text>
+                    {{ trans('packages/data-synchronize::data-synchronize.import.form.chunk_size_helper') }}
+                </x-core::form.helper-text>
+            </div>
+
             {!! apply_filters('data_synchronize_import_form_after', null, $importer) !!}
 
             <pre class="mt-3 data-synchronize-import-output" style="display: none"></pre>