Trouble sending image from JS to http_endpoint

Anvil Q&A
1

I’m sending an Image through JS to my Anvil http_endpoint:

<input type="file" id="fileinput">
<script>
var file = document.getElementById('fileinput').files[0];

fetch('https://***********.anvilapp.net/_/api/users/*********', { 
    method: 'POST',
    headers: {
      "Content-Type": " Perhaps need to define a content-type here"
    },
    body: file
  }).then(
    response => response.json() // if the response is a JSON object
  ).then(
    success => console.log(success) // Handle the success response object
  ).catch(
    error => console.log(error) // Handle the error response object
  );
};
</script>

Seems that the request works OK, and I have set the “Access-Control-Allow-Origin” header to accept these post requests cross-domain.

import anvil.server
from anvil.server import http_endpoint, request

@anvil.server.http_endpoint("/users/:id")
def get_user(id, **params):
  app_tables.test.add_row(image=request.body)
  response.headers["Access-Control-Allow-Origin"] = "https://***********.anvilapp.net"
  return "ok"

From the docs, it seems that request.body should contain the request body as a Media object which should already contain my uploaded image.

But app_tables.test.add_row(image=request.body) doesnt seem to write anything to my table…

Any suggestions?

2

If you

print(type(request.body))
print(request.body)

what does it show?

3

I think you can print it and look at the content in the app logs… can you?

1 Like
4

Yes, it looks like you can,
Learned something new today :slight_smile: Reinstating my last post…

5

Ok …
This works for me. Note this opens up everything and may not be what you want in production, but it should prove a point :

  # Add this 
  r = anvil.server.HttpResponse()
  # ...your DB save here...then : 
  r.headers['Access-Control-Allow-Origin'] = '*'
  r.headers['Access-Control-Allow-Methods'] = 'POST, PUT, DELETE, GET, OPTIONS'
  r.headers['Access-Control-Request-Method'] = '*'
  r.headers['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept, Authorization'

  return r

You also need to set the content type when making the API request.

If I do both of those things then it writes my file image to the DB.

I tested using : https://resttesttest.com/
I added a Content-Type header as “image/png”
I added a png image

and it worked.

2 Likes
6

@david.wylie This was really a HUGE help.

Thank you so much for spending the time to investigate this as well.

Hope I can be in the position to return the favor sometime.

But this seemed to work!

1 Like
8

Thank you for your answer!

I met the same problem and I knew that the problem was with CORS headers. And you know what? I’ve written something like
r['Access-Control-Allow-Origin'] = '*'
instead of
r.headers['Access-Control-Allow-Origin'] = '*'

Thanks to you for helpening me to realize this dumb mistake…

And this is even mentioned in documentation! (list to the very end)
https://anvil.works/docs/http-apis/creating-http-endpoints#the-http-endpoint-decorator

And I think for most cases only ‘Access-Control-Allow-Origin’ is sufficient

1 Like