Send image to endpoint

Plasmic Studio Questions
1

I am trying to send an image uploaded by the “Upload file” component, but I still can’t do it.

I think my problem is that I am sending the image in an incorrect format, but I am not sure.

This is the code that I wrote in the “On file uploaded” trigger of the component:

const formData = new FormData();
formData.append('image', $state.upload.files[0]); // 'image' debe coincidir con el nombre del campo en el servidor

// Enviar la solicitud
fetch('https://jaime97k.pythonanywhere.com/upload-image', {
    method: 'POST',
    body: formData // Enviar los datos del archivo como FormData
})
.then(response => response.json())
.then(data => {
    console.log('Success:', data); // Maneja la respuesta del servidor
})
.catch((error) => {
    console.error('Error:', error); // Maneja errores
})
2

Can you add some details about what you see in devtools?

3

This is the look I am having in the devtools network section:

image
image872×190 9.15 KB

image
image879×243 8 KB

I check my server and the request.files is {}.

4

Hard to tell here. Your server rejected the request with 400 error for some reason. You’ll need to debug it there. Maybe you could try to create a valid request with another tool and compare the 2 requests to see what’s different.

5

I created a plain html file input and tried all the workflow and it looks like the problem is that the upload file component give me a proxy element instead of a file element.

Is there any other method for upload an image to a server?

6

Thanks for the info. I was able to see that uploaded files are Proxy objects and have lost the File type information, so that’s why you see [object Object] in the form data.

I think an alternative that should work is:

formData.append('image', $state.upload.files[0].contents)

1 Like