file upload

[kevin wood]

I am fixing an e-mailing system using php and mysql and have hit a stumbling block. i have recently had to take on someone elses work and have fixed most of the problems they had created. I need to upload images and then display them on the newsletters that will be sent out.

the forms for entering the text and images must not be reloaded when the image is uploaded as all the entered information is not carried across to the new page. the code i am having trouble with is the upload side the page continues to be reloaded and all information is lost.

is there anyone who has successfully got this to work who could point me in the right direction.
is Ext.Ajax.request the best way for this or XMLHTTPRequest?

[DangerDev]

you can get rid of this problem using ajax.
if you are using ExtJS in your application, use it for ajax, or you can write your own function to handle ajax.
basically in ajax you will send and receive data without refreshing the page. so your page will not reload.

[kevin wood]

i am not using the ExtJS application i have looked at using the Ext.Ajax.Request but i thought that it had to be used in conjunction with ExtJS application. Where can i find out how to write my own function to handle the ajax

[DangerDev]

hi
here you can find help !

[kevin wood]

thank you for the help. i have read through the tutorial and have come up with this

<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }
  xmlHttp.onreadystatechange=function()
    {
    if(xmlHttp.readyState==4)
      {
      document.myForm.time.value=xmlHttp.responseText;
      }
    }
  xmlHttp.open("GET","response",true);
  xmlHttp.send(null);
  }
</script>
<form name="newad" method="post" enctype="multipart/form-data"  action="">
<input type="file"

<input type="file" name="image" ><input type="button" VALUE="Upload Image" onClick="ajaxFunction()”>
</form>

i have changed some of the lines to fit in with how i want it to work. i changed this line

xmlHttp.open("GET","response",true);

from

xmlHttp.open("GET","time.asp",true);

the reason being that the i do not need the time to be displayed and i am uploading files to the server. as i am uploading images is it possible to add some code to make sure that the file is an image with the correct file extension and resize the image to the correct dimensions.

I already have the code for this but it is done in php. the code i have got takes the file checks to see if it is an image then resizes the file and gives it a new name for it to be recalled on another page. the it looks like this but i dont think it will be of any use

 //define a maxim size for the uploaded images
 define ("MAX_SIZE","100"); 
 // define the width and height for the thumbnail
 // note that theese dimmensions are considered the maximum dimmension and are not fixed, 
 // because we have to keep the image ratio intact or it will be deformed
 define ("WIDTH","200"); 
 define ("HEIGHT","200"); 

  // this is the function that will create the thumbnail image from the uploaded image
 // the resize will be done considering the width and height defined, but without deforming the image
 function make_thumb($img_name,$filename,$new_w,$new_h)
 {
    //get image extension.
    $ext=getExtension($img_name);
    //creates the new image using the appropriate function from gd library
    if(!strcmp("jpg",$ext) || !strcmp("jpeg",$ext))
        $src_img=imagecreatefromjpeg($img_name);

    if(!strcmp("png",$ext))
        $src_img=imagecreatefrompng($img_name);

    if(!strcmp("gif",$ext))
        $src_img=imagecreatefromgif($img_name);

        //gets the dimmensions of the image
    $old_x=imageSX($src_img);
    $old_y=imageSY($src_img);

     // next we will calculate the new dimmensions for the thumbnail image
    // the next steps will be taken: 
    //  1. calculate the ratio by dividing the old dimmensions with the new ones
    //  2. if the ratio for the width is higher, the width will remain the one define in WIDTH variable
    //      and the height will be calculated so the image ratio will not change
    //  3. otherwise we will use the height ratio for the image
    // as a result, only one of the dimmensions will be from the fixed ones
    $ratio1=$old_x/$new_w;
    $ratio2=$old_y/$new_h;
    if($ratio1>$ratio2) {
        $thumb_w=$new_w;
        $thumb_h=$old_y/$ratio1;
    }
    else    {
        $thumb_h=$new_h;
        $thumb_w=$old_x/$ratio2;
    }

    // we create a new image with the new dimmensions
    $dst_img=ImageCreateTrueColor($thumb_w,$thumb_h);

    // resize the big image to the new created one
    imagecopyresampled($dst_img,$src_img,0,0,0,0,$thumb_w,$thumb_h,$old_x,$old_y); 

    // output the created image to the file. Now we will have the thumbnail into the file named by $filename
    if(!strcmp("png",$ext))
        imagepng($dst_img,$filename); 
    else
        imagejpeg($dst_img,$filename);

    if (!strcmp("gif",$ext))
        imagegif($dst_img,$filename); 

    //destroys source and destination images. 
    imagedestroy($dst_img); 
    imagedestroy($src_img); 
 }

 // This function reads the extension of the file. 
 // It is used to determine if the file is an image by checking the extension. 
 function getExtension($str) {
         $i = strrpos($str,".");
         if (!$i) { return ""; }
         $l = strlen($str) - $i;
         $ext = substr($str,$i+1,$l);
         return $ext;
 }
  // This variable is used as a flag. The value is initialized with 0 (meaning no error found) 
 //and it will be changed to 1 if an error occures. If the error occures the file will not be uploaded.
 $errors=0;
 // checks if the form has been submitted
 if(isset($_POST['Submit']))
 {
 //reads the name of the file the user submitted for uploading
    $image=$_FILES['image']['name'];
    // if it is not empty
    if ($image) 
    {
        // get the original name of the file from the clients machine
        $filename = stripslashes($_FILES['image']['name']);

        // get the extension of the file in a lower case format
        $extension = getExtension($filename);
        $extension = strtolower($extension);
        // if it is not a known extension, we will suppose it is an error, print an error message 
        //and will not upload the file, otherwise we continue
        if (($extension != "jpg")  && ($extension != "jpeg") && ($extension != "png") && ($extension != "gif")) 
        {
            echo '<h1>Unknown extension!</h1>';
            $errors=1;
        }
        else
        {
            // get the size of the image in bytes
            // $_FILES[\'image\'][\'tmp_name\'] is the temporary filename of the file in which 
            //the uploaded file was stored on the server
            $size=getimagesize($_FILES['image']['tmp_name']);
            $sizekb=filesize($_FILES['image']['tmp_name']);

            //compare the size with the maxim size we defined and print error if bigger
            if ($sizekb > MAX_SIZE*1024)
            {
                echo '<h1>You have exceeded the size limit!</h1>';
                $errors=1;
            }

            //we will give an unique name, for example the time in unix time format
            $image_name='image1'.'.'.$extension;
            //the new name will be containing the full path where will be stored (images folder)
            $newname="image/".$image_name;
            $copied = copy($_FILES['image']['tmp_name'], $newname);
            //we verify if the image has been uploaded, and print error instead
            if (!$copied) 
            {
                echo '<h1>Copy unsuccessfull!</h1>';
                $errors=1;
            }
            else
            {
                // the new thumbnail image will be placed in images/thumbs/ folder
                $thumb_name='image/thumbs/thumb_'.$image_name;
                // call the function that will create the thumbnail. The function will get as parameters 
                //the image name, the thumbnail name and the width and height desired for the thumbnail
                $thumb=make_thumb($newname,$thumb_name,WIDTH,HEIGHT);
            }}  }}

  //If no errors registred, print the success message and show the thumbnail image created
 if(isset($_POST['Submit']) && !$errors) 
 {
    echo "<h1>Thumbnail created Successfully!</h1>";
    echo '<img src="'.$thumb_name.'">';
 } 

