Passing file name through AJAX query to the class

See all posts Reply

Passing file name through AJAX query to the class new!
# Reply
by Jukka, 6 years, 6 months ago
Just needed some advice on passing the filename to the class using AJAX query. I got it working but cannot get the correct filenaem being used.

I have created HTML code for the image file.
<input type="file" id="file" name="file" />
<input type="button" class="button" value="Upload" id="but_upload">

Whent the upload button is pressed, the jQuery calls AJAX to pass the form data to the php-page for processing.

var fd = new FormData();
var files = $('#file')[0].files[0];
fd.append('file',files);

$.ajax({
	url: 'ajax_upload_image.php',
	type: 'post',
	data: fd,
	contentType: false,
	processData: false,
	success: function(response){
		   $("#ajax_result").html(response);

	},
});

The AJAX passes the file information to the PHP.

However the class.upload.php does not seem to be able to have the reference to the tmp file created when pressing the HTML upload button.

I can get the upload to work using the below lines:-
$filename = $_FILES['file']['name'];
echo "FILENAME : ".  $filename;	
$filename = $_FILES['file']['tmp_name'];
$handle = new Upload($filename);

The $_FILES['file']['name'] has the correct image filename. But if I pass this via $handle = new Upload($filename);, the class complains that the image file is not found.

If I then use the $filename = $_FILES['file']['tmp_name'];, the class find the image file and uploads it correctly, but the filename become the tmp-file name e.g. php3851.jpg instead of the original filename.

Is there a workaround for this? I did not seem to find any AJAX related queries.Reply
Re: Passing file name through AJAX query to the class new!
# Reply
by colin, 6 years, 6 months ago
Check out the documentation for XMLHttpRequest uploads, it should do the trick.Reply
Re: Passing file name through AJAX query to the class new!
# Reply
by Jukka Hurtta, 6 years, 6 months ago
On my Ajax query the line

$filename = $_FILES['file']['name'];
echo "FILENAME : ". $filename;

Actually returns the correct filename.

So instead of tryin XMLHttpRequest (that I have not managed to get working), could I just use command like:

$handle->file_dst_name_body = 'test';

Which the upload class seems to ignore.Reply
Re: Passing file name through AJAX query to the class new!
# Reply
by colin, 6 years, 6 months ago
Please read the documentation. What you are looking for is probably file_new_name_bodyReply
Re: Passing file name through AJAX query to the class new!
# Reply
by Jukka Hurtta, 6 years, 6 months ago
Thank you - it works. Just as reference to other users, the core content of my ajax_upload_image.php is as follows. This responds to the AJAX query from the above code. The AJAX code passes the tmp-file name that the Upload class uses to upload the image, and the actual file name.

I'm then using PHP to format the image file name (remove .extension). And then $handle->file_new_name_body = $orig_file; command to set the file name for the saved image.

As Colin said there is probably XMLhttpRequest method to pass the information automatically but I could not get it working. But the AJAX way works now.

// Destination directory for images
$dir_dest = '../product/images/';

$orig_file = $_FILES['file']['name'];
$file_array= explode(".", $orig_file);
$orig_file = $file_array[0];

$filename = $_FILES['file']['tmp_name'];
$dir_pics = (isset($_GET['pics']) ? $_GET['pics'] : $dir_dest);

// ---------- IMAGE UPLOAD ----------

// we create an instance of the class, giving as argument the PHP object
// corresponding to the file field from the form
// All the uploads are accessible from the PHP object $_FILES
$handle = new Upload($filename);
$return_arr = array();

// then we check if the file has been uploaded properly
// in its *temporary* location in the server (often, it is /tmp)
if ($handle->uploaded) {

    // yes, the file is on the server
    // below are some example settings which can be used if the uploaded file is an image.
    $handle->image_convert         = 'jpg';
    $handle->image_resize            = true;
    $handle->image_ratio_fill      	 = true;
    $handle->image_x                 = 64;
    $handle->image_y                 = 64;
    $handle->file_new_name_body      = $orig_file;

    // now, we start the upload 'process'. That is, to copy the uploaded file
    // from its temporary location to the wanted location
    // It could be something like $handle->Process('/home/www/my_uploads/');
    $handle->Process($dir_dest);

    // we check if everything went OK
    if ($handle->processed) {
        // everything was fine !
        echo 'File uploaded with success and formatted to 64x64 pixels (Small Image)';
        echo '<img src="'.$dir_pics.'/' . $handle->file_dst_name . '" />';
        $info = getimagesize($handle->file_dst_pathname);
        echo '  File: <a href="'.$dir_pics.'/' . $handle->file_dst_name . '">' . $handle->file_dst_name . '
';
        echo '   (' . $info['mime'] . ' - ' . $info[0] . ' x ' . $info[1] .' -  ' . round(filesize($handle->file_dst_pathname)/256)/4 . 'KB)';
    } else {
        // one error occured
        echo 'File not uploaded to the wanted location';
        echo 'Error: ' . $handle->error;
    }

// we delete the temporary files
    $handle-> Clean();

} else {
    // if we're here, the upload file failed for some reasons
    // i.e. the server didn't receive the file
    echo 'File not uploaded on the server';
    echo 'Error: ' . $handle->error;
}

if (isset($handle)) {
  echo($handle->log);
}
Reply