S
Supabase•2y ago
mycroft_here

How to upload a file to Supabase storage using Nodejs.

I am working on a hobby project using Nodejs for my backend. I am trying to upload files to Supabase storage using api route /upload. I have a form with <input type="file" name="logo" id="logo"> But, I have not found any helpful resource for this. Can anyone help me with the code or point to the correct tutorial or article?
7 Replies
هـ
هـ•2y ago
Wdym by api route /upload?
هـ
هـ•2y ago
here is a general hint in your api, make sure to have a function that handles uploading using 
const avatarFile = event.target.files[0]
const { data, error } = await supabase
  .storage
  .from('avatars')
  .upload('public/avatar1.png', avatarFile, {
    cacheControl: '3600',
    upsert: false
  }) 
const avatarFile = event.target.files[0]
const { data, error } = await supabase
  .storage
  .from('avatars')
  .upload('public/avatar1.png', avatarFile, {
    cacheControl: '3600',
    upsert: false
  })
check the docs for more info https://supabase.com/docs/reference/javascript/storage-from-upload
Upload a file | Supabase
mycroft_here
mycroft_hereOP•2y ago
i mean, I am building a basic CRUD app with Nodejs, Supabase and EJS as the view engine. One of my API is localhost:3000/api/upload. A form in my index.ejs file sends the image to this API. Can you explain the const avatarFile = event.target.files[0] please. Here's my code for the API route 
router.post("/upload", async (req, res) => {
  const { logo } = req.body;
});
router.post("/upload", async (req, res) => {
  const { logo } = req.body;
});
هـ
هـ•2y ago
In your API route, you would handle the file data from the form and pass it to the uploadFile function. You might need to use middleware like multer for handling multipart/form-data in Node.js.
mycroft_here
mycroft_hereOP•2y ago
okay. Got the idea. Thanks.
هـ
هـ•2y ago
for const avatarFile = event.target.files[0] can I see how are you handling the file upload from the client side?
mycroft_here
mycroft_hereOP•2y ago
Here's my client-side code: 
 <form action="/upload" method="POST">
            <div class="py-2">
              <input type="file" name="logo" id="logo" />
            </div>
            <div class="py-2">
              <button
                class="w-full p-3 text-lg text-white bg-gray-800 border rounded hover:bg-gray-200 hover:text-gray-700 hover:border-gray-800"
                type="submit"
              >
                Uplaod
              </button>
            </div>
          </form>
 <form action="/upload" method="POST">
            <div class="py-2">
              <input type="file" name="logo" id="logo" />
            </div>
            <div class="py-2">
              <button
                class="w-full p-3 text-lg text-white bg-gray-800 border rounded hover:bg-gray-200 hover:text-gray-700 hover:border-gray-800"
                type="submit"
              >
                Uplaod
              </button>
            </div>
          </form>
And I am passing file to Supabase as just req.body.logo

Did you find this page helpful?