');
-
- // Decrease liveUploadCount by one
- $('.pma_import_count').html(--PMA_DROP_IMPORT.liveUploadCount);
- if (!PMA_DROP_IMPORT.liveUploadCount) {
- $('.pma_sql_import_status h2 .close').fadeIn();
- }
- },
- /**
- * Triggered when dragged objects are dropped to UI
- * From this function, the AJAX Upload operation is initiated
- *
- * @param event object
- *
- * @return void
- */
- _drop: function (event) {
- // We don't want to prevent users from using
- // browser's default drag-drop feature on some page(s)
- if ($('.noDragDrop').length !== 0) {
- return;
- }
-
- var dbname = PMA_commonParams.get('db');
- var server = PMA_commonParams.get('server');
-
- // if no database is selected -- no
- if (dbname !== '') {
- var files = event.originalEvent.dataTransfer.files;
- if (!files || files.length === 0) {
- // No files actually transferred
- $('.pma_drop_handler').fadeOut();
- event.stopPropagation();
- event.preventDefault();
- return;
- }
- $('.pma_sql_import_status').slideDown();
- for (var i = 0; i < files.length; i++) {
- var ext = (PMA_DROP_IMPORT._getExtension(files[i].name));
- var hash = AJAX.hash(++PMA_DROP_IMPORT.uploadCount);
-
- var $pma_sql_import_status_div = $('.pma_sql_import_status div');
- $pma_sql_import_status_div.append(' ') +
- escapeHtml(files[i].name) + '' + (files[i].size / 1024).toFixed(2) +
- ' kb'); - - // uploading - var fd = new FormData(); - fd.append('import_file', files[i]); - fd.append('noplugin', Math.random().toString(36).substring(2, 12)); - fd.append('db', dbname); - fd.append('server', server); - fd.append('token', PMA_commonParams.get('token')); - fd.append('import_type', 'database'); - // todo: method to find the value below - fd.append('MAX_FILE_SIZE', '4194304'); - // todo: method to find the value below - fd.append('charset_of_file','utf-8'); - // todo: method to find the value below - fd.append('allow_interrupt', 'yes'); - fd.append('skip_queries', '0'); - fd.append('format',ext); - fd.append('sql_compatibility','NONE'); - fd.append('sql_no_auto_value_on_zero','something'); - fd.append('ajax_request','true'); - fd.append('hash', hash); - - // init uploading - PMA_DROP_IMPORT._sendFileToServer(fd, hash); - } else if (!PMA_DROP_IMPORT.liveUploadCount) { - $('.pma_sql_import_status h2 .close').fadeIn(); - } - } - } - $('.pma_drop_handler').fadeOut(); - event.stopPropagation(); - event.preventDefault(); - } -}; - -/** - * Called when some user drags, dragover, leave - * a file to the PMA UI - * @param object Event data - * @return void - */ -$(document).on('dragenter', PMA_DROP_IMPORT._dragenter); -$(document).on('dragover', PMA_DROP_IMPORT._dragover); -$(document).on('dragleave', '.pma_drop_handler', PMA_DROP_IMPORT._dragleave); - -// when file is dropped to PMA UI -$(document).on('drop', 'body', PMA_DROP_IMPORT._drop); - -// minimizing-maximising the sql ajax upload status -$(document).on('click', '.pma_sql_import_status h2 .minimize', function () { - if ($(this).attr('toggle') === 'off') { - $('.pma_sql_import_status div').css('height','270px'); - $(this).attr('toggle','on'); - $(this).html('-'); // to minimize - } else { - $('.pma_sql_import_status div').css('height','0px'); - $(this).attr('toggle','off'); - $(this).html('+'); // to maximise - } -}); - -// closing sql ajax upload status -$(document).on('click', '.pma_sql_import_status h2 .close', function () { - $('.pma_sql_import_status').fadeOut(function () { - $('.pma_sql_import_status div').html(''); - PMA_DROP_IMPORT.importStatus = []; // clear the message array - }); -}); - -// Closing the import result box -$(document).on('click', '.pma_drop_result h2 .close', function () { - $(this).parent('h2').parent('div').remove(); -}); +}; \ No newline at end of file diff --git a/js/drag_drop_import.js b/js/drag_drop_import.js new file mode 100644 index 0000000000..73483373dd --- /dev/null +++ b/js/drag_drop_import.js @@ -0,0 +1,393 @@ +/* vim: set expandtab sw=4 ts=4 sts=4: */ + +/* This script handles PMA Drag Drop Import, loaded only when configuration is enabled.*/ + +/** + * Class to handle PMA Drag and Drop Import + * feature + */ +PMA_DROP_IMPORT = { + /** + * @var int, count of total uploads in this view + */ + uploadCount: 0, + /** + * @var int, count of live uploads + */ + liveUploadCount: 0, + /** + * @var string array, allowed extensions + */ + allowedExtensions: ['sql', 'xml', 'ldi', 'mediawiki', 'shp'], + /** + * @var string array, allowed extensions for compressed files + */ + allowedCompressedExtensions: ['gz', 'bz2', 'zip'], + /** + * @var obj array to store message returned by import_status.php + */ + importStatus: [], + /** + * Checks if any dropped file has valid extension or not + * + * @param file filename + * + * @return string, extension for valid extension, '' otherwise + */ + _getExtension: function (file) { + var arr = file.split('.'); + ext = arr[arr.length - 1]; + + // check if compressed + if (jQuery.inArray(ext.toLowerCase(), + PMA_DROP_IMPORT.allowedCompressedExtensions) !== -1) { + ext = arr[arr.length - 2]; + } + + // Now check for extension + if (jQuery.inArray(ext.toLowerCase(), + PMA_DROP_IMPORT.allowedExtensions) !== -1) { + return ext; + } + return ''; + }, + /** + * Shows upload progress for different sql uploads + * + * @param: hash (string), hash for specific file upload + * @param: percent (float), file upload percentage + * + * @return void + */ + _setProgress: function (hash, percent) { + $('.pma_sql_import_status div li[data-hash="' + hash + '"]') + .children('progress').val(percent); + }, + /** + * Function to upload the file asynchronously + * + * @param formData FormData object for a specific file + * @param hash hash of the current file upload + * + * @return void + */ + _sendFileToServer: function (formData, hash) { + var uploadURL = './import.php'; // Upload URL + var extraData = {}; + var jqXHR = $.ajax({ + xhr: function () { + var xhrobj = $.ajaxSettings.xhr(); + if (xhrobj.upload) { + xhrobj.upload.addEventListener('progress', function (event) { + var percent = 0; + var position = event.loaded || event.position; + var total = event.total; + if (event.lengthComputable) { + percent = Math.ceil(position / total * 100); + } + // Set progress + PMA_DROP_IMPORT._setProgress(hash, percent); + }, false); + } + return xhrobj; + }, + url: uploadURL, + type: 'POST', + contentType:false, + processData: false, + cache: false, + data: formData, + success: function (data) { + PMA_DROP_IMPORT._importFinished(hash, false, data.success); + if (!data.success) { + PMA_DROP_IMPORT.importStatus[PMA_DROP_IMPORT.importStatus.length] = { + hash: hash, + message: data.error + }; + } + } + }); + + // -- provide link to cancel the upload + $('.pma_sql_import_status div li[data-hash="' + hash + + '"] span.filesize').html('' + + PMA_messages.dropImportMessageCancel + ''); + + // -- add event listener to this link to abort upload operation + $('.pma_sql_import_status div li[data-hash="' + hash + + '"] span.filesize span.pma_drop_file_status') + .on('click', function () { + if ($(this).attr('task') === 'cancel') { + jqXHR.abort(); + $(this).html('' + PMA_messages.dropImportMessageAborted + ''); + PMA_DROP_IMPORT._importFinished(hash, true, false); + } else if ($(this).children('span').html() === + PMA_messages.dropImportMessageFailed) { + // -- view information + var $this = $(this); + $.each(PMA_DROP_IMPORT.importStatus, + function (key, value) { + if (value.hash === hash) { + $('.pma_drop_result:visible').remove(); + var filename = $this.parent('span').attr('data-filename'); + $('body').append('
' + + PMA_messages.dropImportImportResultHeader + ' - ' + + filename + 'x
' + value.message + ' ');
+
+ // Decrease liveUploadCount by one
+ $('.pma_import_count').html(--PMA_DROP_IMPORT.liveUploadCount);
+ if (!PMA_DROP_IMPORT.liveUploadCount) {
+ $('.pma_sql_import_status h2 .close').fadeIn();
+ }
+ },
+ /**
+ * Triggered when dragged objects are dropped to UI
+ * From this function, the AJAX Upload operation is initiated
+ *
+ * @param event object
+ *
+ * @return void
+ */
+ _drop: function (event) {
+ // We don't want to prevent users from using
+ // browser's default drag-drop feature on some page(s)
+ if ($('.noDragDrop').length !== 0) {
+ return;
+ }
+
+ var dbname = PMA_commonParams.get('db');
+ var server = PMA_commonParams.get('server');
+
+ // if no database is selected -- no
+ if (dbname !== '') {
+ var files = event.originalEvent.dataTransfer.files;
+ if (!files || files.length === 0) {
+ // No files actually transferred
+ $('.pma_drop_handler').fadeOut();
+ event.stopPropagation();
+ event.preventDefault();
+ return;
+ }
+ $('.pma_sql_import_status').slideDown();
+ for (var i = 0; i < files.length; i++) {
+ var ext = (PMA_DROP_IMPORT._getExtension(files[i].name));
+ var hash = AJAX.hash(++PMA_DROP_IMPORT.uploadCount);
+
+ var $pma_sql_import_status_div = $('.pma_sql_import_status div');
+ $pma_sql_import_status_div.append(' ') +
+ escapeHtml(files[i].name) + '' + (files[i].size / 1024).toFixed(2) +
+ ' kb'); + + // uploading + var fd = new FormData(); + fd.append('import_file', files[i]); + fd.append('noplugin', Math.random().toString(36).substring(2, 12)); + fd.append('db', dbname); + fd.append('server', server); + fd.append('token', PMA_commonParams.get('token')); + fd.append('import_type', 'database'); + // todo: method to find the value below + fd.append('MAX_FILE_SIZE', '4194304'); + // todo: method to find the value below + fd.append('charset_of_file','utf-8'); + // todo: method to find the value below + fd.append('allow_interrupt', 'yes'); + fd.append('skip_queries', '0'); + fd.append('format',ext); + fd.append('sql_compatibility','NONE'); + fd.append('sql_no_auto_value_on_zero','something'); + fd.append('ajax_request','true'); + fd.append('hash', hash); + + // init uploading + PMA_DROP_IMPORT._sendFileToServer(fd, hash); + } else if (!PMA_DROP_IMPORT.liveUploadCount) { + $('.pma_sql_import_status h2 .close').fadeIn(); + } + } + } + $('.pma_drop_handler').fadeOut(); + event.stopPropagation(); + event.preventDefault(); + } +}; + +/** + * Called when some user drags, dragover, leave + * a file to the PMA UI + * @param object Event data + * @return void + */ +$(document).on('dragenter', PMA_DROP_IMPORT._dragenter); +$(document).on('dragover', PMA_DROP_IMPORT._dragover); +$(document).on('dragleave', '.pma_drop_handler', PMA_DROP_IMPORT._dragleave); + +// when file is dropped to PMA UI +$(document).on('drop', 'body', PMA_DROP_IMPORT._drop); + +// minimizing-maximising the sql ajax upload status +$(document).on('click', '.pma_sql_import_status h2 .minimize', function () { + if ($(this).attr('toggle') === 'off') { + $('.pma_sql_import_status div').css('height','270px'); + $(this).attr('toggle','on'); + $(this).html('-'); // to minimize + } else { + $('.pma_sql_import_status div').css('height','0px'); + $(this).attr('toggle','off'); + $(this).html('+'); // to maximise + } +}); + +// closing sql ajax upload status +$(document).on('click', '.pma_sql_import_status h2 .close', function () { + $('.pma_sql_import_status').fadeOut(function () { + $('.pma_sql_import_status div').html(''); + PMA_DROP_IMPORT.importStatus = []; // clear the message array + }); +}); + +// Closing the import result box +$(document).on('click', '.pma_drop_result h2 .close', function () { + $(this).parent('h2').parent('div').remove(); +}); diff --git a/libraries/classes/Config/Descriptions.php b/libraries/classes/Config/Descriptions.php index 46c06f7fa2..c7827aa2f0 100644 --- a/libraries/classes/Config/Descriptions.php +++ b/libraries/classes/Config/Descriptions.php @@ -627,9 +627,9 @@ class Descriptions . 'This might be a good way to import large files, however it can break ' . 'transactions.' ); - case 'Import_enable_drag_drop_import_name': + case 'enable_drag_drop_import_name': return __('Enable drag and drop import'); - case 'Import_enable_drag_drop_import_desc': + case 'enable_drag_drop_import_desc': return __('Uncheck the checkbox to disable drag and drop import'); case 'Import_allow_interrupt_name': return __('Partial import: allow interrupt'); diff --git a/libraries/classes/Config/Forms/User/ImportForm.php b/libraries/classes/Config/Forms/User/ImportForm.php index 592a9fe802..1853e33b28 100644 --- a/libraries/classes/Config/Forms/User/ImportForm.php +++ b/libraries/classes/Config/Forms/User/ImportForm.php @@ -28,7 +28,7 @@ class ImportForm extends BaseForm 'Import/charset', 'Import/allow_interrupt', 'Import/skip_queries', - 'Import/enable_drag_drop_import' + 'enable_drag_drop_import' ], 'Sql' => [ 'Import/sql_compatibility', diff --git a/libraries/classes/Header.php b/libraries/classes/Header.php index 70b7357169..cded95e66b 100644 --- a/libraries/classes/Header.php +++ b/libraries/classes/Header.php @@ -210,6 +210,9 @@ class Header $this->_scripts->addFile('indexes.js'); $this->_scripts->addFile('common.js'); $this->_scripts->addFile('page_settings.js'); + if($GLOBALS['cfg']['enable_drag_drop_import'] === true) { + $this->_scripts->addFile('drag_drop_import.js'); + } if (! $GLOBALS['PMA_Config']->get('DisableShortcutKeys')) { $this->_scripts->addFile('shortcuts_handler.js'); } diff --git a/libraries/classes/Navigation/Navigation.php b/libraries/classes/Navigation/Navigation.php index da7d030dff..017135c4df 100644 --- a/libraries/classes/Navigation/Navigation.php +++ b/libraries/classes/Navigation/Navigation.php @@ -83,7 +83,7 @@ class Navigation } $retval .= ''; //pma_navi_settings_container $retval .= ''; // pma_navigation_content - if($GLOBALS['cfg']['Import']['enable_drag_drop_import'] === true) { //load drag drop handler only if configuration setting is set to true + if($GLOBALS['cfg']['enable_drag_drop_import'] === true) { //load drag drop handler only if configuration setting is set to true $retval .= $this->_getDropHandler(); } $retval .= ''; // pma_navigation diff --git a/libraries/config.default.php b/libraries/config.default.php index 31a8bf5d28..9b06e07a16 100644 --- a/libraries/config.default.php +++ b/libraries/config.default.php @@ -849,6 +849,14 @@ $cfg['CaptchaLoginPublicKey'] = ''; */ $cfg['CaptchaLoginPrivateKey'] = ''; +/** + * Enable drag and drop import + * @see feature request : https://github.com/phpmyadmin/phpmyadmin/issues/13155 + * + * @global bool $cfg['enable_drag_drop_import'] + */ +$cfg['enable_drag_drop_import'] = true; + /******************************************************************************* * Navigation panel setup */ @@ -2179,14 +2187,6 @@ $cfg['Import']['charset'] = ''; */ $cfg['Import']['allow_interrupt'] = true; -/** - * Enable drag and drop import - * @see feature request : https://github.com/phpmyadmin/phpmyadmin/issues/13155 - * - * @global bool $cfg['Import']['enable_drag_drop_import'] - */ -$cfg['Import']['enable_drag_drop_import'] = true; - /** * *