How remove "No files selected" in CMultiFileUpload in Yii?

Question

Just starting to learn the Yii. I do not know how to change the button and remove the "No files selected" in the widget "CMultiFileUpload" in Yii framework?

$this->widget('CMultiFileUpload', array(
    'model'=>$model,
    'attribute'=>'photos',
    'accept'=>'jpg|jpeg|gif|png',
    'name'=>'photos',
    'remove'=>'remove',
    'options'=>array(
    ),
    'denied'=>'File is not allowed',
    'max'=>4, // max 10 files
));

Answer 1

This is browser dependent. Ex. Mozilla shows the input file type field with "No files selected". In IE it will come defferently.

If you want to hide the message "No files selected", do it with CSS

input[type='file'] 
{
    color: transparent;
}

If you want to customize more, Try this bellow code.

1. Add this CSS code in your CSS file

   #multFileUpload button#fileAlt
   {
       border: 3px solid #cccccc;
       background-color: #FF7B10 !important;
       color: #ffffff;
       font-size: 14px;
       padding: 10px 5px;        
       cursor: pointer;
       border-radius: 5px;
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
   }
   #multFileUpload input[type='file'] 
   {
       display: none;
   }    
   

2. Add this jQuery code in your javascript file

   $(document).ready(function()
   {
       var maxFiles = 4;
       var fileCountStart = 0;
       $("#fileAlt").on('click', function()
       {
           fileCountStart += 1;
           if (maxFiles >= fileCountStart)
           {
               $('#photos').trigger('click');
               if (fileCountStart == maxFiles)
                   $("#fileAlt").attr('disabled', 'disabled');
           }
       });
   });
   

3. Now Yii code

   <div id="multFileUpload">
       <button id="fileAlt">Select an Image</button>
       <?php            
       $this->widget('CMultiFileUpload', array(
           'model' => $model,
           'id'=>'photos',
           'attribute' => 'photos',
           'accept' => 'jpg|jpeg|gif|png',
           'name' => 'photos',
           'remove' => 'remove',
           'options' => array(
           ),
           'denied' => 'File is not allowed',
           'max' => 4, // max 10 files
       ));
       ?>
   </div>