Tweet
How to upload a file using a form
The following tutorial will show you how to accomplish file uploads. However, since September 2006, the new Advanced BlueVoda Form Processor will do the same and much more. So please have a look at that also. And, since Jan 2007, ABVFP will also attach the files to the email that you receive with th erest of the form info.
Please also note that since summer 2008 BlueVoda's embedded Form processor, also has the ability to upload files to the server, and it will include the link to download the files, in the mail that you receive with the rest of the form info.
This tutorial is going to show you how to upload a file on your site using a form made in BlueVoda and a php script.
We assume that you are familiar with the basics about creating a form in BlueVoda, as well as with the basic php script provided there. If you are not, please read first the BlueVoda Form Tutorial 1
The below is an example of PHP script you may use for processing your forms data and uploading single files.. Please follow the instructions that follow to the letter. Please note that this is only an example script, that can be customized to better suit your needs.
Let’s start by explaining what we will do:
Let’s start by creating a form. It will have some contact information, as well as an upload field.
It will look like the following image:
Please note that, in order to have the form work with the script as it is, the email field MUST be called “email” and the upload field MUST be called “upload”. It is also advisable that you name your Submit button "submit", all lowercase letters, as we have implemented three lines of code that will take care NOT TO INCLUDE the Submit button title and value, but this code will only work if the button is named "submit".
Set the form properties in:
Form name: Uploadform
Action: uploadaction.php
Method: POST
Encoding Type: multipart/formdata
As shown in the following image:
Now, let’s create the php script that will do the work.
Please copy the following code:
Please note that there are four parts in blue in the above code.
Open Notepad. Paste the above code. Now, change the above four parts in Blue with your actual values:
1000000 is the limit file size, in bytes ( 1 Mb = 1000000 bytes). You can set it to be whatever you want.
http://www.yourdomain.com/uploads is yourdomain name and folder (uploads) where the file will be uploaded. Please do not change the "uploads" part, as you would also need to modify the script.
Enter Your Subject Here : this is the email subject, change it to whatever you want.
Values submitted from web site form : : is the first line of your email. Change it to whatever you like.
Once you are done with the changes, click on File, Save As, select File Type : All files, and save the script on your computer as “uploadaction.php”
Now lets create the Thankyou page. It will be a simple BV page, and will look like the following:
Make sure to put your menubar in this page, so the visitors can go on navigating your site.
Ok, we now need the error page: We will also create it in BV, and it will look as follows:
Make sure to
Name: optional, “Back”
Value: optional, “Back”
Button Type: “On Click”
OnClick Action: “Go to the previous Page”
just like in the image below:
If you wish you can also change the button style, but this goes beyond this tutorial purposes.
So, now you have the following BV pages:
Open BlueFTP, connect, and UPLOAD the “uploadaction.php” file that you created in Notepad, in public_html also.
There is ONE LAST STEP: you need to create the “uploads” folder, for the files to be uploaded. So while you are in BlueFTP, click anywhere on the right window (the one with your site content). Now click on File, New Folder, and create this new folder named “uploads”. If you name it anything else, you will need to change the script accordingly. Now right click your new created folder, and set the permissions to 777.
Congratulations! You are done. Test your form.
Troobleshooting:
If the filename has blank spaces, the URL of the file that you will receive in your email, will be broken. In that case, clicking on the link will not work. You need to either download the file from your site using BlueFTP, or, if you want to see the file in your browser, you will need to copy the entire link in your browser’s address bar.
Please also note that since summer 2008 BlueVoda's embedded Form processor, also has the ability to upload files to the server, and it will include the link to download the files, in the mail that you receive with the rest of the form info.
This tutorial is going to show you how to upload a file on your site using a form made in BlueVoda and a php script.
We assume that you are familiar with the basics about creating a form in BlueVoda, as well as with the basic php script provided there. If you are not, please read first the BlueVoda Form Tutorial 1
The below is an example of PHP script you may use for processing your forms data and uploading single files.. Please follow the instructions that follow to the letter. Please note that this is only an example script, that can be customized to better suit your needs.
Let’s start by explaining what we will do:
- We will create a form in BlueVoda.
- We will create a php script to process our form. Since we usually want a size limit for the files to be uploaded, this script will also check the file size, and if bigger than what we have set as maximum, will redirect the visitor to an error page. When informed about the error, he can use a “Back to form” button, to return to the form.
- The script will also send an email to our email address, to inform us that a new file has been uploaded, and will provide us the link to this file.
- We will create a “Thankyou Page, to inform our visitor that his file has been uploaded.
- We will also create the necessary folder, where uploaded files will reside.
Let’s start by creating a form. It will have some contact information, as well as an upload field.
It will look like the following image:
Please note that, in order to have the form work with the script as it is, the email field MUST be called “email” and the upload field MUST be called “upload”. It is also advisable that you name your Submit button "submit", all lowercase letters, as we have implemented three lines of code that will take care NOT TO INCLUDE the Submit button title and value, but this code will only work if the button is named "submit".
Set the form properties in:
Form name: Uploadform
Action: uploadaction.php
Method: POST
Encoding Type: multipart/formdata
As shown in the following image:
Now, let’s create the php script that will do the work.
Please copy the following code:
<?php
// Receiving variables
@$email = addslashes($_POST['email']);
@$upload_Name = $_FILES['upload']['name'];
@$upload_Size = $_FILES['upload']['size'];
@$upload_Temp = $_FILES['upload']['tmp_name'];
// Validation for max file size
if ($upload_Size>0)
{
if( $upload_Size >1000000)
{
//delete file
unlink($upload_Temp);
header("Location: error.html");
exit;
}
$uploadFile = "uploads/".$upload_Name ;
@move_uploaded_file( $upload_Temp , $uploadFile);
chmod($uploadFile, 0644);
$upload_URL = "http://www.yourdomain.com/uploads/".$upload_Name ;
}
//Sending Email to form owner
$mailto = "youremail@yourdomain.com";
$mailsubj = "Enter Your Subject Here";
$mailhead = "From: $email\n";
reset ($HTTP_POST_VARS);
$mailbody = "Values submitted from web site form :\n";
while (list ($key, $val) = each ($HTTP_POST_VARS))
{
if ($key!="submit")
{
$mailbody .= "$key : $val\n";
}
}
$mailbody .= "upload: $upload_URL\n";
mail($mailto, $mailsubj, $mailbody, $mailhead);
header("Location: thankyou_page.html");
?>
// Receiving variables
@$email = addslashes($_POST['email']);
@$upload_Name = $_FILES['upload']['name'];
@$upload_Size = $_FILES['upload']['size'];
@$upload_Temp = $_FILES['upload']['tmp_name'];
// Validation for max file size
if ($upload_Size>0)
{
if( $upload_Size >1000000)
{
//delete file
unlink($upload_Temp);
header("Location: error.html");
exit;
}
$uploadFile = "uploads/".$upload_Name ;
@move_uploaded_file( $upload_Temp , $uploadFile);
chmod($uploadFile, 0644);
$upload_URL = "http://www.yourdomain.com/uploads/".$upload_Name ;
}
//Sending Email to form owner
$mailto = "youremail@yourdomain.com";
$mailsubj = "Enter Your Subject Here";
$mailhead = "From: $email\n";
reset ($HTTP_POST_VARS);
$mailbody = "Values submitted from web site form :\n";
while (list ($key, $val) = each ($HTTP_POST_VARS))
{
if ($key!="submit")
{
$mailbody .= "$key : $val\n";
}
}
$mailbody .= "upload: $upload_URL\n";
mail($mailto, $mailsubj, $mailbody, $mailhead);
header("Location: thankyou_page.html");
?>
Open Notepad. Paste the above code. Now, change the above four parts in Blue with your actual values:
1000000 is the limit file size, in bytes ( 1 Mb = 1000000 bytes). You can set it to be whatever you want.
http://www.yourdomain.com/uploads is yourdomain name and folder (uploads) where the file will be uploaded. Please do not change the "uploads" part, as you would also need to modify the script.
Enter Your Subject Here : this is the email subject, change it to whatever you want.
Values submitted from web site form : : is the first line of your email. Change it to whatever you like.
Once you are done with the changes, click on File, Save As, select File Type : All files, and save the script on your computer as “uploadaction.php”
Now lets create the Thankyou page. It will be a simple BV page, and will look like the following:
Make sure to put your menubar in this page, so the visitors can go on navigating your site.
Ok, we now need the error page: We will also create it in BV, and it will look as follows:
Make sure to
- Include your menubar: so, if the visitor CANNOT reduce his file size under the allowed limit, he will at least be able to continue navigating your dite.
- Add a “Back to form” button. This one is easy. Select from the form toolbar, in BV, “Advanced”, double click the text to make it “Back to form”, then right click it and select Properties, just like in the image below:
Name: optional, “Back”
Value: optional, “Back”
Button Type: “On Click”
OnClick Action: “Go to the previous Page”
just like in the image below:
If you wish you can also change the button style, but this goes beyond this tutorial purposes.
So, now you have the following BV pages:
- uploadform
- thankyou_page
- error
Open BlueFTP, connect, and UPLOAD the “uploadaction.php” file that you created in Notepad, in public_html also.
There is ONE LAST STEP: you need to create the “uploads” folder, for the files to be uploaded. So while you are in BlueFTP, click anywhere on the right window (the one with your site content). Now click on File, New Folder, and create this new folder named “uploads”. If you name it anything else, you will need to change the script accordingly. Now right click your new created folder, and set the permissions to 777.
Congratulations! You are done. Test your form.
Troobleshooting:
If the filename has blank spaces, the URL of the file that you will receive in your email, will be broken. In that case, clicking on the link will not work. You need to either download the file from your site using BlueFTP, or, if you want to see the file in your browser, you will need to copy the entire link in your browser’s address bar.
Comment