I want to have a site that lets users fill out a form where they can add images, and when they press submit, a brand new glitch website is automatically generated that uses those images as assets in the code.
For example, if I want to create a website that generates custom online birthday cards for people, they would type in what they want to say in the card along with images to put in the online card, press submit, and then be sent an email with the link (a custom URL) their custom online card. This should all be automatic.
Hi @scheerio This can absolutely be accomplished with a little url magic.
Here’s an outline of one approach:
With this approach you’ll have two interrelated projects - the one that the user uses to set up the card and a project that’s remixed to actually create the card for the user.
You’ll have to handle uploading the images to some location. Glitch doesn’t provide a documented API to upload images to a project’s assets drawer, but there are any number of places you can store an image for free; you just need to be able to retrieve the url where the image can be accessed after upload.
Glitch allows you to pass values to a remix’s .env file (see https://remix-button.glitch.me/ for details). For the card message you’ll want to surround the message with double-quotes so that it sets your env variable as something that can actually be read as a unit. The image url can be passed as-is.
on the card setup project’s submit you’ll email a link constructed to remix your remix target project with the appropriate values in the url to set the corresponding env variables. You’ll want to use a mailing service like SendGrid to send your emails.
in the project to be remixed your start script should check to see if it is itself a remix (you can check the project id using process.env.PROJECT_ID and compare it to your remix project’s id which you can get from the browser’s console - if you open the console on the Editor’s page the project id will be logged there).
if it’s a remix you’ll do whatever you need to do to create the card you want created using the values from the .env file
When someone clicks on the link you provide they’ll be directed to the remixed project. If they’re logged in to Glitch it will be created under their Glitch account; if not it will be created for a new anonymous user and if they log in it will be merged with their existing projects.
There are undoubtedly other approaches that might be simpler, but this should serve as a starting point.
@cori, thank you SO much for this! I suspected that the .env approach would be good. Do you have any recommendations for how to handle getting uploaded images into new projects in a fully automated way? You touched on that, but I was wondering if you had any ideas. The part that is tricky to me is getting that image URL into the code. In your method described, I would assume the image URLs would go into the .env as well.
Yes, that’s right on, @scheerio, my thought was that you’d put the url to the image in .env and then reference it in your code to create the card. Once the image has an internet-accessible address you could use child_process.exec() to wget the image into your project. You could probably also use Node on the server to save the image to a subdirectory of your project’s home folder, but that won’t help you much in this pattern, because that file won’t be present in the project that’s going to need it (the remix target project) which is why I went the route of dropping the selected image on an image hosting platform.
I kinda created something similar in https://glitch.com/~birthday-card-generator, where a user inputs data, and uses the Glitch API to add the values as .env variables to the new project (.env values can be added/modified to a new project by passing arguments to the URL), which then generates a card based on those details.
