add imgur upload option

Ademking · Oct 16, 2022 · 50cac73 · 50cac73
1 parent cfea4ad
commit 50cac73
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 60 deletions.
diff --git a/README.md b/README.md
@@ -53,7 +53,7 @@
 - Crop Image
 - Photo Editor (Adjust, Draw, Watermark, Filters, Finetune, Resize, Export As PNG, JPEG, JPG, WEBP)
 - Download Image
-- Upload Image to imgBB
+- Upload Image to imgBB or imgur
 - Color picker
 - Image Details
 - Change background color (Dark / Light / Blurred)

diff --git a/background.js b/background.js
@@ -210,6 +210,7 @@ function set_default_settings(){
             exit: true,
             about: true,
             zoom_ratio: 0.1, // 0.1 is +/- 10% Zoom, 0.5 is +/- 50% Zoom, etc...
+            upload_site: "imgbb", // imgbb, imgur
             notification_gravity: "top", // top, bottom
             notification_position: "right", // left, right
             toolbar_position: "bottom", // top, bottom

diff --git a/dist/all.js b/dist/all.js
diff --git a/js/app.js b/js/app.js
@@ -20,10 +20,12 @@ let IS_CROP_OPEN = false
 
 let viewer
 let BACKGROUND_TYPE = 'blurred'
+let UPLOAD_SITE = 'imgbb'
 let ImgCanvas
 let isFlippedHorizontally = false
 let isFlippedVertically = false
 let IMGBB_TOKEN = '8be35a61597b285f9c95669fdc565b00'
+let IMGUR_TOKEN = '405d491c9e67e9f'
 let isKeypressEnabled = false
 let WINBOX_CLASSES = ['no-scrollbar', 'no-max', 'no-min', 'no-full', 'no-resize', 'no-animation']
 let ocrLangList = {
@@ -196,7 +198,7 @@ let tippyData = [
   },
   {
     type: 'upload',
-    text: 'Upload image to ImgBB'
+    text: 'Upload Image'
   },
   {
     type: 'ocr',
@@ -488,6 +490,7 @@ chrome.storage.sync.get("shortcutHotkeys", (shortcutHotkeys) => {
  // ~~~ Initializes the Extension ~~~ \\
 function init(settings) {
   BACKGROUND_TYPE = settings.settings.default_theme
+  UPLOAD_SITE = settings.settings.upload_site
 
   // checks the zoom setting - if it's nulled, then the default is set to 0.1 (10%)
   settings.settings.zoom_ratio == null ? (settings.settings.zoom_ratio = 0.1) : (zoomSetting = settings.settings.zoom_ratio)
@@ -844,36 +847,56 @@ function init(settings) {
               //onClick: function () { } // Callback after click
             }).showToast()
 
-            // upload image to imgur
-            // fetch('https://api.imgur.com/3/image', {
-            //     method: 'POST',
-            //     headers: { 'Authorization': `Client-ID ${IMGUR_TOKEN}` },
-            //     body: base64
-            // })
-
-            // upload base64 to ImgBB
-            let formdata = new FormData()
-            formdata.append('image', base64)
-
-            let requestOptions = {
-              method: 'POST',
-              body: formdata,
-              redirect: 'follow'
-            }
+            // upload image to either imgbb or imgur, depending on the current setting
+            switch (UPLOAD_SITE) {
+              // upload to imgbb
+              case 'imgbb':
+                let formdata = new FormData()
+                formdata.append('image', base64)
+
+                let requestOptionsIMGBB = {
+                  method: 'POST',
+                  body: formdata,
+                  redirect: 'follow'
+                }
 
-            fetch(`https://api.imgbb.com/1/upload?expiration=600&key=${IMGBB_TOKEN}`, requestOptions)
-              .then(res => res.json())
-              .then(res => {
-                // remove toast
-                let toastifyElems = document.querySelectorAll('.toastify')
-                toastifyElems.forEach(element => {
-                  element.remove()
-                })
+                fetch(`https://api.imgbb.com/1/upload?expiration=600&key=${IMGBB_TOKEN}`, requestOptionsIMGBB)
+                  .then(res => res.json())
+                  .then(res => {
+                    // remove toast
+                    let toastifyElems = document.querySelectorAll('.toastify')
+                    toastifyElems.forEach(element => {
+                      element.remove()
+                    })
 
-                copyToClipboard(res.data.image.url)
-                showNotification('✔️ Image uploaded successfully', '#ffffff', '#000000', settings)
-                showNotification(`📋 URL copied to clipboard`, '#ffffff', '#000000', settings)
-              })
+                    copyToClipboard(res.data.image.url)
+                    showNotification('✔️ Image uploaded successfully', '#ffffff', '#000000', settings)
+                    showNotification(`📋 URL copied to clipboard`, '#ffffff', '#000000', settings)
+                  })
+                break
+              // upload to imgur
+              case 'imgur':
+                let requestOptionsIMGUR = {
+                  method: 'POST',
+                  headers: { 'Authorization': `Client-ID ${IMGUR_TOKEN}` },
+                  body: base64
+                }
+
+                fetch('https://api.imgur.com/3/image', requestOptionsIMGUR)
+                  .then(res => res.json())
+                  .then((res) => {
+                    // remove toast
+                    let toastifyElems = document.querySelectorAll('.toastify');
+                    toastifyElems.forEach(element => {
+                        element.remove()
+                    });
+
+                    copyToClipboard(res.data.link);
+                    showNotification('✔️ Image uploaded successfully', '#ffffff', '#000000', settings)
+                    showNotification(`📋 URL copied to clipboard`, '#ffffff', '#000000', settings)
+                  });
+                break
+            }
           }
         },
         colorpicker: settings.settings.colorpicker && {

diff --git a/pages/js/settings.js b/pages/js/settings.js
@@ -7,13 +7,15 @@ let currentSettings = () => {
     });
     let toolbar_position = document.querySelector('#toolbar-position').value;
     let default_theme = document.querySelector('#default-theme').value;
+    let upload_site = document.querySelector('#upload-site').value;
     let zoom_ratio = document.querySelector('#zoom-ratio').value;
     // split notification position
     let notification_position_array = document.querySelector('#toast-position').value.split('-'); // for example: top-right
     settings['notification_gravity'] = notification_position_array[0];
     settings['notification_position'] = notification_position_array[1];
     settings['toolbar_position'] = toolbar_position;
     settings['default_theme'] = default_theme;
+    settings['upload_site'] = upload_site;
     settings['zoom_ratio'] = zoom_ratio;
 
     return settings;
@@ -63,6 +65,8 @@ window.addEventListener('load', () => {
         let notification_position = settings.settings.notification_position;
         // get toolbar_position
         let toolbar_position = settings.settings.toolbar_position;
+        // get upload_site
+        let upload_site = settings.settings.upload_site;
         // get zoom_ratio
         let zoom_ratio = settings.settings.zoom_ratio;
 
@@ -73,6 +77,8 @@ window.addEventListener('load', () => {
         document.querySelector('#toolbar-position').value = toolbar_position;
         // update default theme
         document.querySelector('#default-theme').value = default_theme;
+        // update upload site
+        document.querySelector('#upload-site').value = upload_site;
         // update zoom ratio
         document.querySelector('#zoom-ratio').value = zoom_ratio;
 

diff --git a/pages/settings.html b/pages/settings.html
@@ -44,6 +44,16 @@
                 </td>
             </tr>
 
+            <tr>
+                <td class="label">Upload Site</td>
+                <td>
+                    <select name="upload-site" id="upload-site">
+                        <option value="imgbb">ImgBB</option>
+                        <option value="imgur">Imgur</option>
+                    </select>
+                </td>
+            </tr>
+
             <tr>
                 <td class="label">Zoom Ratio</td>
                 <td>
@@ -249,7 +259,7 @@
             </tr>
 
             <tr>
-                <td class="label">Show Upload Image to ImgBB</td>
+                <td class="label">Show Upload Image</td>
                 <td class="togglebtn">
                     <div class="toggle">
                         <div class="vc-toggle-container">