2

im having trouble downloading an image from supabase. I get this errror

{
"statusCode": "400",
"error": "Bad Request",
"message": "headers should have required property 'authorization'"
}

I've followed the docs https://supabase.io/docs/guides/with-nextjs

here is my code for the request

const myQuote = ({ dataFetch }) => {
  const [avatarUrl, setAvatarUrl] = useState(null);

  async function downloadImage(path) {
    try {
      const { data, error } = await supabase.storage
        .from("job-photo")
        .download(`jobphotos/${path}.jpg`);
      if (error) {
        throw error;
      }
      const url = URL.createObjectURL(data);
      setAvatarUrl(url);
    } catch (error) {
      console.log("Error downloading image: ", error.message);
    }
  }

  return (
    <>
      <Dashboard />
      <QuoteTable tableData={dataFetch} downloadImg={downloadImage} />
    </>
  );
};

export default myQuote;
KeoooDev
  • 528
  • 4
  • 14

2 Answers2

1

Managed to get it working by adding public/ to from

 const { data, error } = await supabase.storage
        .from("public/job-photo")
        .download(`jobphotos/${path}.jpg`);
KeoooDev
  • 528
  • 4
  • 14
0

do you have the following code?

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)
DevZer0
  • 13,433
  • 7
  • 27
  • 51
  • I do indeed. I use the client to fetch other posts on my site just cant download an image for some reason. my bucket is set to public – KeoooDev Nov 13 '21 at 11:10
  • what's the URL for the public bucket? did you try accessing it using a browser? have you set the objects in the bucket to public as well? do they inherit the parent permissions? – DevZer0 Nov 13 '21 at 11:12
  • 1
    hello I have fixed it it needed /public – KeoooDev Nov 13 '21 at 11:31