:start: feat(images): store and retrieve

Author: OlgaPrikhodko

components/Car/Card.vue

@@ -2,6 +2,7 @@
 import heartFilled from "@/assets/heartFilled.png";
 import heartOutline from "@/assets/heartOutline.png";
 
+const config = useRuntimeConfig();
 const props = defineProps({ car: Object, favored: Boolean });
 
 const emit = defineEmits(["favor"]);
@@ -18,7 +19,11 @@ const emit = defineEmits(["favor"]);
       @click="emit('favor', car.id)"
     />
     <div class="flex h-full" @click="navigateTo(`/car/${car.name}-${car.id}`)">
-      <NuxtImg :src="car.image" alt="" class="w-[300px] h-full" />
+      <NuxtImg
+        :src="`${config.public.supabase.url}/storage/v1/object/public/images/${car.image}`"
+        alt=""
+        class="w-[300px] h-full"
+      />
       <div class="p-4 flex flex-col">
         <div>
           <h1 class="text-2xl text-blue-700">{{ car.name }}</h1>

components/Car/Detail/Hero.vue

@@ -1,10 +1,16 @@
 <script setup>
 const props = defineProps({ car: Object });
+
+const config = useRuntimeConfig();
 </script>
 
 <template>
   <div class="mt-10">
-    <NuxtImg :src="car.image" class="w-full" alt="" />
+    <NuxtImg
+      :src="`${config.public.supabase.url}/storage/v1/object/public/images/${car.image}`"
+      class="w-full"
+      alt=""
+    />
 
     <h1 class="mt-10 text-4xl">{{ car.name }}</h1>
 

components/Car/ListingCard.vue

@@ -3,13 +3,19 @@ const props = defineProps({
   listing: Object,
 });
 
+const config = useRuntimeConfig();
+
 const emits = defineEmits(["deleteClick"]);
 </script>
 
 <template>
   <div class="shadow rounded overflow-hidden flex justify-between mb-4">
     <div class="flex">
-      <img :src="listing.url" class="w-80 mr-3 h-44" alt="" />
+      <img
+        :src="`${config.public.supabase.url}/storage/v1/object/public/images/${listing.image}`"
+        class="w-80 mr-3 h-44"
+        alt=""
+      />
 
       <div class="p-3">
         <h1 class="text-2xl">{{ listing.name }}</h1>

pages/profile/listings/create.vue

@@ -5,6 +5,7 @@ definePageMeta({
 
 const { makes } = useCars();
 const user = useSupabaseUser();
+const supabase = useSupabaseClient();
 
 const info = useState("adInfo", () => {
   return {
@@ -17,7 +18,7 @@ const info = useState("adInfo", () => {
     seats: "",
     features: "",
     description: "",
-    image: "nullun",
+    image: null,
   };
 });
 
@@ -81,6 +82,15 @@ const isButtonDisabled = computed(() => {
 });
 
 const handleSubmit = async () => {
+  const filename = Math.floor(Math.random() * 10000000000000);
+  const { data, error } = await supabase.storage
+    .from("images")
+    .upload(`public/${filename}`, info.value.image);
+
+  if (error) {
+    return (errorMessage.value = "Cannot upload image");
+  }
+
   const body = {
     ...info.value,
     features: info.value.features.split(", "),
@@ -91,6 +101,7 @@ const handleSubmit = async () => {
     year: parseInt(info.value.year),
     name: `${info.value.make} ${info.value.model}`,
     listerId: user.value.id,
+    image: data.path,
   };
 
   delete body.seats;
@@ -103,6 +114,7 @@ const handleSubmit = async () => {
     navigateTo("/profile/listings");
   } catch (error) {
     errorMessage.value = error.statusMessage;
+    await supabase.storage.from("images").remove(data.path);
   }
 };
 </script>