I'm trying to upload an avatar file for a testimonial. Used to work without the restful api but now it's not working. Can anybody tell me what is wrong with my code? I double checked it and don't get it. I'm passing

event.target[2].files[0]

to the api but I wonder if i'm not losing data

js
// frontend code
saveTestimonial(evt) {
    this.isFetching = true

    const data = new FormData()
    data.append('description', this.description)
    data.append('identity', this.identity)
    data.append('picture', evt.target[2].files[0])

    console.log(evt.target[2].files[0])

    fetch('/api/testimonials-add', {
      method: 'POST',
      body: data,
    })

// --- API code

    const imageFile = data.files.picture[0]
    const imagePath = `public/${imageFile.originalFilename}`
    supabase.storage
      .from('test_images')
      .upload(imagePath, imageFile)
      .then(async (response) => {
        await this.supabase.from('testimonials').insert({
          description: data.fields.description[0],
          name: data.fields.identity[0].split('/')[0].trim(),
          occupation: data.fields.identity[0].split('/')[1].trim(),
          picture:
            'https://qroiybphgipjhkmfsvnj.supabase.co/storage/v1/object/public/' +
            response.data.Key,
        })
      })

Hello @Gitanes! This thread has been automatically created from your message in #843999948717555735 a few seconds ago. We have already mentioned the @User so that they can see your message and help you as soon as possible! Want to unsubscribe from this thread? Right-click the thread in Discord (or use the ``...`` menu) and select "Leave Thread" to unsubscribe from future updates. Want to change the title? Use the ``/title`` command! We have solved your problem? Click the button below to archive it.

here is a sample data

json
data: {
  "fields": {
    "description": [
      "It is a long established etc..."
    ],
    "identity": [
      "Ella Fitzgerald / Singer"
    ]
  },
  "files": {
    "picture": [
      {
        "fieldName": "picture",
        "originalFilename": "humble.jpeg",
        "path": "/var/folders/h3/q50t1r917ddbn9xgzzr8z13w0000gq/T/5vrhgasyAb_V-kCHVFhJvZu4.jpeg",
        "headers": {
          "content-disposition": "form-data; name=\"picture\"; filename=\"humble.jpeg\"",
          "content-type": "image/jpeg"
        },
        "size": 498889
      }
    ]
  }
}

What did you do that worked? How is your API setting up a user token or are you using service key?

what worked before was that i was passing

event.target[2].files[0]

to the supabase object. now I do too but there is an extra step where i transform the data to form data. (yes i'm using service keys)

Are both the storage upload and the database insert failing?

well the db insert depends on the storage upload. since no record is created i assume it's the storage upload that fails

You might stick in just a database insert to test if connection is working. If you can't get log messages from your api function then if that works you can at least "log" an error to the database to debug. No errors in the database postgres logs?

ok the connection is working.

The api logs should show every call thru the API including storage and database along with the data sent and returned. If the storage call is getting there you should see towards the top of the refreshed list.

there is no call except a get request when i browse storage and the pictures already uploaded

Yeah, I'm not that familiar with server side stuff, but I don't see how passing a client file object without the data is going to cause storage to fetch it. Would the file not have to be on the server filesystem?

dunno, it used to work when i was not using the server : i'm doing this so i can hide my api keys

I don't know if this will help https://github.com/supabase/storage-api/issues/86 towards the bottom is a nextjs solution and what they had to do. Not sure what you are using or if it is close, but I suspect there is more to do to upload server side.

i'm using 11ty and alpine

I think more research, or a new question specifically asking about your environment and passing a file to the server for upload is best at this point. You may not get more eyes on this thread now, and I would have to research to learn the issue.