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

$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 'Unknown extension!';
$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 'You have exceeded the size limit!';
$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 'Copy unsuccessfull!';
$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 "Thumbnail created Successfully!"; echo ''; } ?>

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.
2.
3.
4.
5.

[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.

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.