?>

this code worked fine but the page was being reloaded every time the user clicked on submit thus loosing all other information entered on the page. Sorry for all the code.

[DangerDev]

hi
you try here, may be it will help you to solve your problem.

[kevin wood]

so should i not use the ext.ajax.request and use an iframe instead?

I have now gone down this route but have kept all my other code in case it is needed. my submit button now looks like this

with the upload.php being exicuted in the hidden iframe. i will test this and let you no how i get on thanks for the help.

[DangerDev]

as that discussion suggested now no need of using ajax, simple use your previous method just use invisible iframe.
actually i forgot previously that you have to send file not data. so ajax will not work effectively.
any way as discussion suggested use target="hidden_form" attribute where hidden_form is name of iframe, any way you can look in to discussion again.

[kevin wood]

i have now started t use the iframe method you pointed me in the direction of. i have set this up but the page is reloading. could this be fixed by using the javascript onClick to submit the form to the iframe file.

[DangerDev]

can you post your code here ?
are you trying like following ?

<form name="form1" action="url_here" method="post" target="hidden_form">
        <input type="text" />
        <input type="submit" value="submit" />
     </form>
    <iframe name="hidden_form" height="0" width="0"></iframe>

[kevin wood]

here is the code i am using

1. <form name="uploader" method="POST" target="hidden_form" enctype="multipart/form-data">
2. <input type="hidden" name="MAX_FILE_SIZE" value="1000000">
3. <input type="file" name="upload_file">
4. <input name="submit" type="submit" value="Upload">
</form>
5. <iframe name="hidden_form" src="upload.php" height="0" width="0"></iframe>

[DangerDev]

try to use code what i have posted just above your post,
i think you need to give action on form, remove src from iframe.

[kevin wood]

the src for the iframe is the php page that resizes and renames the uploaded images. all uploaded images need to be passed through this page so they have the correct dimensions for the next section of the site.

i have changed the code so i now have an action="upload.php" and left the src as " ".

i will upload the files to the server.

[kevin wood]

the page still reloaded on me. does the action="upload.php" sent the from to the upload page or does the iframe stop this from happening.

[kevin wood]

i have solved this problem with thanks to the pointers from dangerdev. to fix the problem i took the form off the page where the user was being asked to upload the image and put it on to the upload.php page.

i then just created an iframe with dimensions added to it and said set the src to upload.php. as the submit button was on this page and was activated within the iframe it stops the page the user is on being reloaded thus stopping the entered information being lost. the code i used for the iframe is here.

<iframe name="uploadframe" src="upload.php" width="400" height="150" frameborder="0"></iframe>

this now just looks like it is part of the page it is on and the user would be none the wiser iframes are being used.