Facing issue in img upload when using uploadthing v4.x.x ++(using 7.3.0) #277

Activity

1. jsperafico commented on Jan 28, 2025

   

   jsperafico

   on Jan 28, 2025

   Last edited by jsperafico

   More actions

   Hey @20200015-anhh ,

   I'm not extremely knowledgeable on EditorJS nor Typescript itself, but I managed to make it work.

   Sure, my use case is completely different than yours, since I have no reason to save the images on a S3 bucket nor database and that's because I will serve them in my /public folder itself. So in other words, I just need to render what is already being served in the public folder. The use case might not make sense for you, but it does for me.

   Using node version:

   node -v
   v23.6.1

   Here is the relevant content from my package.json file.

   {
     "type": "module",
     "scripts": {
       "dev": "vite",
     },
     "dependencies": {
       "@editorjs/editorjs": "^2.30.7",
       "@editorjs/image": "^2.10.1",
       "react": "^18.3.1",
       "react-dom": "^18.3.1"
     },
     "devDependencies": {
       "@types/node": "^22.9.1",
       "@types/react": "^18.3.12",
       "@vitejs/plugin-react": "^4.3.3",
       "typescript": "~5.6.2",
       "vite": "^5.4.10"
     }
   }

   My component.tsx looks like this:

   import { useState } from "react";
   
   import EditorJS, { ToolConstructable } from '@editorjs/editorjs'
   
   import ImageTool from '@editorjs/image'
   
   export const Component = () => {
     const [content, setContent] = useState("");
   
     const editor = new EditorJS({
       readOnly: false,
       holder: 'editor',
       autofocus: true,
       tools: {
         image: {
           class: ImageTool,
           config: {
             uploader: {
               uploadByFile: async (file: File) => {
                 console.log(file)
                 console.log(`/${encodeURI(file.name)}`)
   
                 return {
                   success: 1,
                   file: {
                     url: `/${encodeURI(file.name)}`,
                   }
                 }
               },
               uploadByUrl: async (url: string) => {
                 console.log(url)
                 console.log(`/${url.split('/')[-1]}`)
   
                 return {
                   success: 1,
                   file: {
                     url: `/${url.split('/')[-1]}`,
                   }
                 }
               }
             }
           }
         },
       },
       data: JSON.parse(localStorage.getItem('content'))
     })
   
     const printMessage = (value: string) => {
       const message = document.getElementById('message')
       if (message)
         message.innerText = value
     }
   
     const saveToLocalStorage = () => {
       editor.save().then((outputData) => {
         localStorage.setItem('content', JSON.stringify(outputData))
         printMessage(`Document content saved at '${new Date().toLocaleString()}'`)
       }).catch((error) => {
         alert('Unable to save the data in Local Storage')
         console.log(error)
       })
     }
   
     const clearLocalStorage = () => {
       editor.clear()
       localStorage.removeItem("content")
       printMessage('')
     }
   
     setInterval(saveToLocalStorage, 60000)
   
     return (
       <div className="pt-20">
         <article id="editor"></article>
         <div className="grid grid-cols-2 gap-4">
           <p id="message" className="bg-cyan-800 text-cyan-100 rounded-sm p-4 col-span-2"></p>
           <Button onClick={saveToLocalStorage} className="text-cyan-800 hover:text-cyan-100 hover:bg-cyan-800">Save</Button>
           <Button onClick={clearLocalStorage} className="text-cyan-800 hover:text-cyan-100 hover:bg-cyan-800">Clear</Button>
         </div>
       </div>
     )
   }

   So, while "updating" the image, it did saved the information correctly:

   {
     "time": 1738082234704,
     "blocks": [
       {
         "id": "q1PHuyT-IM",
         "type": "header",
         "data": {
           "text": "Hey this might work this time!",
           "level": 1
         }
       },
       {
         "id": "5pkBzMiNWw",
         "type": "image",
         "data": {
           "caption": "Dammmmmmmm",
           "withBorder": false,
           "withBackground": false,
           "stretched": false,
           "file": {
             "url": "/hey.svg"
           }
         }
       }
     ],
     "version": "2.30.7"
   }

   I am well aware that this isn't necessarily what you would like to do, but speaking stricktly @editorjs/image component-wise it did worked for me.

   I hope it helps!