How to temporarily store an ajax/php generated image in a form
I will try to articulate this as best as I can as it's not so much a 'how' to program question, it's more about what 'way' to code this.
The form is still a bit buggy, but that doesn't matter in context of this question.
For the purpose of this question, I am only interested in the LOCATION box on this form
I will include as many screenshots as needed to get my problem across.
I have a form
The section that says City/Town/Village name runs with ajax: e.g.
When a City/Town/Village is selected, this fires another ajax request which sends the latitude, and longitude of the place to a php script that I wrote, and super-imposes a star on the location selected.
Here's what is looks like if we selected Munich from the drop down...
(PS... I'm quite proud of this as for me, it was quite a programming achievement to pull it off! ... not least I had to create my own Mercator Projection map from scratch of the whole of Europe... it took me a very long time)
Here is the question:
Right now, to achieve the result above, the image file has been saved in a folder 'tempSecureImages'. The filename for this jpg image has been created to be unique by the following code:
At this point, the file name has not been inserted into a database.
If the user now clicks the submit button on the form, the following happens:
1) The filename is inserted into a database field
2) The file is moved to a folder called 'secureImages'
This means that when the user revisits this form (because of for example fields that still need to be completed) - this field will appear as the user selected so they don't have to do 'this' bit again.
All good so far
This is the crux of this question...
If the user DOES NOT click SUBMIT on the form (for example he/she gets bored and just presses BACK on the browser, or for example there's a power cut), there is a JPG file left on the server in the folder tempSecureImages/ and it will just sit there... like an orphan (quite sad that).
I don't want to save it into the database until the user clicks SUBMIT because by abandoning the form (for whatever reason), the user clearly didn't want to SUBMIT it. If this image is referenced in the database, it will be 'as if' the user DID click SUBMIT (which they didn't!)
Indeed, over time, if there were lots of users on the site, this could happen many times and this folder will fill up with useless images that need not be there.
I can think of three solutions:
1) Periodically clear of the tempSecureImages/ folder by deleting all contents of it (this would occasionally upset a user who has just done the ajax image location on the form in real time as 'their' image would dissapear suddenly.
2) Like (1) above but reference the image in a database so that there is a datastamp on it, and then clear out all images in the folder tempSecureImages/ that are more than a day old for example. This would stop LIVE users experiencing their images suddenly dissapearing.
3) Hold the location image in memory, and not actually save the image on the hard drive/server at all. Only when the form is submitted is the image in memory saved onto the server. I was thinking something along the lines of using:
I kind of like option 3, because if the user abandons the form (doesn't click submit) nothing has been saved anywhere, and no database calls have been made... but that raises the question of what the memory garbage collection will do (which I have no idea about).
... and then if the user submits the form, the image is decoded into the original jpg (I don't know how to do that) and the filename is stored in the database and the file is put in the folder 'securedImages'.
If option 3 was implemented, does the server garbage collection automatically deal with the memory allocation for these images in a sensible way
How would YOU, the super helpful people here go about solving this problem? What would a professional do? I find programming interesting because there's many ways to 'skin a cat' /do things.
Would option 3 be the best way to do this. I feel it would be the 'cleanest' method, and quickest, as it would require less database queries but would love to hear from you.
Best wishes
James
The form is still a bit buggy, but that doesn't matter in context of this question.
For the purpose of this question, I am only interested in the LOCATION box on this form
I will include as many screenshots as needed to get my problem across.
I have a form
The section that says City/Town/Village name runs with ajax: e.g.
When a City/Town/Village is selected, this fires another ajax request which sends the latitude, and longitude of the place to a php script that I wrote, and super-imposes a star on the location selected.
Here's what is looks like if we selected Munich from the drop down...
(PS... I'm quite proud of this as for me, it was quite a programming achievement to pull it off! ... not least I had to create my own Mercator Projection map from scratch of the whole of Europe... it took me a very long time)
Here is the question:
Right now, to achieve the result above, the image file has been saved in a folder 'tempSecureImages'. The filename for this jpg image has been created to be unique by the following code:
$randomFileName = round(microtime(true)).".jpg";
imagejpeg($blankImageHolder, $randomFileName);
rename($randomFileName,"tempSecureImages/".$randomFileName); At this point, the file name has not been inserted into a database.
If the user now clicks the submit button on the form, the following happens:
1) The filename is inserted into a database field
2) The file is moved to a folder called 'secureImages'
This means that when the user revisits this form (because of for example fields that still need to be completed) - this field will appear as the user selected so they don't have to do 'this' bit again.
All good so far
This is the crux of this question...
If the user DOES NOT click SUBMIT on the form (for example he/she gets bored and just presses BACK on the browser, or for example there's a power cut), there is a JPG file left on the server in the folder tempSecureImages/ and it will just sit there... like an orphan (quite sad that).
I don't want to save it into the database until the user clicks SUBMIT because by abandoning the form (for whatever reason), the user clearly didn't want to SUBMIT it. If this image is referenced in the database, it will be 'as if' the user DID click SUBMIT (which they didn't!)
Indeed, over time, if there were lots of users on the site, this could happen many times and this folder will fill up with useless images that need not be there.
I can think of three solutions:
1) Periodically clear of the tempSecureImages/ folder by deleting all contents of it (this would occasionally upset a user who has just done the ajax image location on the form in real time as 'their' image would dissapear suddenly.
2) Like (1) above but reference the image in a database so that there is a datastamp on it, and then clear out all images in the folder tempSecureImages/ that are more than a day old for example. This would stop LIVE users experiencing their images suddenly dissapearing.
3) Hold the location image in memory, and not actually save the image on the hard drive/server at all. Only when the form is submitted is the image in memory saved onto the server. I was thinking something along the lines of using:
$base64 = base64_encode($imagedata);I kind of like option 3, because if the user abandons the form (doesn't click submit) nothing has been saved anywhere, and no database calls have been made... but that raises the question of what the memory garbage collection will do (which I have no idea about).
... and then if the user submits the form, the image is decoded into the original jpg (I don't know how to do that) and the filename is stored in the database and the file is put in the folder 'securedImages'.
If option 3 was implemented, does the server garbage collection automatically deal with the memory allocation for these images in a sensible way
How would YOU, the super helpful people here go about solving this problem? What would a professional do? I find programming interesting because there's many ways to 'skin a cat' /do things.
Would option 3 be the best way to do this. I feel it would be the 'cleanest' method, and quickest, as it would require less database queries but would love to hear from you.
Best wishes
James
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Hey James,
Couple of observations regarding your 3 options. When you do this:
$base64 = base64_encode($imagedata);
The $base64 variable is only in memory for the duration of the PHP script running. Once you've renderd the image to your HTML page, there is no longer a $base64 variable so no memory usage.
As for the temporary folder storage, you have a coupe of built-in PHP functions to help with this:
tempnam($folder, $prefix); // automatically generate a uniquw temp file name
sys_get_temp_dir(); // get the system tmp folder, so you could do this:
$img = tempnam(sys_get_temp_dir()
That would give you a unique filename, with it's path set to the systems tmp storage device. You can always clear this out periodically, by running a script to only delete files older than a given period (a week for example).
Option 3 does make sense - you would need to base64 encode your image, and then render it in an IMG tag on your HTML page. You'll need to also push that base64 encoded string into a hidden form element. Then when the user submits the page, you decode the value from that hidden input and save to your storage.
Couple of observations regarding your 3 options. When you do this:
$base64 = base64_encode($imagedata);
The $base64 variable is only in memory for the duration of the PHP script running. Once you've renderd the image to your HTML page, there is no longer a $base64 variable so no memory usage.
As for the temporary folder storage, you have a coupe of built-in PHP functions to help with this:
tempnam($folder, $prefix); // automatically generate a uniquw temp file name
sys_get_temp_dir(); // get the system tmp folder, so you could do this:
$img = tempnam(sys_get_temp_dir()
That would give you a unique filename, with it's path set to the systems tmp storage device. You can always clear this out periodically, by running a script to only delete files older than a given period (a week for example).
Option 3 does make sense - you would need to base64 encode your image, and then render it in an IMG tag on your HTML page. You'll need to also push that base64 encoded string into a hidden form element. Then when the user submits the page, you decode the value from that hidden input and save to your storage.
ASKER
Correction, the database has 799700 places in Europe, so not too bad on the image rendering front and saving them in a filder.
ASKER
I have to just pop out but will read all responses when I get back... This 'problem' has been playing on my mind for 2 weeks now to it's a relief to get some help on it!
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you all, I tried to leave (positive) feedback for all of you but after I'd left one feedback I clicked on the next name and the form disappeared unfortunately. You have all been super helpful. Thank you.
ASKER
Would you provide demo code of encoding and decoding an image please.
As a preference, which would you 'go' for.... base64, or render an image for every place (millions of them) and keep a folder on the server with all these pre-rendered images in?
PS the map took over 2 weeks SOLID to make! Nightmare!
Thank you