Optimize UI and code logic.

tlze · Sep 25, 2024 · 4e0ec26 · 4e0ec26
1 parent 5056e76
commit 4e0ec26
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 46 deletions.
diff --git a/README.md b/README.md
@@ -1,14 +1,23 @@
-# Up files to ipfs
+# up2ipfs
+Upload files to IPFS.
 
-Default upload gateway: api=http://127.0.0.1:5001
+## Deploy & Use
+Just copy (upload) was completed the deployment. (All are static pages, Work with MFS on IPFS)  
+Append api and(or) gw parameters when opening the url. 
 
-Or  
-?api=i0.img2ipfs.com  
-?api=cdn.ipfsscan.io  
-Or ( selfhost )  
-?api=api.sample.com  ( Default https )  
-?apt=http://api.sample.com  
+Test URL: <a href="https://i0.img2ipfs.com/ipns/nmr.mzltd.win/up2ipfs/?api=api.nmr.mzltd.win">/ipns/nmr.mzltd.win/up2ipfs/</a>
 
-<a href="https://ipfs.github.io/public-gateway-checker/">More gateway</a>
+## Instructions for Advanced Users.
+### Selfhost IPFS api and gw
+api = http://127.0.0.1:5001  (Default setting)  
+gw = http://127.0.0.1:8080  
+Full parameter Url:  
+hxxps://ipfs.io/ipfs/<cid>/?api=http://127.0.0.1:5001&gw=http://127.0.0.1:8080
+### Some public api and(or) gateway(gw)
+ipfs.io  ( 'https://' can be omitted  )  
+cdn.ipfsscan.io  
+gateway.v2ex.pro
+
+<a href="https://ipfs.github.io/public-gateway-checker/">Find More Gateway</a>
 
 UI form img2ipfs
diff --git a/index.html b/index.html
@@ -1,52 +1,61 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>IPFS</title>
+    <title>up2ipfs</title>
     <meta name="keywords" content="IPFS">
     <link rel="stylesheet" href="./static/style.css">
     <script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
     <script src="./static/file.js" defer></script>
 </head>
+
 <body>
     <input id="file" type="file" multiple style="display: none;">
     <div class="container">
         <div class="upload">
             <div class="title">
-                Up2IPFS<small style="font-size:10px;">(Up files to ipfs)</small>
+                Up2IPFS<small style="font-size:12px;">(Up files to ipfs)</small>
             </div>
             <div class="content" id="dragbox">
                 <svg class="icon" viewBox="0 0 1335 1024" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M1097.060174 392.125217C1073.730783 172.966957 893.261913 0.378435 666.089739 0.378435c-227.127652 0-415.610435 171.920696-430.948174 391.746782C101.910261 415.454609 0 525.356522 0 666.601739c0 149.147826 125.239652 274.476522 274.476522 274.476522h195.828869v-78.669913H274.476522a193.691826 193.691826 0 0 1-195.940174-195.806609c0-102.021565 70.678261-180.580174 172.588522-195.917913l54.561391-8.013913 8.013913-62.553043c16.005565-180.580174 172.588522-321.157565 352.389565-321.157566 180.580174 0 337.029565 141.356522 352.389565 321.157566v62.553043l62.664348 8.013913c101.910261 16.005565 172.477217 93.896348 172.477218 195.917913 0 109.901913-85.904696 195.806609-195.806609 195.806609h-195.917913v78.580869h196.029217c149.147826 0 274.476522-125.261913 274.476522-274.476521 0-141.133913-101.999304-259.072-235.25287-274.387479" fill="#909399"></path>
-                    <path d="M612.218435 364.766609l1.335652 2.003478L389.698783 590.58087l55.229217 55.362782 181.938087-181.938087V1018.88h78.558609v-78.58087h156.471652-156.471652V458.039652l183.808 183.919305 55.340521-55.340522-277.147826-277.058783-55.229217 55.229218z m-141.913044 575.666087h156.471652-156.716521 0.222608z" fill="#909399"></path>
+                    <path
+                        d="M1097.060174 392.125217C1073.730783 172.966957 893.261913 0.378435 666.089739 0.378435c-227.127652 0-415.610435 171.920696-430.948174 391.746782C101.910261 415.454609 0 525.356522 0 666.601739c0 149.147826 125.239652 274.476522 274.476522 274.476522h195.828869v-78.669913H274.476522a193.691826 193.691826 0 0 1-195.940174-195.806609c0-102.021565 70.678261-180.580174 172.588522-195.917913l54.561391-8.013913 8.013913-62.553043c16.005565-180.580174 172.588522-321.157565 352.389565-321.157566 180.580174 0 337.029565 141.356522 352.389565 321.157566v62.553043l62.664348 8.013913c101.910261 16.005565 172.477217 93.896348 172.477218 195.917913 0 109.901913-85.904696 195.806609-195.806609 195.806609h-195.917913v78.580869h196.029217c149.147826 0 274.476522-125.261913 274.476522-274.476521 0-141.133913-101.999304-259.072-235.25287-274.387479"
+                        fill="#909399"></path>
+                    <path
+                        d="M612.218435 364.766609l1.335652 2.003478L389.698783 590.58087l55.229217 55.362782 181.938087-181.938087V1018.88h78.558609v-78.58087h156.471652-156.471652V458.039652l183.808 183.919305 55.340521-55.340522-277.147826-277.058783-55.229217 55.229218z m-141.913044 575.666087h156.471652-156.716521 0.222608z"
+                        fill="#909399"></path>
                 </svg>
                 <p class="desc">Click / Paste / Drag to upload</p>
             </div>
         </div>
         <div class="filelist">
