☰

Catbox File Uploader with Hidden Circular Button, Minimize Support, and Drag-and-Drop

A button to upload files to Catbox, hidden until clicked, with minimize support and drag-and-drop functionality.

目前为 2024-10-25 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         Catbox File Uploader with Hidden Circular Button, Minimize Support, and Drag-and-Drop
  3. // @namespace    https://catbox.moe/
  4. // @version      1.0
  5. // @description  A button to upload files to Catbox, hidden until clicked, with minimize support and drag-and-drop functionality.
  6. // @author       heapsofjoy
  7. // @match        *://*/*
  8. // @grant        GM_addStyle
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // Add a hidden button at the bottom of the page
  15.     const uploadButton = document.createElement('div');
  16.     uploadButton.id = 'uploadButton';
  17.     uploadButton.innerHTML = '⬆'; // Up arrow to indicate sliding up
  18.     document.body.appendChild(uploadButton);
  19.  
  20.     // Create an invisible file input element
  21.     const fileInput = document.createElement('input');
  22.     fileInput.type = 'file';
  23.     fileInput.style.display = 'none';
  24.     document.body.appendChild(fileInput);
  25.  
  26.     // Create a text box to display the URL after uploading
  27.     const urlTextBox = document.createElement('input');
  28.     urlTextBox.type = 'text';
  29.     urlTextBox.id = 'fileUrl';
  30.     urlTextBox.placeholder = 'URL will appear here';
  31.     urlTextBox.readOnly = true;
  32.     urlTextBox.style.display = 'none';
  33.     document.body.appendChild(urlTextBox);
  34.  
  35.     // Create a drop zone area for drag-and-drop
  36.     const dropZone = document.createElement('div');
  37.     dropZone.id = 'dropZone';
  38.     dropZone.innerText = 'Drag & Drop File Here';
  39.     dropZone.style.display = 'none';
  40.     document.body.appendChild(dropZone);
  41.  
  42.     // Minimize button
  43.     const minimizeButton = document.createElement('div');
  44.     minimizeButton.id = 'minimizeButton';
  45.     minimizeButton.innerHTML = '—'; // Minimize symbol
  46.     minimizeButton.style.display = 'none';
  47.     document.body.appendChild(minimizeButton);
  48.  
  49.     // Styling for the circular button, text box, drop zone, and minimize button
  50.     GM_addStyle(`
  51.         #uploadButton {
  52.             position: fixed;
  53.             bottom: 0;
  54.             left: 20px;
  55.             width: 50px;
  56.             height: 50px;
  57.             background-color: #333; /* Dark grey */
  58.             color: white;
  59.             border: none;
  60.             border-radius: 50%;
  61.             cursor: pointer;
  62.             font-family: Arial, sans-serif;
  63.             font-size: 24px;
  64.             text-align: center;
  65.             line-height: 50px;
  66.             box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  67.             transition: bottom 0.4s ease;
  68.         }
  69.         #uploadButton.minimized {
  70.             bottom: 0;
  71.             width: 50px;
  72.             height: 10px;
  73.             border-radius: 50px 50px 0 0;
  74.             font-size: 10px;
  75.             line-height: 10px;
  76.         }
  77.         #minimizeButton {
  78.             position: fixed;
  79.             bottom: 0;
  80.             left: 80px;
  81.             width: 30px;
  82.             height: 30px;
  83.             background-color: #333;
  84.             color: white;
  85.             border: none;
  86.             border-radius: 50%;
  87.             cursor: pointer;
  88.             font-family: Arial, sans-serif;
  89.             font-size: 16px;
  90.             text-align: center;
  91.             line-height: 30px;
  92.             box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  93.         }
  94.         #fileUrl {
  95.             position: fixed;
  96.             bottom: 70px;
  97.             left: 20px;
  98.             width: 300px;
  99.             padding: 10px;
  100.             font-size: 14px;
  101.             border: none;
  102.             border-radius: 5px;
  103.             background-color: #333;
  104.             color: white;
  105.             box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  106.             display: block;
  107.         }
  108.         #dropZone {
  109.             position: fixed;
  110.             bottom: 120px;
  111.             left: 20px;
  112.             width: 300px;
  113.             height: 150px;
  114.             border: 2px dashed #aaa;
  115.             background-color: #444;
  116.             color: white;
  117.             text-align: center;
  118.             line-height: 150px;
  119.             font-family: Arial, sans-serif;
  120.             font-size: 14px;
  121.             border-radius: 5px;
  122.         }
  123.         #dropZone.dragover {
  124.             border-color: #fff;
  125.             background-color: #555;
  126.         }
  127.     `);
  128.  
  129.     // Start minimized
  130.     let isMinimized = true;
  131.     uploadButton.classList.add('minimized');
  132.  
  133.     // Show the button when clicked
  134.     uploadButton.addEventListener('click', () => {
  135.         if (isMinimized) {
  136.             // Show the full button
  137.             uploadButton.classList.remove('minimized');
  138.             isMinimized = false;
  139.             minimizeButton.style.display = 'block';
  140.         } else {
  141.             // Open file explorer on single click when button is expanded
  142.             fileInput.click();
  143.         }
  144.     });
  145.  
  146.     // Minimize the button when clicking the minimize button
  147.     minimizeButton.addEventListener('click', () => {
  148.         uploadButton.classList.add('minimized');
  149.         isMinimized = true;
  150.         minimizeButton.style.display = 'none';
  151.         // Hide URL text box when minimizing
  152.         urlTextBox.style.display = 'none';
  153.     });
  154.  
  155.     // Listen for file selection from the file input
  156.     fileInput.addEventListener('change', () => {
  157.         const file = fileInput.files[0];
  158.         if (file) {
  159.             uploadFile(file);
  160.         }
  161.     });
  162.  
  163.     let dragCounter = 0;  // To keep track of drag events
  164.  
  165.     // Disable drag-and-drop if minimized
  166.     document.addEventListener('dragenter', (e) => {
  167.         if (!isMinimized) {
  168.             e.preventDefault();
  169.             dragCounter++;  // Increment the drag counter
  170.             dropZone.style.display = 'block';
  171.         }
  172.     });
  173.  
  174.     // Handle drag over events to allow dropping
  175.     document.addEventListener('dragover', (e) => {
  176.         if (!isMinimized) {
  177.             e.preventDefault();
  178.             dropZone.classList.add('dragover');
  179.         }
  180.     });
  181.  
  182.     // Handle drag leave to hide the drop zone only when all drags leave
  183.     document.addEventListener('dragleave', (e) => {
  184.         e.preventDefault();
  185.         dragCounter--;  // Decrement the drag counter
  186.         if (dragCounter === 0) {
  187.             dropZone.classList.remove('dragover');
  188.             dropZone.style.display = 'none';
  189.         }
  190.     });
  191.  
  192.     // Handle drop events to upload the file
  193.     dropZone.addEventListener('drop', (e) => {
  194.         if (!isMinimized) {
  195.             e.preventDefault();
  196.             dragCounter = 0;  // Reset the counter when a file is dropped
  197.             dropZone.classList.remove('dragover');
  198.             dropZone.style.display = 'none';
  199.             const file = e.dataTransfer.files[0];
  200.             if (file) {
  201.                 uploadFile(file);
  202.             }
  203.         }
  204.     });
  205.  
  206.     // Upload file and fetch URL
  207.     function uploadFile(file) {
  208.         const formData = new FormData();
  209.         formData.append('reqtype', 'fileupload');
  210.         formData.append('time', '1h');
  211.         formData.append('fileToUpload', file);
  212.  
  213.         fetch('https://litterbox.catbox.moe/resources/internals/api.php', {
  214.             method: 'POST',
  215.             body: formData
  216.         })
  217.         .then(response => response.text())
  218.         .then(url => {
  219.             // Display the URL in the text box
  220.             urlTextBox.style.display = 'block';
  221.             urlTextBox.value = url;
  222.         })
  223.         .catch(error => {
  224.             urlTextBox.value = 'Upload failed!';
  225.             console.error('Error:', error);
  226.         });
  227.     }
  228. })();