How to upload the images on Uploadthing using express and reactjs

Question

I tired the to upload the images on Uploadthing I can't. I provide these how to fix this problem

my server folder index.js file index.js

uploadthing.js uploadthing.js

my frontend folder app.jsx where I imported the uploadButton enter image description here

utils/upload.js were I defined the uploadButton upload.js

can you tell me were is the issue and output is that on tab and it loading every time output on tab

I want to anyone this question and give good solution to fix that

Answer 1

I hope I'm not too late. But I'll suggest a couple of changes.

1. Use the new way to authorise uploadThing. REFERENCE HERE
2. Pass some props on your component. REFERENCE HERE

On your index.js line 14 (your config), use the new way to authenticate uploadthing. You can get that token on your uploadThing Project under API Keys Tab.

uploadThing Menu for Ref

config: {
    token: UPLOADTHING_TOKEN,
}

On your App.jsx your Button component need some props to understand and link everything.

<UploadButton 
     endpoint="imageUploader"
     onClientUploadComplete={res => console.log(res)}
     onUploadError={err => console.error(err)}
     config={{mode: "manual"} 
/>

Only the endpoint is necessary, the other props is more to give you a feedback on what's going on with your upload.

the endpoint must match the setting you called on your uploadthing.js ( line 6 ) on your case "imageUploader"

And the config={{mode: "manual"}} is a personal preference. Without it the file will be automatically upload. With it, requires a confirmation click.

Last, when posting questions try to post your code snippets as well. It's a bit a of a pain to keep jumping back and forth from screenshot links. A snippet people can just copy make the changes and send you back.