Hosting images on The Internet
31 July, 2008
The Internet currently has many image hosting services available that are free to use. Image hosting services such as ImageShack, Photobucket, and xs.to to name just a few.
Here at fcOnTheWeb, we have decided to launch our own image hosting service.
What happens is you, the user, uploads an image through the form. We give that image a unique name then move it to the appropriate folder. Once there, we give you back the URL to the image, with its new name.
We use a unique name so that if images with common names are uploaded (my_cat.jpg for example) the names do not clash and images do not get overwritten.
We are using a using a unique system similar to the one we used in our short URL project. We generate a random hash, then check in a database to ensure it has not been used before. If it has, we generate a new random hash and start again. When we confirm that it is a unique name, we add it to the database then rename the image with it.
So, how is it done? Let's find out.
A normal HTML form is used to allow the user to select their image. There are a couple of things to be aware of. Firstly, the enctype has to be multipart/form-data (sometimes for forms this does not matter, but it does in this case). And the type of input we use to allow the user to select a file is the file type. So the form looks something like this:
<form name="your_form_name" method="POST" action="your_submission_page.php" enctype="multipart/form-data">
Select a file to upload... <input type="file" size="60" name="your_field_name" />
<input type="submit" value="Upload file NOW!" />
</form>
Now lets take a look a the page our form submits to. We need to first check that there is a file being uploaded before we do anything else.
if (isset($_FILES["your_field_name"]["tmp_name"])) {
...
}
Once we know an image is being uploaded, we want to make sure the file is in fact an image and not something else.
We use getimagesize which will return false if the file is not an image, or an array of its properties if it is an image. We can then check this array to see if the image is of the type we will allow.
$get_image_size_result = getimagesize($_FILES["uploaded_file"]["tmp_name"]);
if ($get_image_size_result["mime"] == "image/jpeg" || $get_image_size_result["mime"] == "image/jpg"
|| $get_image_size_result["mime"] == "image/gif" || $get_image_size_result["mime"] == "image/png") {
...
}
Once we have determined that the file is indeed a valid image format, we need to get a random name for it. We use the same get_random_hash() as we used earlier. It has 21,083,232,519,264,920,575 possible combinations, so suits our needs.
$target_path_file = get_image_hash();
...
function get_image_hash() {
$hash_is_verified = false;
while ($hash_is_verified == false) {
$random_hash = get_random_hash();
if (check_random_image_hash_in_db($random_hash)) {
} else {
$hash_is_verified = true;
}
}
return $random_hash;
}
function get_random_hash() {
$random_hash = "";
$letters_array = array("a", "b", "c", "d", "e", "f", "g", "h", "j", "k", "m", "n", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "M", "N", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z");
for ($i = 0; $i < 7; $i = $i + 1) {
$random_hash = $random_hash . $letters_array[array_rand($letters_array)];
}
return $random_hash;
}
Now we have our new name, we just need to move the file to its new location with its new name.
if (move_uploaded_file($_FILES["uploaded_file"]["tmp_name"], $_SERVER["DOCUMENT_ROOT"] .
substr(basename($_FILES["uploaded_file"]["name"]), strrpos(basename($_FILES["uploaded_file"]["name"]), ".")))) {
echo "Image uploaded.";
} else {
echo "There has been an error";
}
And there you have it. An image hosting service, as easy as that.
We will be running this service for a while and monitoring its use. If it is abused or using too much bandwidth, it will be stopped.
Also, images uploaded to fcOnTheWeb are subject to removal, without warning, if we see fit.
Use it wisely, and enjoy.
ferrari_chris
Add your comment on this article below:
Sorry, there's an error with your form entries. We really appreciate your comment, so please try again.
Form submitting now...