Handling special char in file name

Dears,
I have a form, user can uploads max 5 files. hv action to rename the file to username_YYYYMMDDHis_1, 2,3.....
Finally will email all the files to client....
It works fine expect when user upload file with special char.....

Actually I wont use the same file name in my email or database, but if I upload files with invalid file name, it got problems and some files may be missing.

Case for example,
Files to be uploaded: abc.jpg, abc 123.jpg, abc%^*123.jpg
Final files in email will be: abc.jpg, abc 123.jpg, abc 123.jpg

I think I should add javascript @ onload, but can't find any source code which can work as what I expected.
(I need the file name without whitespaces, no special char and english char only)

The file field in my form for ref.:

<input name="file1" id="file1" class="form-control gcore-height-auto A" title="" style="" multiple="0" data-load-state="" data-tooltip="" type="file" />
<input name="file2" id="file2" class="form-control gcore-height-auto A" title="" style="" multiple="0" data-load-state="" data-tooltip="" type="file" />

Best regards,
Wing

Thanks Bob,
It works like magic... ^^

Just one more questions, if i try to use file with special char in its name for testing, it will block and say "Error: Message body empty"
Is there anyway i can update the error message? or add something to guide user to rename the file?

Some more info for ref....

Case:
Username: Client
file name: password.png , ab!c.jpg
Result: both files are uploaded with name client_20150728113153_password_1.png, client_20150728113153_abc_.jpg
email function dont work and display error msg: Mailer Error: Message body empty

From debugger:
It can get all the fields in Data Array, but in the email action... :
[10] => Array
(
[Email] => Array
(
[0] => An email with the details below could NOT be sent:

Solved!
Find that the message body empty is because of another plugin

Besides, find out one more problems...
For file name abc@#$%^123.jpg, and abc@123.jpg, both will result as abc123.jpg after the makeSafe action. Which the second file will cover the first one, the server will lose the first file by mistake....

Solution:
I add a random number to the filename to make it different...

<?php
foreach ( $_FILES as $k => $v ) {
  if ( $v['name'] == $file_name ) {
   $i = substr($k, 4, 1);
   continue;
  }
}
$user = \JFactory::getUser();
jimport('joomla.filesystem.file');
$ext = \JFile::getExt($file_name);
$name = \JFile::stripExt($file_name);
$name = \JFile::makeSafe($name);
$name = $name.rand();
$date = date('YmdHis');
return "{$user->username}_{$date}_{$name}_{$i}.{$ext}";
?>

Tested and it works😀

Hi Wing,

That's exactly why ChronoForms adds the date+time string to the names by default - to avoid files being over-written when two uploads have the same name. But if they might both be uploaded at the same time - then a random number is the way to go.

Bob