Simple File Upload Form
Sometimes site owners, especially site developers and others who work with the public via their website, need to provide somewhere to upload a file.
The file may contain sensitive information or otherwise be unsuitable for delivering as an email file attachment. A file upload form placed in a secure location with https://... URL provides a secure upload. The copy of the file is encrypted from the point where it leaves the form user's computer to the point where it arrives at the server.
The file upload form in this article is as simple as I was able to make it and still have the basic functionality required for uploading a file.
The only customization that is absolutely necessary is to specify the directory where to store the uploaded file. The spot is near the top of the code. I'll explain how to specify the directory.
The upload form is designed to be put into an iframe tag.
With the upload form in an iframe tag, the site user can upload a file without having to leave the current page. The current page might be a contact form, a page with instructions for doing something, a sales page — any web page that can contain an iframe tag.
When it is exactly what you need, this simple form can be a treat.
To prevent unauthorized people from using the form and uploading junk, the page with the iframe may be on a password-protected page. The Willmaster.com website has several articles about password protection. One Page for Password and Content can be consulted. And also Various Ways to Protect a Directory.
The upload form is designed for infrequent use. A heavily used form would need more features.
The form may be used as is, as a page by itself. But it is designed to be used within an iframe tag.
In an iframe, the person can upload the file and get their confirmation message without leaving the current page.
Here is an illustration of what you can expect:
(illustration)
Select file to upload:
If the above illustration was a full live implementation, the after-upload confirmation text would have the uploaded file name and file size instead of the placeholders you see here.
With this upload form, only one file can be uploaded at a time. When a file is uploaded with the same name as a previously uploaded file, the previous file is overwritten. There is no email notification when a file is uploaded.
All of those features, and others, could be added, of course. But it would make the coding of the basic upload form more complex.
Here is the source code of the file upload web page (the one designed to be displayed within an iframe but may be used by itself). Customization notes follow.
<?php
$WhereToPutUploadedFiles = "/upLoaded/";
/* Directory specified above must exist and be writable. */
?><!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Single File Upload</title>
<style>
html, body { font-size:100%; }
</style>
</head>
<body style="overflow:hidden;">
<?php
if(count($_FILES))
{
$WhereToPutUploadedFiles = preg_replace('!/*$!','',$WhereToPutUploadedFiles);
$WhereToPutUploadedFiles = preg_replace('/'.preg_quote($_SERVER['DOCUMENT_ROOT'],'/').'/','',$WhereToPutUploadedFiles);
$WhereToPutUploadedFiles = "{$_SERVER['DOCUMENT_ROOT']}$WhereToPutUploadedFiles";
$ta = array_keys($_FILES);
$th = $_FILES[$ta[0]];
$errors = false;
if( $_FILES[$ta[0]]['error'] )
{
switch($_FILES[$ta[0]]['error'])
{
case UPLOAD_ERR_INI_SIZE : case UPLOAD_ERR_FORM_SIZE : $errors = 'that the file exceeded maximum file size.'; break;
case UPLOAD_ERR_PARTIAL : $errors = 'that the file was only partially uploaded'; break;
case UPLOAD_ERR_NO_FILE : $errors = 'that no file was uploaded.'; break;
case UPLOAD_ERR_NO_TMP_DIR : $errors = 'a missing temporary folder.'; break;
case UPLOAD_ERR_CANT_WRITE : $errors = 'failure to write file to disk.'; break;
case UPLOAD_ERR_EXTENSION : $errors = 'a PHP extension stopped the file upload.'; break;
default: $errors = 'unknown';
}
$errors = preg_replace('/\.*$/','',$errors);
echo "<div>File <b>{$_FILES[$ta[0]]['name']}</b> was not uploaded. The error was $errors.</div>";
}
else
{
echo "<div>Received file <b>{$_FILES[$ta[0]]['name']}</b> (size: <b>{$_FILES[$ta[0]]['size']}</b>) without errors.</div>";
$dest = "$WhereToPutUploadedFiles/{$_FILES[$ta[0]]['name']}";
if( move_uploaded_file($_FILES[$ta[0]]['tmp_name'],$dest)===false ) { echo "<div>However, I was unable to put file into its $dest location.</div>"; }
}
}
?>
<?php if(!count($_FILES)): ?>
<form method="post" action="<?php echo($_SERVER['PHP_SELF']); ?>" enctype="multipart/form-data">
<p>
Select file to upload: <input type="file" name="file">
</p>
<p>
<input type="submit" value="Upload File">
</p>
</form>
<?php endif; ?>
</body>
</html>
Customization —
Near the top of the above code, you'll see this line:
$WhereToPutUploadedFiles = "/upLoaded/";
Replace /upLoaded/ with the location on your server where uploaded files shall be saved.
Specify the location as the URI of a URL. The URI is the part of the URL after the domain name.
URL: https://example.com/upLoaded/ URI: /upLoaded/
The directory must exist so PHP can save uploaded files into it. After you've created the directory, update the web page source code by replacing /upLoaded/ with your directory location.
That is all the customization you have to do. (You may, optionally, change the style of the form and/or add other elements — instructions/
Installing —
When the above source code is ready, save it as upload.php or other PHP name that works for you. Put upload.php on your server and make a note of its URL. You'll need the URL for the iframe tag.
Only that one installation of upload.php is needed — regardless how many iframes for uploading that you publish on your web pages.
Iframes for Uploading —
The iframe where people can upload a file may be placed on any web pages. Perhaps it will be placed on a contact page, or on a special page with a secret URL or behind a special login.
The point is, the iframe may be put on any web page and on as many web pages as you wish.
Here is code for a simple iframe tag.
<iframe src="https://example.com/upload.php" style="width:200px; height:100px; overflow:auto; border:none;">
</iframe>
Replace https://example.com/upload.php with the URL to upload.php on your server. That is all you need, although you may style the iframe if you wish.
Done —
You now have a simple file upload system for your website.
The uploading script has one customization section and is installed once. The iframe that uses the uploading script may be placed on any or all of the domain's web pages.
(This article first appeared with an issue of the Possibilities newsletter.)
Will Bontrager
