Trying to upload files with PHP and Prototype AJAX

EyeDentify · 05-22-2008, 06:03 PM

Hello there.

I have a problem i don´t seem to understand why it wont work out the way i intend it to.

The only thing i can think of is that the headers or the upload data don´t get transfered correctly.

I will show you 3 files that involves the problem:

First my javascript that uses the Prototype Framwork.

Code:

function AjaxUpload(MyUrl, MyDiv, TargetDiv)
{
var TargetDiv;
var MyDiv;
var MyUrl;

	new Ajax.Request(MyUrl, {
		method: 'post',
		contentType: 'multipart/form-data',
		encoding: 'UTF-8',
		parameters: $(TargetDiv).serialize(true),
			onCreate: function(transport)
			{ 
				var MyStatusText = $('MyStatusDiv');
				MyStatusText.addClassName('standardBox');
				new Ajax.Updater(MyStatusText, 'ajax_loader.php');
			},
				onSuccess: function(transport)
				{ 
					// var MyResponseText = $(MyDiv);
					// dölj div före utfällning och lägg på class
					// $('ajax_container').hide();
					$(MyDiv).addClassName('standardBox');
					// skicka in data i div
					$(MyDiv).update(transport.responseText);
					// fäll ut div, pulsera och visa data
					// Effect.toggle('ajax_container', 'blind');
					$(MyDiv).show();
					Effect.Pulsate(MyDiv);
				},
			onComplete: function(transport)
			{ 
				var MyStatusText = $('MyStatusDiv');
				MyStatusText.update('');
				MyStatusText.removeClassName('standardBox');
			}
	});

}

And the upload form:

PHP Code:


			
<form id="ajaxUploadForm" action="#" method="post">

    

    <!-- MAX_FILE_SIZE must precede the file input field -->

    <input type="hidden" name="MAX_FILE_SIZE" value="<?PHP echo(1024*1024*100); ?>" />

    

        Fil att ladda upp:<br />

        <input name="userfile" type="file" size="30" maxlength="" />

        <br /><br />

    

    <input type="hidden" name="token" value="test_<?PHP echo(md5(microtime())); ?>" />

    

    <input type="submit" name="SUBMIT" value="Ladda upp"  onclick="AjaxUpload('ajax_upload.php', 'ajax_container', 'ajaxUploadForm'); return false"/>

    </form>

And the php code that should provide the logic for upload.
This file is called by the JavaScript function mentioned.

PHP Code:


			
<?PHP

    /* Debug styff */

    print_r($_FILES);

    echo('<br /><br />');

    echo('Debug token: ' . $_POST['token']);

    echo('<br /><br />');

    /* Debug styff */

    

    $error = $_FILES["userfile"]["error"];    



    // where to upload

    $uploaddir = '/home/virtual/myhost/public_html/uploads/';



    // make a random file prefix

    $file_prefix = 'id_' . substr(md5(microtime() . mt_rand(1, 1000000)), 0, 16) . '_';

    $uploadfile = $uploaddir . basename($file_prefix . $_FILES['userfile']['name']);

    $upload_file_name = basename($file_prefix . $_FILES['userfile']['name']);



    // Do the upload

    if(move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile))

    {

    

    /* Is the Mime type valid ? */

            $file_content_type = $_FILES['userfile']['type'];

            $permited_mimes[] = 'image/jpeg';

            $permited_mimes[] = 'image/gif';

            $permited_mimes[] = 'image/png';

    

            if(in_array($file_content_type, $permited_mimes)){

            } else {

                unlink('uploads/' . $upload_file_name);

                $upload_file_name = '';

                echo('filetype type not valid!');

                exit;

            }

    

    

    } else {

        echo('An Upload error accured!');

        exit;

    }



    echo('File:' . $upload_file_name . ' Has been uploaded.<br />');



    echo('Error code: ' . $error);

?>

I guess the problem is in the $_FILES array not reaching the upload logic code.

Do you gurus have any tips ? :$

If there is odd words somewhere, it´s because im swedish ;)

Thx in advance.

/Eye