File Uploading and more AJAX

Part 1: Getting Started

First, let's examine the following web page:

form.php

You will implement this form and learn about how to upload files to a server.

Task 1: Understanding The Form

1. Use the Internet to download an image to your Desktop.

2. Use the form above to Upload the image you just downloaded.

3. Use the Insert button to add the <img> code to the Content Area.

4. Use the Delete button to remove the image.

This form implements two very useful functions for a content management system.

1. Image Upload: The form allows a user to upload a file (specifically an image) to the server.

2. Insert Image: The form allows a user to insert an image into the content area by inserting the image's <img> tag. When editing a page, the user can now add images without having to worry about where the image is located on the server.

Email me the answers to the questions in this lab.

Question 1

a. Based on the output of the form above, what is the name of the folder where the images are being uploaded to?

b. How are the names of the images determined?

Task 2: Understanding The JavaScript

1. Create a new folder called fileupload

2. Inside of your new folder, create a new file called form.php

3. View the source of my form.php and copy it to your form.php

4. Upload your form.php to the server

5. Note: Only the Insert button will work

6. Test you script by opening your brower and navigating to your form.php

7. Click in the content area and insert at least two images.

Question 2

Examine the javascript insert function in your code and answer the following questions

a. What parameter do we pass into the function?

b. What are we storing in the variable called text?

c. What is the purpose of this code?

   var txtarea = document.getElementById('content');

d. Describe what this code is doing?

   var strPos = txtarea.selectionStart;
   var before = (txtarea.value).substring(0,strPos); 
   var after = (txtarea.value).substring(strPos,txtarea.value.length); 
   txtarea.value= before + text + after;

Question 3

Examine the javascript remove function in your code and answer the following questions

a. What parameter do we pass into the function?

b. What are we storing in the variable called url?

c. What is the purpose of this code?

   xmlhttp.open("GET",url,true);
   xmlhttp.send();

d. Describe what this code is doing?

   element = document.getElementById(file);
   element.parentNode.removeChild(element);

Part 2: Upload

Consider the actual form in form.php:

Notice that the form posts multipart data to itself, i.e., form.php.

What does this mean?

Instead of just sending variables and values (via a POST), an entire file is also sent. The file is uploaded to a temp folder on the server. Apache will delete anything in the temp folder that is 24 hours old, so we have 24 hours to copy the file from the temp folder to a permanent location.

Task 3: Create a permanent location for your uploads

1. In fileupload, create another folder called uploads.

2. Upload this empty folder to the server

Task 4: Understanding $_FILES and move_uploaded_file

1. In your form.php, add the following code right after the <body> tag

// Get the form action
$action = $_POST['action'];

// Make sure the Upload button was actually clicked
if ($action ==  "Upload") {

   $filename = $_FILES['upfile']['name'];
   echo "<p>Name: ".$filename."<br />";
   

   $ext = pathinfo($filename, PATHINFO_EXTENSION);
   echo "Ext: ".$ext."<br />";
   

   $type = $_FILES['upfile']['type'];
   echo "Type: ".$type."<br />";
 
   $isImage =	($ext == "jpg" || $ext == "JPG") && $type == "image/jpeg" ||
   ($ext == "gif" || $ext == "GIF") && $type == "image/gif"  ||
   ($ext == "png" || $ext == "PNG") && $type == "image/png";
   

   $size = $_FILES['upfile']['size'];
   echo "Size: ".$size."<br />";
 
   $error = $_FILES['upfile']['error'];
   echo "Error: ".$error."<br />";
 
   $tempPath = $_FILES['upfile']['tmp_name'];
   echo "Temp Path: ".$tempPath."<br />";
   
   $thisPath = dirname(__FILE__);
   echo "This Path: ".$thisPath."<br />";
   
   $filePath =  $thisPath."/uploads/".$filename;
   echo "File Path: ".$filePath."</p>";

   if(!empty($_FILES['upfile'])) {

    if ($error == 0) {

      if ($size< 2100000) {

         if ($isImage) {

            if (move_uploaded_file($tempPath, $filePath)) {
               $message = "File has been uploaded as: ".$filename;
            } 
            else {
               $message = "Server error: Temp file cannot be moved.";
            } 
         } else {
            $message = "Only images (jpg, gif, and png) can be uploaded";
         }
      } else {
         $message = "Only files less than 2MB can be uploaded.";
      }
     } else { 
      $message = "File error";
     }
   } else {
   $message = "No file selected for uploading.";
   }
} else {
   $message = "Upload button was not clicked.";
}

echo '<p><b>'.$message.'</b></p>';

2. Save and upload your form.php

3. Upload a file and show your instructor that it works.

Question 4

a. For each of the ten variables above, write a one-sentence description of what the variable stores. Ask your instructor if you are truly unsure.

b. For each of the six if statements above, write a one-sentence description of what is being "checked" and then describe why it is important to make this "check."

Part 3: Delete

Task 4:

To get the delete function to work, you simply have to create the program that is called in the javascript remove function.

You should be able to tell the name of the program by the url variable that is used.

You should also be able to tell what url parameters are passed.

The php delete program simply has two line;

1. Fetch the name of the file from the url parameters. Hint: the GET method is used

2. Use the unlink function to remove the file. Hint: the file is in the uploads folder, so you must append "uploads/" to the filename.

Show your instructor that your delete function works.