Supabase Storage

[vickykeen]

Hi Guys, I have a question i am creating a platform where i can post image based the User ID which means each user will have a folder created with their user id and under the folder will have their uploaded media files as shown in the policy below.

((bucket_id = 'profiles'::text) AND (( SELECT (auth.uid())::text AS uid) = (storage.foldername(name))[1]))

here is the code for how i upload media to the storage using nuxt3

async function handlePost() {
  if (!user.value) {
    alert('You need to log in to post.');
    return;
  }

  let mediaUrlToUpload = mediaUrl.value; // Default to the already uploaded media URL (if any)

  // If there's a file to upload, upload it now
  if (uploadedFile.value) {
    const file = uploadedFile.value.file;
    const folderName = user.value.id; // User's ID as folder name
    const fileName = `${folderName}/${file.name}`;

    const { data, error } = await client.storage
      .from('profiles')
      .upload(fileName, file);

    if (error) {
      console.error('Upload error:', error.message);
      alert('Failed to upload media.');
      return;
    } else {
      console.log('Uploaded file:', data);

      // Generate the public URL
      const { data: publicUrlData } = client.storage
        .from('profiles')
        .getPublicUrl(fileName);

      mediaUrlToUpload = publicUrlData?.publicUrl || ''; // Update the media URL
    }
  }

  // Insert post into the database
  const { data, error } = await client
    .from('posts')
    .insert({
      user: user.value.id,
      post_content: textareaContent.value,
      media_url: mediaUrlToUpload,
      media_type: uploadedFile.value?.type || null,
    });

  if (error) {
    console.error('Error creating post:', error);
    alert('Failed to create post.');
  } else {
    textareaContent.value = '';
    uploadedFile.value = null; // Clear the uploaded file after posting
  }
}

Now how i delete the media in the folder in the storage?

Thank you very much.

[GaryAustin1]

You would need to use storage list API call with the folder set to the user id. Then use the returned array to get an array of pathnames to call the delete API call with. If you changed from using folders to buckets with UUID in the name then you could just delete the bucket with an API call.

[vickykeen]

Thank you very much really appreciated i will try your solution.