Use POST with image and static site

Hello,

I’m very beginner in all this stuff, but I wonder if it is possible to upload of FormData object with javascript on the client with
fetch("/", {method: 'POST', body: form});
to glitch. The form constains an image, and other strings and numbers (author and time). I would like to update a json file and set the image file in the folder assets/memes/ or assets/template/ , based on the form’s content. There are already other images here, that I got from my github repo. My site is static for now, maybe what I’m asking for is impossible with a static site. I don’t know if any of this is possible, but thanks in advance for helping me.

I’m afraid that this, to my knowledge, won’t be possible with a static site. The best way will be to use nodejs and express (see the ~hello-express project) and use its inbuilt routing to handle post requests. There are countless tutorials that show you how to upload images and other data, just search for ‘file upload with express’ and you’ll find one.
Good luck! :slight_smile:
Eddie

2 Likes

Thanks for the reply. Does anyone know a website that works a little like a ‘POST deposit box’ ? So everyone could send a POST request to for example https://post.com/post/1234567890abcdef and I could see it at https://post.com/dashboard/1234567890abcdef . It would be a great solution doesn’t it ?

1 Like

If you only need it to work for images I’m personally a fan of https://imgbb.com/.

No, there so strings about the author and description…

I want to help with this by making a Glitch project you can remix, so I’m leaving a reply here so that I remember… stand by :slight_smile: (and sorry if I forget)

1 Like

Hello again @bananasmoothii

I made something that might help with some of this…

Remix the project to make your own instance. Then you can use it by POSTing to /store with whatever Form or JSON body you want. It will return an id in a JSON message like { id : 7 }.

You can then look up all items with GET /get/all or GET a specific ID like /get/7.

This will give you either a JSON array or a single JSON object, respectively.

To store an image in there you could fill a field with the URL or base64 of the image to put in a data URI like this: Data URIs | CSS-Tricks

The security is based on a URL whitelist in allow-domains.js so only the sites you choose can send/receive data with the store. As an example, I made Glitch … it acts as an API tester so you can try all the features.

The API doesn’t provide a view function, but you could render your own view after GETting the data.

Any questions hit me up, if it’s not helpful, no worries. Docs are on the Glitch readme for the project :slight_smile:

Thanks a lot @SteGriff !

Unfortunately that’s not exactly what I was searching for, as if I remix it, it will be a non-boosted site, that takes time to wake up. When sending a post request to it, it would require a lot of load time and the users (my friends) won’t understand what’s going on, and they will probably not wait until it loads, if it actually loads, because I am often confronted with my site not starting up, then I have to go in the console and type refresh.

The good point is, it is going to help me a lot for what I am planning to do, as I switched to a non-static website for having PHP that pastes things like the head, header and footer of every page, and that quite useful. Your example will help me a lot !

1 Like