Where do I edit this code?
 

So I have a working image upload php file, but its getting to the point where I need to start renaming the files being uploaded based on the date/time.

This is the code I currently have to upload the images:

What I'd like to do is add something along the lines of:

But I cant figure out where I need to edit my original code, or append the date rename part, every time I try it stops uploading the image file to the server :/

Basically, what I need to be able to do is rename image.jpg to image10112022101656.jpg (which I beleive the $time = date("YmdHis")."-".time(); should be doing, I just can't figure out where to drop that new part of code into my original, any help would be appreciated.

Also, as a secondary question on the same subject, once the file is uploaded to the directory on the server, how would I go about submitting that url to a row in my SQL database and attaching it as an image to a specific recipe?

$newFileName = $target_dir .'fileName'.time().'.'. pathinfo($_FILES["fileToUpload"]["name"] ,PATHINFO_EXTENSION);

or...

$newFileName = $target_dir . time().'-fileName'.'.'. pathinfo($_FILES["fileToUpload"]["name"] ,PATHINFO_EXTENSION);

Depends on your logic and how you build your sql tables, but something along these lines...

else {
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $newFileName)) {
echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
// add sql query here
INSERT INTO image_table (id, filename, recipe, ...)
VALUES ('', $newFileName, 'Fried titty', ...)
}

While you're at it, you might as well want to store the width and height of the image so you can add the width and height tags to your html output as well. After upload, you could also automatically create a thumbnail, as well as converting the image to webp (smaller in file size = good for seo).

Alternatively, you could move the uploaded image directly to a folder matching that recipe...
Could use the id of the recipe, or the name/slug (or hash) or whatever. Basically, creating a new folder for each new recipe in the database. Then in your recipe page, you can create a function to display images, which should then be located in that recipe folder with matching name.


I would consider such approach if you are planning on adding 1000s of recipes and thus, going to end up with one folder with a shit ton of image files.
During image upload, just check if the folder already exists or not, else go create it:
if (!is_dir('path/to/recipes/friedtitty')) mkdir(path/to/recipes/friedtitty', 0777, true);

Another really simple approach would be to rename your uploaded file to the same name of the title of the recipe. Then you can skip adding the image to a database entirely.

$recipe_title = "Salty Seamen Sauce";
$recipe_image = trim(str_replace(" ", "-", strtolower($recipe_title))) . "jpg";
// which would become salty-seamen-sauce.jpg

Awesome, thank you!

Also, as a side question, I'm seeing a ton of webp images as of late, whats the actual purpose of them? Is it purely for SEO(filesize) or do they serve a purpose other than that?

I only ask as you mentioned webp in your reply above lol

Well, not just SEO, since the file size is smaller, it will load faster which is a better user experience. 10 jpg images of 100kb each or 10 webp images of 55kb each, makes quite the difference in load time.

Serving large, non-optimized images is kind of a no go in 2022. You want to serve smaller images for mobile users compared to desktop sized images, use webp (with fallback if there's no browser support), lazyload the images below the fold.

These are somewhat the bare minimum things to do. You want your pages to load really fast these days, just optimizing images isn't even enough.

I would go much further and look at cache-ing a static, minified version of the recipe pages, cutting out all sql requests and php execution all together. But also using a PHP handler which supports Opcache (in-memory cache) etc.

Sweet reply! very Helpful!