Skip to content

Commit f249289

Browse files
MauricioFauthMauricioFauth
authored
Merge pull request #17924 from MauricioFauth/import-js-upload-progress
Extract inline JS for import's upload progress logic
2 parents a00fabc + f115608 commit f249289

4 files changed

Lines changed: 150 additions & 165 deletions

File tree

‎js/src/import.js‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import $ from 'jquery';
22
import { AJAX } from './ajax.js';
33
import { Functions } from './functions.js';
4+
import { Navigation } from './navigation.js';
5+
import { CommonParams } from './common.js';
6+
7+
/* global themeImagePath */ // templates/javascript/variables.twig
48

59
/**
610
* Functions used in the import tab
@@ -58,6 +62,7 @@ AJAX.registerTeardown('import.js', function () {
5862
$('#input_import_file').off('change').off('focus');
5963
$('#select_local_import_file').off('focus');
6064
$('#text_csv_enclosed').add('#text_csv_escaped').off('keyup');
65+
$('#importmain #buttonGo').off('click');
6166
});
6267

6368
AJAX.registerOnload('import.js', function () {
@@ -155,4 +160,133 @@ AJAX.registerOnload('import.js', function () {
155160
}
156161
return true;
157162
});
163+
164+
$('#importmain #buttonGo').on('click', function () {
165+
const uploadProgressInfo = document.getElementById('upload_progress_info');
166+
const uploadId = uploadProgressInfo.dataset.uploadId;
167+
const handler = uploadProgressInfo.dataset.handler;
168+
169+
$('#upload_form_form').css('display', 'none');
170+
171+
const clockImage = '<img src="' + themeImagePath + 'ajax_clock_small.gif" width="16" height="16" alt="ajax clock">';
172+
173+
if (handler !== 'PhpMyAdmin\\Plugins\\Import\\Upload\\UploadNoplugin') {
174+
var finished = false;
175+
var percent = 0.0;
176+
var total = 0;
177+
var complete = 0;
178+
var originalTitle = parent && parent.document ? parent.document.title : false;
179+
var importStart;
180+
181+
var performUpload = function () {
182+
$.getJSON(
183+
'index.php?route=/import-status',
184+
{ 'id': uploadId, 'import_status': 1, 'server': CommonParams.get('server') },
185+
function (response) {
186+
finished = response.finished;
187+
percent = response.percent;
188+
total = response.total;
189+
complete = response.complete;
190+
191+
if (total === 0 && complete === 0 && percent === 0) {
192+
$('#upload_form_status_info').html(clockImage + ' ' + window.Messages.uploadProgressMaximumAllowedSize);
193+
$('#upload_form_status').css('display', 'none');
194+
} else {
195+
var now = new Date();
196+
now = Date.UTC(
197+
now.getFullYear(),
198+
now.getMonth(),
199+
now.getDate(),
200+
now.getHours(),
201+
now.getMinutes(),
202+
now.getSeconds()
203+
) + now.getMilliseconds() - 1000;
204+
var statusText = Functions.sprintf(
205+
window.Messages.uploadProgressStatusText,
206+
Functions.formatBytes(
207+
complete, 1, window.Messages.strDecimalSeparator
208+
),
209+
Functions.formatBytes(
210+
total, 1, window.Messages.strDecimalSeparator
211+
)
212+
);
213+
214+
if ($('#importmain').is(':visible')) {
215+
// Show progress UI
216+
$('#importmain').hide();
217+
const uploadProgressDiv = '<div class="upload_progress">'
218+
+ '<div class="upload_progress_bar_outer">'
219+
+ '<div class="percentage"></div>'
220+
+ '<div id="status" class="upload_progress_bar_inner">'
221+
+ '<div class="percentage"></div></div></div>'
222+
+ '<div>' + clockImage + ' ' + window.Messages.uploadProgressUploading + '</div>'
223+
+ '<div id="statustext"></div></div>';
224+
$('#import_form_status').html(uploadProgressDiv).show();
225+
importStart = now;
226+
} else if (percent > 9 || complete > 2000000) {
227+
// Calculate estimated time
228+
var usedTime = now - importStart;
229+
var seconds = parseInt(((total - complete) / complete) * usedTime / 1000);
230+
var speed = Functions.sprintf(
231+
window.Messages.uploadProgressPerSecond,
232+
Functions.formatBytes(complete / usedTime * 1000, 1, window.Messages.strDecimalSeparator)
233+
);
234+
235+
var minutes = parseInt(seconds / 60);
236+
seconds %= 60;
237+
var estimatedTime;
238+
if (minutes > 0) {
239+
estimatedTime = window.Messages.uploadProgressRemainingMin
240+
.replace('%MIN', minutes)
241+
.replace('%SEC', seconds);
242+
} else {
243+
estimatedTime = window.Messages.uploadProgressRemainingSec
244+
.replace('%SEC', seconds);
245+
}
246+
247+
statusText += '<br>' + speed + '<br><br>' + estimatedTime;
248+
}
249+
250+
var percentString = Math.round(percent) + '%';
251+
$('#status').animate({ width: percentString }, 150);
252+
$('.percentage').text(percentString);
253+
254+
// Show percent in window title
255+
if (originalTitle !== false) {
256+
parent.document.title
257+
= percentString + ' - ' + originalTitle;
258+
} else {
259+
document.title
260+
= percentString + ' - ' + originalTitle;
261+
}
262+
$('#statustext').html(statusText);
263+
}
264+
265+
if (finished) {
266+
if (originalTitle !== false) {
267+
parent.document.title = originalTitle;
268+
} else {
269+
document.title = originalTitle;
270+
}
271+
$('#importmain').hide();
272+
// Loads the message, either success or mysql error
273+
$('#import_form_status')
274+
.html(clockImage + ' ' + window.Messages.uploadProgressBeingProcessed)
275+
.show();
276+
$('#import_form_status').load(
277+
'index.php?route=/import-status&message=1&import_status=1&server=' + CommonParams.get('server')
278+
);
279+
Navigation.reload();
280+
} else {
281+
setTimeout(performUpload, 1000);
282+
}
283+
});
284+
};
285+
setTimeout(performUpload, 1000);
286+
} else {
287+
// No plugin available
288+
$('#upload_form_status_info').html(clockImage + ' ' + window.Messages.uploadProgressNoDetails);
289+
$('#upload_form_status').css('display', 'none');
290+
}
291+
});
158292
});

‎libraries/classes/Controllers/JavaScriptMessagesController.php‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -853,6 +853,19 @@ private function setMessages(): array
853853
'These functions are meant to return a binary result; to avoid inconsistent results you should store'
854854
. ' it in a BINARY, VARBINARY, or BLOB column.'
855855
),
856+
857+
'uploadProgressMaximumAllowedSize' => __(
858+
'The file being uploaded is probably larger than the maximum allowed size.'
859+
),
860+
'uploadProgressStatusText' => __('%s of %s'),
861+
'uploadProgressPerSecond' => __('%s/sec.'),
862+
'uploadProgressRemainingMin' => __('About %MIN min. %SEC sec. remaining.'),
863+
'uploadProgressRemainingSec' => __('About %SEC sec. remaining.'),
864+
'uploadProgressBeingProcessed' => __('The file is being processed, please be patient.'),
865+
'uploadProgressUploading' => __('Uploading your import file…'),
866+
'uploadProgressNoDetails' => __(
867+
'Please be patient, the file is being uploaded. Details about the upload are not available.'
868+
),
856869
];
857870
}
858871
}

‎templates/import.twig‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,12 @@
99

1010
<iframe id="import_upload_iframe" name="import_upload_iframe" width="1" height="1" class="hide"></iframe>
1111
<div id="import_form_status" class="hide"></div>
12+
13+
<div class="d-none" id="upload_progress_info" data-upload-id="{{ upload_id|e('html_attr') }}" data-handler="{{ handler|e('html_attr') }}"></div>
14+
1215
<div id="importmain">
1316
<img src="{{ image('ajax_clock_small.gif') }}" width="16" height="16" alt="ajax clock" class="hide">
1417

15-
<script type="text/javascript">
16-
//<![CDATA[
17-
{% include 'import/javascript.twig' with {'upload_id': upload_id, 'handler': handler} only %}
18-
//]]>
19-
</script>
20-
2118
<form id="import_file_form" action="{{ url('/import') }}" method="post" enctype="multipart/form-data" name="import" class="ajax"
2219
{%- if handler != 'PhpMyAdmin\\Plugins\\Import\\Upload\\UploadNoplugin' %} target="import_upload_iframe"{% endif %}>
2320
{{ get_hidden_inputs(hidden_inputs) }}

‎templates/import/javascript.twig‎

Lines changed: 0 additions & 159 deletions
This file was deleted.

0 commit comments

Comments
 (0)