-            <div class="title">
-                upload list
-            </div>
-            <div class="select-group">
-                <label for="gatewaySelect">Gateway：</label>
-                <select id="gatewaySelect" onchange="changeGateway(this);">
-                    <option value="https://i0.img2ipfs.com">img2ipfs</option>
-                    <option value="https://cdn.ipfsscan.io">ipfsscan</option>
-                    <option value="https://ipfs.io">ipfs.io</option>
-                </select>
+            <div class="button-container">
+                <div class="select-group">
+                    <label for="gatewaySelect">Gateway:</label>
+                    <select id="gatewaySelect" onchange="changeGateway(this);">
+                        <option value="https://i0.img2ipfs.com">img2ipfs</option>
+                        <option value="https://cdn.ipfsscan.io">ipfsscan</option>
+                        <option value="https://gateway.v2ex.pro">v2ex.pro</option>
+                        <option value="https://ipfs.io">ipfs.io</option>
+                        <option value="http://127.0.0.1:8080">localhost</option>
+                    </select>
+                </div>
+                <button onclick="copyAllLinks();" name="xkx" id="copyAll" class="button">Copy All</button>
             </div>
             <div class="list"></div>
         </div>
     </div>
     <div id="footer" style="position:fixed;width: 100%;text-align: center;bottom: 0px;display: block;">
         <div style="height: 20px">
             <div class="info">
-                <a href="https://github.com/tlze/up2ipfs">This project</a> | 
+                <a href="https://github.com/tlze/up2ipfs">This project</a> |
                 <a href="https://ipfs.github.io/public-gateway-checker/">More gateway</a>
             </div>
         </div>
         © 2023-2024
     </div>
 </body>
