Загрузить изображение в хранилище Supabase с помощью API хранилища

Question

Supabase прекрасна !! Я пытаюсь загрузить изображение в общедоступное ведро, используя запрос POST для <SUPABASE_URL>/storage/v1/object/<BUCKET_NAME>/<IMAGE_NAME>.

Сложность в том, что у меня есть только строка изображения в кодировке base64, и я не могу выполнить успешный запрос к указанной выше конечной точке. Пробовали множество итераций установки Content-type, но безуспешно.

Я пытаюсь загрузить свое изображение из Appsmith, который предоставляет формат base64 для изображения, откуда мне нужно будет попасть в указанную выше конечную точку.

Пожалуйста, помогите мне здесь.

Answer 1

Я рад, что могу найти такого же фаната Supabase, как я!

Я слышу твою боль. Не могли бы вы попробовать эту технику для преобразования строки base 64 в объект blob?

      const byteCharacters = atob(b64Data);

const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}

const byteArray = new Uint8Array(byteNumbers);

const blob = new Blob([byteArray], {type: contentType});

Переменная blob в конце - это переменная, которую вы можете использовать для загрузки в Supabase.

Кроме того, рассматривали ли вы использование SDK Supabase-js? Это сделает вашу жизнь намного проще, поскольку они предоставляют лучшие API для взаимодействия с Supabase.

Вы можете получить пакет supabase-js здесь:https://www.npmjs.com/package/@supabase/supabase-js

И вы можете найти здесь образец кода:https://supabase.io/docs/reference/javascript/storage-from-upload

В вашем случае вы можете сделать что-то вроде этого, чтобы загрузить свой файл:

      const { data, error } = await supabase
  .storage
  .from('avatars')
  .upload('public/sample.png', blob, {
    cacheControl: 3600,
    upsert: false
  })