feat: more explicit image search

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Miru",
-  "version": "2.10.4",
+  "version": "2.10.5",
   "author": "ThaUnknown_ <ThaUnknown@users.noreply.github.com>",
   "main": "src/index.js",
   "homepage": "https://github.com/ThaUnknown/miru#readme",

src/renderer/src/lib/NyaaBlock.svelte

@@ -1,5 +1,5 @@
 <script>
-let block = true
+let block = false
 
 async function testConnection () {
   try {

src/renderer/src/lib/pages/home/Search.svelte

@@ -1,5 +1,6 @@
 <script>
 import { getContext } from 'svelte'
+import { traceAnime } from '@/modules/anime.js'
 
 export let search
 export let current
@@ -41,6 +42,13 @@ function input () {
     searchTimeout = null
   }, 500)
 }
+function handleFile ({ target }) {
+  const { files } = target
+  if (files?.[0]) {
+    traceAnime(files[0], 'file')
+    target.value = null
+  }
+}
 </script>
 
 <div class='container-fluid row p-20' on:input={input}>
@@ -162,6 +170,14 @@ function input () {
       <option value='UPDATED_TIME_DESC' disabled hidden>Updated Date</option>
     </select>
   </div>
+  <input type='file' class='d-none' id='search-image' accept='image/*' on:input={handleFile}>
+  <div class='col-auto p-10 d-flex'>
+    <button class='btn bg-dark material-icons font-size-18 px-5 align-self-end shadow-lg border-0' type='button' on:click={searchClear} class:text-primary={!!current}>
+      <label for='search-image' class='pointer'>
+        image
+      </label>
+    </button>
+  </div>
   <div class='col-auto p-10 d-flex'>
     <button class='btn bg-dark material-icons font-size-18 px-5 align-self-end shadow-lg border-0' type='button' on:click={searchClear} class:text-primary={!!current}>
       delete

src/renderer/src/modules/anime.js

@@ -13,9 +13,7 @@ window.addEventListener('paste', async e => { // WAIT image lookup on paste, or
   const item = e.clipboardData.items[0]
   if (item?.type.indexOf('image') === 0) {
     e.preventDefault()
-    const formData = new FormData()
-    formData.append('image', item.getAsFile())
-    traceAnime(formData, 'file')
+    traceAnime(item.getAsFile(), 'file')
   } else if (item?.type === 'text/plain') {
     item.getAsString(text => {
       if (torrentRx.exec(text)) {
@@ -36,16 +34,16 @@ window.addEventListener('paste', async e => { // WAIT image lookup on paste, or
     })
   }
 })
-function traceAnime (image, type) { // WAIT lookup logic
+export function traceAnime (image, type) { // WAIT lookup logic
   if (type === 'file') {
     const reader = new FileReader()
     reader.onload = e => {
       addToast({
         title: 'Looking up anime for image',
-        text: /* html */`<img class="w-200 rounded pt-5" src="${e.target.result}">`
+        text: /* html */`You can also paste an URL to an image!<br><img class="w-200 rounded pt-5" src="${e.target.result}">`
       })
     }
-    reader.readAsDataURL(image.get('image'))
+    reader.readAsDataURL(image)
   } else {
     addToast({
       title: 'Looking up anime for image',
@@ -55,9 +53,11 @@ function traceAnime (image, type) { // WAIT lookup logic
   let options
   let url = `https://api.trace.moe/search?cutBorders&url=${image}`
   if (type === 'file') {
+    const formData = new FormData()
+    formData.append('image', image)
     options = {
       method: 'POST',
-      body: image
+      body: formData
     }
     url = 'https://api.trace.moe/search'
   }