How to upload a file using a form

VodaHost · #1 05-13-2006, 04:10 PM

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:

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.

The working plan of our procedure is like in the following image:

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:

Quote:

<?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");

?>

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

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:

In the Advanced Button properties window that will appear, select the following (as in the image)

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

Publish these pages in your public_html folder.

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.

davidundalicia · #2 05-13-2006, 04:14 PM

I can see that your not a L.G. for nothing

Thats a great tip, and will try it out soon.

Thanks *****..

Girlonthehill · #3 05-13-2006, 04:34 PM

Nice one, Mon General!!

rafie · #4 07-10-2006, 11:23 PM

wow thanks! your the man, thanks for the tip it will definetly help out.

Raf..

scousepete79 · #5 08-01-2006, 02:11 PM

Now that Navaldesign has sorted out my form problem, I have another question. Is there any way that when someone uploads a file an automated e-mail is sent to them confirming that the file has been received? Almost like a receipt?

Thanks again Navaldesign!

navaldesign · #6 08-01-2006, 07:18 PM

Yes, transform the above script as follows:

<?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);

// Autoresponder
$mailto = $email;
$mailsubj = "Copy of the info you Sumbitted";
$mailhead = "From: your domain name or whatever you want\n";
mail($mailto, $mailsubj, $mailbody, $mailhead);

header("Location: thankyou_page.html");

?>

As usual, replace the part in blue with your own Subject and "From....."

jbyrd241 · #7 08-04-2006, 11:41 PM

i have looked at this and done what it saids to do but i still can not get it to work i made the form but i dont get what is next can anyone help me make this page.i dont understand php

navaldesign · #8 08-05-2006, 09:07 AM

Quote:

Originally Posted by jbyrd241

i have looked at this and done what it saids to do but i still can not get it to work i made the form but i dont get what is next can anyone help me make this page.i dont understand php

If you have built the form correctly, and you have published it, the next step is to build the "error" and "thankyou_page". Save them and publish them. Last, copy the above code in Notepad. Change the part in blue as per instructions. Save it as "uploadaction.php" on your computer. Use BlueFTP to upload it on your site.

SteveA · #9 08-05-2006, 12:21 PM

*****,

yet another great resource for us to use.

thanks
Stevea

dawnbreaker · #10 08-21-2006, 12:44 PM

Yet another great Tutorial. This Forum has got to be 'THE FOUNT OF ALL KNOWLEDGE'!

My thanks to you all!

Brian

dudleydoo · #11 08-24-2006, 03:08 PM

Can you spell out the upload to the public_html from notepad part in fine detail for a complete and total nubeee? Please and Thankyou!

navaldesign · #12 08-24-2006, 03:19 PM

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”

I suggest that you save it inside your BlueVoda folder.

Sorry, but don't know how to make it simpler. Editing apart, the procedure is only 3 clicks.

As for the uploading part, open BlueVoda. Click on Tools, FTP Manager.

BlueFTP will appear, and your screen has your computer BlueVoda folder content in the left part.

Click on connect. If necessary, type in your IP, username and password, and click "connect". Now, the site content will appear in the right part of the screen.

Go to the left side, find the "uploadaction.php" file, and simply Drag and Drop it to the right part of the screen.
You are done!

dudleydoo · #13 08-25-2006, 02:28 AM

Thanks Navaldesign! I got it figured out.

Edwin · #14 09-01-2006, 11:57 AM

Hi Lt. General,

Please let me know what do you need to help me out on how to fix this script. I have my web page already complete but not able to launch because the image upload.

Thank you,
Edwin
cardone@coqui.net

5thmsstech · #15 09-03-2006, 05:10 PM

lol ty bud named folder upload instead of uploads. it works great now

davidundalicia · #16 09-04-2006, 01:41 AM

I also would like to see a mod to upload multiple files.............