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-30 提交的版本,查看 最新版本

  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.1
  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. z-index: 10000; /* Ensure it's on top */
  69. }
  70. #uploadButton.minimized {
  71. bottom: 0;
  72. width: 50px;
  73. height: 10px;
  74. border-radius: 50px 50px 0 0;
  75. font-size: 10px;
  76. line-height: 10px;
  77. }
  78. #minimizeButton {
  79. position: fixed;
  80. bottom: 0;
  81. left: 80px;
  82. width: 30px;
  83. height: 30px;
  84. background-color: #333;
  85. color: white;
  86. border: none;
  87. border-radius: 50%;
  88. cursor: pointer;
  89. font-family: Arial, sans-serif;
  90. font-size: 16px;
  91. text-align: center;
  92. line-height: 30px;
  93. box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  94. z-index: 10000;
  95. }
  96. #fileUrl {
  97. position: fixed;
  98. bottom: 70px;
  99. left: 20px;
  100. width: 300px;
  101. padding: 10px;
  102. font-size: 14px;
  103. border: none;
  104. border-radius: 5px;
  105. background-color: #333;
  106. color: white;
  107. box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  108. display: block;
  109. z-index: 10000;
  110. }
  111. #dropZone {
  112. position: fixed;
  113. bottom: 120px;
  114. left: 20px;
  115. width: 300px;
  116. height: 150px;
  117. border: 2px dashed #aaa;
  118. background-color: #444;
  119. color: white;
  120. text-align: center;
  121. line-height: 150px;
  122. font-family: Arial, sans-serif;
  123. font-size: 14px;
  124. border-radius: 5px;
  125. z-index: 10000;
  126. }
  127. #dropZone.dragover {
  128. border-color: #fff;
  129. background-color: #555;
  130. }
  131. `);
  132.  
  133. // Start minimized
  134. let isMinimized = true;
  135. uploadButton.classList.add('minimized');
  136.  
  137. // Show the button when clicked
  138. uploadButton.addEventListener('click', () => {
  139. if (isMinimized) {
  140. // Show the full button
  141. uploadButton.classList.remove('minimized');
  142. isMinimized = false;
  143. minimizeButton.style.display = 'block';
  144. } else {
  145. // Open file explorer on single click when button is expanded
  146. fileInput.click();
  147. }
  148. });
  149.  
  150. // Minimize the button when clicking the minimize button
  151. minimizeButton.addEventListener('click', () => {
  152. uploadButton.classList.add('minimized');
  153. isMinimized = true;
  154. minimizeButton.style.display = 'none';
  155. // Hide URL text box when minimizing
  156. urlTextBox.style.display = 'none';
  157. });
  158.  
  159. // Listen for file selection from the file input
  160. fileInput.addEventListener('change', () => {
  161. const file = fileInput.files[0];
  162. if (file) {
  163. uploadFile(file);
  164. }
  165. });
  166.  
  167. let dragCounter = 0; // To keep track of drag events
  168.  
  169. // Disable drag-and-drop if minimized
  170. document.addEventListener('dragenter', (e) => {
  171. if (!isMinimized) {
  172. e.preventDefault();
  173. dragCounter++; // Increment the drag counter
  174. dropZone.style.display = 'block';
  175. }
  176. });
  177.  
  178. // Handle drag over events to allow dropping
  179. document.addEventListener('dragover', (e) => {
  180. if (!isMinimized) {
  181. e.preventDefault();
  182. dropZone.classList.add('dragover');
  183. }
  184. });
  185.  
  186. // Handle drag leave to hide the drop zone only when all drags leave
  187. document.addEventListener('dragleave', (e) => {
  188. e.preventDefault();
  189. dragCounter--; // Decrement the drag counter
  190. if (dragCounter === 0) {
  191. dropZone.classList.remove('dragover');
  192. dropZone.style.display = 'none';
  193. }
  194. });
  195.  
  196. // Handle drop events to upload the file
  197. dropZone.addEventListener('drop', (e) => {
  198. if (!isMinimized) {
  199. e.preventDefault();
  200. dragCounter = 0; // Reset the counter when a file is dropped
  201. dropZone.classList.remove('dragover');
  202. dropZone.style.display = 'none';
  203. const file = e.dataTransfer.files[0];
  204. if (file) {
  205. uploadFile(file);
  206. }
  207. }
  208. });
  209.  
  210. // Upload file and fetch URL
  211. function uploadFile(file) {
  212. const formData = new FormData();
  213. formData.append('reqtype', 'fileupload');
  214. formData.append('time', '1h');
  215. formData.append('fileToUpload', file);
  216.  
  217. fetch('https://litterbox.catbox.moe/resources/internals/api.php', {
  218. method: 'POST',
  219. body: formData
  220. })
  221. .then(response => response.text())
  222. .then(url => {
  223. // Display the URL in the text box
  224. urlTextBox.style.display = 'block';
  225. urlTextBox.value = url;
  226. })
  227. .catch(error => {
  228. urlTextBox.value = 'Upload failed!';
  229. console.error('Error:', error);
  230. });
  231. }
  232. })();