2 /* This script handles PMA Drag Drop Import, loaded only when configuration is enabled.*/
5 * Class to handle PMA Drag and Drop Import
10 * @var int, count of total uploads in this view
14 * @var int, count of live uploads
18 * @var string array, allowed extensions
20 allowedExtensions: ['sql', 'xml', 'ldi', 'mediawiki', 'shp'],
22 * @var string array, allowed extensions for compressed files
24 allowedCompressedExtensions: ['gz', 'bz2', 'zip'],
26 * @var obj array to store message returned by /import-status
30 * Checks if any dropped file has valid extension or not
32 * @param file filename
34 * @return string, extension for valid extension, '' otherwise
36 getExtension: function (file) {
37 var arr = file.split('.');
38 var ext = arr[arr.length - 1];
40 // check if compressed
41 if (jQuery.inArray(ext.toLowerCase(),
42 DragDropImport.allowedCompressedExtensions) !== -1) {
43 ext = arr[arr.length - 2];
46 // Now check for extension
47 if (jQuery.inArray(ext.toLowerCase(),
48 DragDropImport.allowedExtensions) !== -1) {
54 * Shows upload progress for different sql uploads
56 * @param: hash (string), hash for specific file upload
57 * @param: percent (float), file upload percentage
61 setProgress: function (hash, percent) {
62 $('.pma_sql_import_status div li[data-hash="' + hash + '"]')
63 .children('progress').val(percent);
66 * Function to upload the file asynchronously
68 * @param formData FormData object for a specific file
69 * @param hash hash of the current file upload
73 sendFileToServer: function (formData, hash) {
76 var xhrobj = $.ajaxSettings.xhr();
78 xhrobj.upload.addEventListener('progress', function (event) {
80 var position = event.loaded || event.position;
81 var total = event.total;
82 if (event.lengthComputable) {
83 percent = Math.ceil(position / total * 100);
86 DragDropImport.setProgress(hash, percent);
91 url: 'index.php?route=/import',
97 success: function (data) {
98 DragDropImport.importFinished(hash, false, data.success);
100 DragDropImport.importStatus[DragDropImport.importStatus.length] = {
108 // -- provide link to cancel the upload
109 $('.pma_sql_import_status div li[data-hash="' + hash +
110 '"] span.filesize').html('<span hash="' +
111 hash + '" class="pma_drop_file_status" task="cancel">' +
112 Messages.dropImportMessageCancel + '</span>');
114 // -- add event listener to this link to abort upload operation
115 $('.pma_sql_import_status div li[data-hash="' + hash +
116 '"] span.filesize span.pma_drop_file_status')
117 .on('click', function () {
118 if ($(this).attr('task') === 'cancel') {
120 $(this).html('<span>' + Messages.dropImportMessageAborted + '</span>');
121 DragDropImport.importFinished(hash, true, false);
122 } else if ($(this).children('span').html() ===
123 Messages.dropImportMessageFailed) {
124 // -- view information
126 $.each(DragDropImport.importStatus,
127 function (key, value) {
128 if (value.hash === hash) {
129 $('.pma_drop_result:visible').remove();
130 var filename = $this.parent('span').attr('data-filename');
131 $('body').append('<div class="pma_drop_result"><h2>' +
132 Messages.dropImportImportResultHeader + ' - ' +
133 filename + '<span class="close">x</span></h2>' + value.message + '</div>');
134 $('.pma_drop_result').draggable(); // to make this dialog draggable
141 * Triggered when an object is dragged into the PMA UI
147 dragEnter : function (event) {
148 // We don't want to prevent users from using
149 // browser's default drag-drop feature on some page(s)
150 if ($('.noDragDrop').length !== 0) {
154 event.stopPropagation();
155 event.preventDefault();
156 if (!DragDropImport.hasFiles(event)) {
159 if (CommonParams.get('db') === '') {
160 $('.pma_drop_handler').html(Messages.dropImportSelectDB);
162 $('.pma_drop_handler').html(Messages.dropImportDropFiles);
164 $('.pma_drop_handler').fadeIn();
167 * Check if dragged element contains Files
169 * @param event the event object
173 hasFiles: function (event) {
174 return !(typeof event.originalEvent.dataTransfer.types === 'undefined' ||
175 $.inArray('Files', event.originalEvent.dataTransfer.types) < 0 ||
177 'application/x-moz-nativeimage',
178 event.originalEvent.dataTransfer.types
182 * Triggered when dragged file is being dragged over PMA UI
188 dragOver: function (event) {
189 // We don't want to prevent users from using
190 // browser's default drag-drop feature on some page(s)
191 if ($('.noDragDrop').length !== 0) {
195 event.stopPropagation();
196 event.preventDefault();
197 if (!DragDropImport.hasFiles(event)) {
200 $('.pma_drop_handler').fadeIn();
203 * Triggered when dragged objects are left
209 dragLeave: function (event) {
210 // We don't want to prevent users from using
211 // browser's default drag-drop feature on some page(s)
212 if ($('.noDragDrop').length !== 0) {
215 event.stopPropagation();
216 event.preventDefault();
217 var $dropHandler = $('.pma_drop_handler');
218 $dropHandler.clearQueue().stop();
219 $dropHandler.fadeOut();
220 $dropHandler.html(Messages.dropImportDropFiles);
223 * Called when upload has finished
225 * @param string, unique hash for a certain upload
226 * @param bool, true if upload was aborted
227 * @param bool, status of sql upload, as sent by server
231 importFinished: function (hash, aborted, status) {
232 $('.pma_sql_import_status div li[data-hash="' + hash + '"]')
233 .children('progress').hide();
234 var icon = 'icon ic_s_success';
235 // -- provide link to view upload status
238 $('.pma_sql_import_status div li[data-hash="' + hash +
239 '"] span.filesize span.pma_drop_file_status')
240 .html('<span>' + Messages.dropImportMessageSuccess + '</a>');
242 $('.pma_sql_import_status div li[data-hash="' + hash +
243 '"] span.filesize span.pma_drop_file_status')
244 .html('<span class="underline">' + Messages.dropImportMessageFailed +
246 icon = 'icon ic_s_error';
249 icon = 'icon ic_s_notice';
251 $('.pma_sql_import_status div li[data-hash="' + hash +
252 '"] span.filesize span.pma_drop_file_status')
253 .attr('task', 'info');
256 $('.pma_sql_import_status div li[data-hash="' + hash + '"]')
257 .prepend('<img src="./themes/dot.gif" title="finished" class="' +
260 // Decrease liveUploadCount by one
261 $('.pma_import_count').html(--DragDropImport.liveUploadCount);
262 if (!DragDropImport.liveUploadCount) {
263 $('.pma_sql_import_status h2 .close').fadeIn();
267 * Triggered when dragged objects are dropped to UI
268 * From this function, the AJAX Upload operation is initiated
270 * @param event object
274 drop: function (event) {
275 // We don't want to prevent users from using
276 // browser's default drag-drop feature on some page(s)
277 if ($('.noDragDrop').length !== 0) {
281 var dbname = CommonParams.get('db');
282 var server = CommonParams.get('server');
284 // if no database is selected -- no
286 var files = event.originalEvent.dataTransfer.files;
287 if (!files || files.length === 0) {
288 // No files actually transferred
289 $('.pma_drop_handler').fadeOut();
290 event.stopPropagation();
291 event.preventDefault();
294 $('.pma_sql_import_status').slideDown();
295 for (var i = 0; i < files.length; i++) {
296 var ext = (DragDropImport.getExtension(files[i].name));
297 var hash = AJAX.hash(++DragDropImport.uploadCount);
299 var $sqlImportStatusDiv = $('.pma_sql_import_status div');
300 $sqlImportStatusDiv.append('<li data-hash="' + hash + '">' +
301 ((ext !== '') ? '' : '<img src="./themes/dot.gif" title="invalid format" class="icon ic_s_notice"> ') +
302 Functions.escapeHtml(files[i].name) + '<span class="filesize" data-filename="' +
303 Functions.escapeHtml(files[i].name) + '">' + (files[i].size / 1024).toFixed(2) +
306 // scroll the UI to bottom
307 $sqlImportStatusDiv.scrollTop(
308 $sqlImportStatusDiv.scrollTop() + 50
309 ); // 50 hardcoded for now
312 // Increment liveUploadCount by one
313 $('.pma_import_count').html(++DragDropImport.liveUploadCount);
314 $('.pma_sql_import_status h2 .close').fadeOut();
316 $('.pma_sql_import_status div li[data-hash="' + hash + '"]')
317 .append('<br><progress max="100" value="2"></progress>');
320 var fd = new FormData();
321 fd.append('import_file', files[i]);
322 fd.append('noplugin', Math.random().toString(36).substring(2, 12));
323 fd.append('db', dbname);
324 fd.append('server', server);
325 fd.append('token', CommonParams.get('token'));
326 fd.append('import_type', 'database');
327 // todo: method to find the value below
328 fd.append('MAX_FILE_SIZE', '4194304');
329 // todo: method to find the value below
330 fd.append('charset_of_file','utf-8');
331 // todo: method to find the value below
332 fd.append('allow_interrupt', 'yes');
333 fd.append('skip_queries', '0');
334 fd.append('format',ext);
335 fd.append('sql_compatibility','NONE');
336 fd.append('sql_no_auto_value_on_zero','something');
337 fd.append('ajax_request','true');
338 fd.append('hash', hash);
341 DragDropImport.sendFileToServer(fd, hash);
342 } else if (!DragDropImport.liveUploadCount) {
343 $('.pma_sql_import_status h2 .close').fadeIn();
347 $('.pma_drop_handler').fadeOut();
348 event.stopPropagation();
349 event.preventDefault();
354 * Called when some user drags, dragover, leave
355 * a file to the PMA UI
356 * @param object Event data
359 $(document).on('dragenter', DragDropImport.dragEnter);
360 $(document).on('dragover', DragDropImport.dragOver);
361 $(document).on('dragleave', '.pma_drop_handler', DragDropImport.dragLeave);
363 // when file is dropped to PMA UI
364 $(document).on('drop', 'body', DragDropImport.drop);
366 // minimizing-maximising the sql ajax upload status
367 $(document).on('click', '.pma_sql_import_status h2 .minimize', function () {
368 if ($(this).attr('toggle') === 'off') {
369 $('.pma_sql_import_status div').css('height','270px');
370 $(this).attr('toggle','on');
371 $(this).html('-'); // to minimize
373 $('.pma_sql_import_status div').css('height','0px');
374 $(this).attr('toggle','off');
375 $(this).html('+'); // to maximise
379 // closing sql ajax upload status
380 $(document).on('click', '.pma_sql_import_status h2 .close', function () {
381 $('.pma_sql_import_status').fadeOut(function () {
382 $('.pma_sql_import_status div').html('');
383 DragDropImport.importStatus = []; // clear the message array
387 // Closing the import result box
388 $(document).on('click', '.pma_drop_result h2 .close', function () {
389 $(this).parent('h2').parent('div').remove();