Theo's Typesafe Cult•2y ago

File Upload Supabase + T3 Stack

Hey how would I go about uploading a file with the t3 stack and supabase with a form so basicly I have a form with questions like: server name? description? and then I have a image upload field I dont know how I would upload the image and get the url and store in the database can anyone please help me thanks!!

10 Replies

低级黑小明👑•2y ago

you first need to choose a host to store your file, theo just launched a service you can try that out. basically you only store url in your database, you upload the file to somewhere else. And the code is very different depending on what platform you choose. if you choose supebase they have tutorials on their website and here: https://www.youtube.com/watch?v=JLaq0x9GbbY

Florin Pop

YouTube

New Supabase Storage Feature?! 🤩 ReactJS + Uppy Demo Project

Supabase is my go-to when it comes to dealing with Auth, storage, and database in a ReactJS / NextJS app! It's so easy to get it up and running! In this video, I'm showing you how to add use Supabase's new resumable uploads with Uppy to a React App and make it super simple to allow users to pause and resume their uploads! 👉 Learn more about St...

Thund3rd3v•2y ago

Yeah I want to use supabase But how would I go about sending the image with the data?

Revaycolizer•2y ago

below is how I implemented it and it works fine user inputs the file name and both the file and file name are stored in the database but i am using Nextjs13.3.1 and supabase no other things around

  const [vname,setVname] = useState('')
  const [vfile,setVfile] = useState<File |null>(null)
  const [selectedValue, setSelectedValue] =useState({category:'dance'})
  const [open,setOpen] =useState(false)
  const [file_url,setFile_url] = useState<any | null>(null)
  const [user,setUser] = useState<any | null>(null)

 const handlePost =useCallback(async()=>{
    if(user){
     console.log(user)
    try{
      if(vfile){
        const {data,error} = await supabase.storage.from('files').upload(vname,vfile,)
        if(error){
          toast.error('something went wrong')
        }
        else{
       setFile_url(data.path)
        }
      }
      if(vname){
        const data = await supabase.from('category').insert({
          vname:vname,
          file_url:file_url,
          selectedValue:selectedValue,
          user:user
        })
        
        if(data && vname && vfile){
         
          toast.success('Post uploaded successfully')
          setOpen(false)
          }
          else{
            toast.error('Unable to post')
          }
      }
    }catch(error){
     toast.error('Something went wrong')
    }
    
   }else{
    toast.error('You need to sign in')
   }
  },[vname,vfile,selectedValue,file_url,user])

  const [vname,setVname] = useState('')
  const [vfile,setVfile] = useState<File |null>(null)
  const [selectedValue, setSelectedValue] =useState({category:'dance'})
  const [open,setOpen] =useState(false)
  const [file_url,setFile_url] = useState<any | null>(null)
  const [user,setUser] = useState<any | null>(null)

 const handlePost =useCallback(async()=>{
    if(user){
     console.log(user)
    try{
      if(vfile){
        const {data,error} = await supabase.storage.from('files').upload(vname,vfile,)
        if(error){
          toast.error('something went wrong')
        }
        else{
       setFile_url(data.path)
        }
      }
      if(vname){
        const data = await supabase.from('category').insert({
          vname:vname,
          file_url:file_url,
          selectedValue:selectedValue,
          user:user
        })
        
        if(data && vname && vfile){
         
          toast.success('Post uploaded successfully')
          setOpen(false)
          }
          else{
            toast.error('Unable to post')
          }
      }
    }catch(error){
     toast.error('Something went wrong')
    }
    
   }else{
    toast.error('You need to sign in')
   }
  },[vname,vfile,selectedValue,file_url,user])

Thund3rd3v•2y ago

Is it t3 stack?

Revaycolizer•2y ago

i am not using t3 stack but I am using supabase and Nextjs 13 but that is how it should be implemented when using nextjs and typescript

Thund3rd3v•2y ago

Ok I’ll take a look at it when I get home

Revaycolizer•2y ago

okay

Thund3rd3v•2y ago

  const [vname,setVname] = useState('')
  const [vfile,setVfile] = useState<File |null>(null)
  const [selectedValue, setSelectedValue] =useState({category:'dance'})
  const [open,setOpen] =useState(false)
  const [file_url,setFile_url] = useState<any | null>(null)
  const [user,setUser] = useState<any | null>(null)

 const handlePost =useCallback(async()=>{
    if(user){
     console.log(user)
    try{
      if(vfile){
        const {data,error} = await supabase.storage.from('files').upload(vname,vfile,)
        if(error){
          toast.error('something went wrong')
        }
        else{
       setFile_url(data.path)
        }
      }
      if(vname){
        const data = await supabase.from('category').insert({
          vname:vname,
          file_url:file_url,
          selectedValue:selectedValue,
          user:user
        })
        
        if(data && vname && vfile){
         
          toast.success('Post uploaded successfully')
          setOpen(false)
          }
          else{
            toast.error('Unable to post')
          }
      }
    }catch(error){
     toast.error('Something went wrong')
    }
    
   }else{
    toast.error('You need to sign in')
   }
  },[vname,vfile,selectedValue,file_url,user])

  const [vname,setVname] = useState('')
  const [vfile,setVfile] = useState<File |null>(null)
  const [selectedValue, setSelectedValue] =useState({category:'dance'})
  const [open,setOpen] =useState(false)
  const [file_url,setFile_url] = useState<any | null>(null)
  const [user,setUser] = useState<any | null>(null)

 const handlePost =useCallback(async()=>{
    if(user){
     console.log(user)
    try{
      if(vfile){
        const {data,error} = await supabase.storage.from('files').upload(vname,vfile,)
        if(error){
          toast.error('something went wrong')
        }
        else{
       setFile_url(data.path)
        }
      }
      if(vname){
        const data = await supabase.from('category').insert({
          vname:vname,
          file_url:file_url,
          selectedValue:selectedValue,
          user:user
        })
        
        if(data && vname && vfile){
         
          toast.success('Post uploaded successfully')
          setOpen(false)
          }
          else{
            toast.error('Unable to post')
          }
      }
    }catch(error){
     toast.error('Something went wrong')
    }
    
   }else{
    toast.error('You need to sign in')
   }
  },[vname,vfile,selectedValue,file_url,user])

alr thanks!

低级黑小明👑•2y ago

dude I linked the video tutorial for you

Thund3rd3v•2y ago

that was different not the solution I was looking for

Gaming

Programming

File Upload Supabase + T3 Stack