diff options
Diffstat (limited to 'js/src/classes/DragDropImport.js')
| -rw-r--r-- | js/src/classes/DragDropImport.js | 363 |
1 files changed, 363 insertions, 0 deletions
diff --git a/js/src/classes/DragDropImport.js b/js/src/classes/DragDropImport.js new file mode 100644 index 0000000000..14d25f3e0d --- /dev/null +++ b/js/src/classes/DragDropImport.js @@ -0,0 +1,363 @@ +/* vim: set expandtab sw=4 ts=4 sts=4: */ + + +/** + * Module import + */ +import { PMA_Messages as PMA_messages } from '../variables/export_variables'; +import PMA_commonParams from '../variables/common_params'; +import { escapeHtml } from '../utils/Sanitise'; +import { AJAX } from '../ajax'; + +/** + * Class to handle PMA Drag and Drop Import + * feature + */ +var DragDropImport = { + /** + * @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('.'); + var ext = arr[arr.length - 1]; + + // check if compressed + if (jQuery.inArray(ext.toLowerCase(), + DragDropImport.allowedCompressedExtensions) !== -1) { + ext = arr[arr.length - 2]; + } + + // Now check for extension + if (jQuery.inArray(ext.toLowerCase(), + DragDropImport.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 + DragDropImport._setProgress(hash, percent); + }, false); + } + return xhrobj; + }, + url: uploadURL, + type: 'POST', + contentType:false, + processData: false, + cache: false, + data: formData, + success: function (data) { + DragDropImport._importFinished(hash, false, data.success); + if (!data.success) { + DragDropImport.importStatus[DragDropImport.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('<span hash="' + + hash + '" class="pma_drop_file_status" task="cancel">' + + PMA_messages.dropImportMessageCancel + '</span>'); + + // -- 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('<span>' + PMA_messages.dropImportMessageAborted + '</span>'); + DragDropImport._importFinished(hash, true, false); + } else if ($(this).children('span').html() === + PMA_messages.dropImportMessageFailed) { + // -- view information + var $this = $(this); + $.each(DragDropImport.importStatus, + function (key, value) { + if (value.hash === hash) { + $('.pma_drop_result:visible').remove(); + var filename = $this.parent('span').attr('data-filename'); + $('body').append('<div class="pma_drop_result"><h2>' + + PMA_messages.dropImportImportResultHeader + ' - ' + + filename + '<span class="close">x</span></h2>' + value.message + '</div>'); + $('.pma_drop_result').draggable(); // to make this dialog draggable + } + }); + } + }); + }, + /** + * Triggered when an object is dragged into the PMA UI + * + * @param event obj + * + * @return void + */ + _dragenter : 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; + } + + event.stopPropagation(); + event.preventDefault(); + if (!DragDropImport._hasFiles(event)) { + return; + } + if (PMA_commonParams.get('db') === '') { + $('.pma_drop_handler').html(PMA_messages.dropImportSelectDB); + } else { + $('.pma_drop_handler').html(PMA_messages.dropImportDropFiles); + } + $('.pma_drop_handler').fadeIn(); + }, + /** + * Check if dragged element contains Files + * + * @param event the event object + * + * @return bool + */ + _hasFiles: function (event) { + return !(typeof event.originalEvent.dataTransfer.types === 'undefined' || + $.inArray('Files', event.originalEvent.dataTransfer.types) < 0 || + $.inArray( + 'application/x-moz-nativeimage', + event.originalEvent.dataTransfer.types + ) >= 0); + }, + /** + * Triggered when dragged file is being dragged over PMA UI + * + * @param event obj + * + * @return void + */ + _dragover: 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; + } + + event.stopPropagation(); + event.preventDefault(); + if (!DragDropImport._hasFiles(event)) { + return; + } + $('.pma_drop_handler').fadeIn(); + }, + /** + * Triggered when dragged objects are left + * + * @param event obj + * + * @return void + */ + _dragleave: 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; + } + event.stopPropagation(); + event.preventDefault(); + var $pma_drop_handler = $('.pma_drop_handler'); + $pma_drop_handler.clearQueue().stop(); + $pma_drop_handler.fadeOut(); + $pma_drop_handler.html(PMA_messages.dropImportDropFiles); + }, + /** + * Called when upload has finished + * + * @param string, unique hash for a certain upload + * @param bool, true if upload was aborted + * @param bool, status of sql upload, as sent by server + * + * @return void + */ + _importFinished: function (hash, aborted, status) { + $('.pma_sql_import_status div li[data-hash="' + hash + '"]') + .children('progress').hide(); + var icon = 'icon ic_s_success'; + // -- provide link to view upload status + if (!aborted) { + if (status) { + $('.pma_sql_import_status div li[data-hash="' + hash + + '"] span.filesize span.pma_drop_file_status') + .html('<span>' + PMA_messages.dropImportMessageSuccess + '</a>'); + } else { + $('.pma_sql_import_status div li[data-hash="' + hash + + '"] span.filesize span.pma_drop_file_status') + .html('<span class="underline">' + PMA_messages.dropImportMessageFailed + + '</a>'); + icon = 'icon ic_s_error'; + } + } else { + icon = 'icon ic_s_notice'; + } + $('.pma_sql_import_status div li[data-hash="' + hash + + '"] span.filesize span.pma_drop_file_status') + .attr('task', 'info'); + + // Set icon + $('.pma_sql_import_status div li[data-hash="' + hash + '"]') + .prepend('<img src="./themes/dot.gif" title="finished" class="' + + icon + '"> '); + + // Decrease liveUploadCount by one + $('.pma_import_count').html(--DragDropImport.liveUploadCount); + if (!DragDropImport.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 = (DragDropImport._getExtension(files[i].name)); + var hash = AJAX.hash(++DragDropImport.uploadCount); + + var $pma_sql_import_status_div = $('.pma_sql_import_status div'); + $pma_sql_import_status_div.append('<li data-hash="' + hash + '">' + + ((ext !== '') ? '' : '<img src="./themes/dot.gif" title="invalid format" class="icon ic_s_notice"> ') + + escapeHtml(files[i].name) + '<span class="filesize" data-filename="' + + escapeHtml(files[i].name) + '">' + (files[i].size / 1024).toFixed(2) + + ' kb</span></li>'); + + // scroll the UI to bottom + $pma_sql_import_status_div.scrollTop( + $pma_sql_import_status_div.scrollTop() + 50 + ); // 50 hardcoded for now + + if (ext !== '') { + // Increment liveUploadCount by one + $('.pma_import_count').html(++DragDropImport.liveUploadCount); + $('.pma_sql_import_status h2 .close').fadeOut(); + + $('.pma_sql_import_status div li[data-hash="' + hash + '"]') + .append('<br><progress max="100" value="2"></progress>'); + + // 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 + DragDropImport._sendFileToServer(fd, hash); + } else if (!DragDropImport.liveUploadCount) { + $('.pma_sql_import_status h2 .close').fadeIn(); + } + } + } + $('.pma_drop_handler').fadeOut(); + event.stopPropagation(); + event.preventDefault(); + } +}; + +export default DragDropImport; |