-</html>
+
+</html>
diff --git a/static/file.js b/static/file.js
@@ -10,20 +10,36 @@ $(document).ready(() => {
         userInputApi = 'https://' + userInputApi;
     }
     let defaultApiBase = 'http://127.0.0.1:5001';
+    let apiBase = isValidUrl(userInputApi) ? userInputApi : defaultApiBase;
     let apiPath = '/api/v0/add?pin=false';
-    let apiBase = isValidApi(userInputApi) ? userInputApi : defaultApiBase;
-    const api = `${apiBase}${apiPath}`;    
+    const api = `${apiBase}${apiPath}`;
     console.log(api);
 
-    // Helper Function to Get Query String Parameter
+    let userInputGw = getQueryStringParam('gw');
+    if (userInputGw !== null) {
+        if (userInputGw && !/^https?:\/\//i.test(userInputGw)) {
+            userInputGw = 'https://' + userInputGw;
+        }
+        if (isValidUrl(userInputGw)) {
+            // Add the new option to the select element
+            $('#gatewaySelect').append(
+                $('<option>', {
+                    value: userInputGw,
+                    text: 'selfhost'
+                })
+            );
+            // Select the newly added option
+            $('#gatewaySelect').val(userInputGw);
+        }
+    }
+
     function getQueryStringParam(name) {
         const urlParams = new URLSearchParams(window.location.search);
         return urlParams.get(name);
     }
 
-    // Function to Validate General API URL
-    function isValidApi(url) {
-        const regex = /^(https?:\/\/[^\s/$.?#].[^\s]*)$/i;
+    function isValidUrl(url) {
+        const regex = /^(https?:\/\/)?(?:\S+:\S+@)?[^\s/$.?#].[^\s]*$/i;
         return regex.test(url);
     }
 
@@ -35,7 +51,7 @@ $(document).ready(() => {
         $fileInput.on('change', () => upload($fileInput[0].files));
 
         $dragbox.on('dragenter', () => $dragbox.addClass('dragenter'))
-                .on('dragleave drop', () => $dragbox.removeClass('dragenter'));
+            .on('dragleave drop', () => $dragbox.removeClass('dragenter'));
         $dragbox.on('drop', handleDropUpload);
     }
 
@@ -50,10 +66,14 @@ $(document).ready(() => {
         if (!clipboardData || !clipboardData.items) {
             return alert('The current browser does not support paste upload');
         }
-        const file = Array.from(clipboardData.items).find(item => item.type.includes('image'))?.getAsFile();
+
+        // Find the first file in the clipboard items
+        const file = Array.from(clipboardData.items).find(item => item.kind === 'file')?.getAsFile();
+
         if (!file) {
-            return alert('The clipboard is empty or files are not supported');
+            return alert('The clipboard is empty or no files are supported');
         }
+
         upload([file]);
     }
 
@@ -91,8 +111,8 @@ $(document).ready(() => {
             <div class="item ${randomClass}">
                 <div class="file">
                     <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
-                        <path d="..." fill="#909399"></path>
-                        <path d="..." fill="#909399"></path>
+                            <path d="M961.536 531.251c-0.614-3.481-1.843-7.168-3.891-10.445L827.392 306.79v-28.876c0-10.445 0-20.276 0.205-29.901 0.819-89.703 1.433-174.285-101.376-179.2H303.923c-33.587 0-58.368 8.601-76.185 26.624-30.72 30.925-30.31 79.257-29.696 140.288 0 8.601 0.204 17.408 0.204 26.419v38.093c-2.867 2.253-5.324 4.915-7.168 8.192L64.717 523.879c-1.639 2.867-2.663 5.734-3.277 8.806-6.144 12.288-9.626 26.01-9.626 40.345v290.407c0 50.585 41.984 91.75 93.594 91.75h733.184c51.61 0 93.594-41.165 93.594-91.75V573.03c-0.205-14.95-4.096-29.286-10.65-41.779zM861.389 481.28h-33.997v-55.91l33.997 55.91zM271.565 138.65c5.53-5.53 16.384-8.397 32.358-8.397h420.045c36.25 1.843 42.803 11.264 41.78 117.145 0 9.83-0.206 19.866-0.206 30.516V481.28H664.576c-16.998 0-30.925 13.722-30.925 30.925 0 64.307-54.681 116.736-122.06 116.736S389.53 576.512 389.53 512.205c0-16.999-13.722-30.925-30.925-30.925H259.89V262.144c0-9.42 0-18.432-0.205-27.034-0.41-43.008-0.819-83.558 11.879-96.46z m-73.523 279.552v63.078h-36.864l36.864-63.078z m712.294 445.44c0 16.179-14.54 30.105-31.949 30.105H145.203c-17.203 0-31.949-13.721-31.949-30.105V573.03c0-16.179 14.541-30.105 31.95-30.105h185.548c15.155 83.763 90.522 147.456 181.043 147.456s165.888-63.898 181.043-147.456h185.55c17.202 0 31.948 13.721 31.948 30.105v290.612z" fill="#909399"></path>
+                            <path d="M385.638 278.528H655.77c16.998 0 30.924-13.722 30.924-30.925s-13.721-30.925-30.924-30.925H385.638c-16.998 0-30.924 13.722-30.924 30.925s13.926 30.925 30.924 30.925z m-30.924 70.451c0 16.999 13.721 30.925 30.924 30.925H655.77c16.998 0 30.924-13.722 30.924-30.925 0-17.203-13.721-30.925-30.924-30.925H385.638c-16.998 0-30.924 13.927-30.924 30.925z" fill="#909399"></path>
                     </svg>
                     <div class="desc">
                         <div class="desc__name">${file.name}</div>
@@ -105,11 +125,11 @@ $(document).ready(() => {
                     </div>
                     <div class="progress-status">
                         <svg class="icon status-success" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
-                            <path d="..." fill="#67C23A"></path>
-                            <path d="..." fill="#67C23A"></path>
+                                <path d="M310.710857 768.292571z m402.578286 0z" fill="#67C23A"></path>
+                                <path d="M512 0C229.376 0 0 229.376 0 512S229.376 1024 512 1024 1024 794.624 1024 512 794.624 0 512 0z m300.178286 373.321143l-354.011429 354.011428c-21.065143 21.065143-55.588571 21.065143-76.653714 0l-169.691429-169.106285c-21.065143-21.065143-21.065143-55.588571 0-76.653715 21.065143-21.065143 55.588571-21.065143 76.653715 0l131.072 131.072 315.392-315.392c21.065143-21.065143 55.588571-21.065143 76.653714 0 21.650286 20.48 21.650286 55.003429 0.585143 76.068572z" fill="#67C23A"></path>
                         </svg>
                         <svg class="icon status-error" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
-                            <path d="..." fill="#F56C6C"></path>
+                                <path d="M733.678921 290.121702c22.43209 22.531789 22.43209 58.921624 0 81.353714L593.403583 511.850453 733.678921 652.125791c20.537825 20.537825 22.531789 53.13913 4.785513 76.069711l-4.785513 5.4834c-22.531789 22.531789-58.921624 22.531789-81.453412 0L511.95017 593.204167 371.674832 733.579204c-20.537825 20.537825-53.13913 22.531789-76.069711 4.785512l-5.383702-4.785512c-22.531789-22.531789-22.531789-58.921624 0-81.453413l140.275339-140.275338L290.321118 371.674813c-20.637523-20.537825-22.731185-53.13913-4.885211-76.169409l4.785512-5.383702c22.531789-22.43209 58.921624-22.43209 81.353715 0l140.275338 140.17564L652.225509 290.121702c20.537825-20.537825 53.039431-22.531789 75.970012-4.785513l5.4834 4.785513zM0.000019 511.850453c0 282.744037 229.206114 511.950151 511.950151 511.950151s511.950151-229.206114 511.950151-511.950151S794.694207 0 511.95017 0 0.000019 229.206114 0.000019 511.850453z" fill="#F56C6C"></path>
                         </svg>
                     </div>
                 </div>
@@ -126,14 +146,13 @@ $(document).ready(() => {
     function handleUploadSuccess(res, randomClass) {
         if (res.Hash) {
             const gateway = $('#gatewaySelect').val();
-            const imgSrc = `${gateway}/ipfs/${res.Hash}`;
+            const fileName = $(`.${randomClass}`).find('.desc__name').text();
+            const imgSrc = `${gateway}/ipfs/${res.Hash}?filename=${encodeURIComponent(fileName)}`;
             $('#file').val(null);
             $(`.${randomClass}`).find('.progress-inner').addClass('success');
             $(`.${randomClass}`).find('.status-success').show();
             $(`.${randomClass}`).find('#show').show().val(imgSrc);
-            $('.copyall').show();
-            const title = $('.filelist .title').html().replace('upload list', '');
-            $('.filelist .title').html(title);
+            $('#copyAll').show();
         } else {
             handleError(randomClass);
         }
@@ -164,9 +183,20 @@ function changeGateway(obj) {
     const newUrlBase = obj.value;
     document.querySelectorAll("#show").forEach(input => {
         const currentUrl = input.value;
-        const newUrl = currentUrl.replace(/https:\/\/[^\/]+/, newUrlBase);
+        const newUrl = currentUrl.replace(/https?:\/\/[^\/]+/, newUrlBase);
         input.value = newUrl;
-        input.closest('.item').querySelector(".file #url").href = newUrl;
+
+        const item = input.closest('.item');
+        if (item) {
+            const urlElement = item.querySelector(".file #url");
+            if (urlElement) {
+                urlElement.href = newUrl;
+            } else {
+                console.warn("URL element not found within item.");
+            }
+        } else {
+            console.warn("Item not found for the input.");
+        }
     });
 }
 
@@ -179,3 +209,15 @@ function copyToClipboard(obj) {
         console.error('Error copying text: ', err);
     });
 }
+
+function copyAllLinks() {
+    const allLinks = Array.from(document.querySelectorAll('#show'))
+        .map(input => input.value)
+        .join('\n');
+
+    navigator.clipboard.writeText(allLinks).then(() => {
+        alert('All links copied to clipboard');
+    }).catch(err => {
+        console.error('Error copying links: ', err);
+    });
+}
diff --git a/static/style.css b/static/style.css
@@ -373,7 +373,7 @@ button:active .tooltiptext {
 }
 
 .select-group select {
-    padding: 5px 10px;
+    padding: 3px 5px;
     border-radius: 5px;
     border: 1px solid #dcdfe6;
     background-color: #fff;
@@ -393,3 +393,18 @@ button:active .tooltiptext {
     border-color: #409eff;
     box-shadow: 0 0 5px rgba(64, 158, 255, 0.5);
 }
+
+.button-container {
+    display: flex;
+    align-items: center; /* Aligns items vertically centered */
+    gap: 5px; /* Adds space between elements */
+}
+
+#copyAll {
+    display: none;
+    padding: 2px 5px;
+    background-color: #fff;
+    color: #606266;
+    font-size: 14px;
+    transition: border-color 0.3s, box-shadow 0.3s;
+}