option - accept => 'image/*' does not work as expected

[bologer]

Have problem with

<?= FileUpload::widget([
    'model' => $uploadModel,
    'attribute' => 'image',
    'url' => ['document/upload'],
    'options' => [
            'accept' => 'image/*'
    ],
    'clientOptions' => [
        'maxFileSize' => 2000000
    ],
...

'accept' => 'image/*' should disallow to upload anything that does not match image/* pattern. Everything seems to be clear, however I am able to upload any type of files (e.g. .zip, .rar, any scrpts).

What could be the cause of this issue?

[tonydspaniard]

Please, try with: https://github.com/blueimp/jQuery-File-Upload/wiki/Options#processqueue

Edit:

Documentation is wrong, on the client level we need to configure: https://github.com/blueimp/jQuery-File-Upload/wiki/Options#acceptfiletypes

[bologer]

@tonydspaniard, alright, I tried this: acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i as can be seen below:

<?= FileUpload::widget([
    'model' => $uploadModel,
    'attribute' => 'image',
    'url' => ['document/upload'],
   // 'options' => [
   //         'accept' => 'image/*'
   // ],
    'clientOptions' => [
        'acceptFileTypes' => '/(\.|\/)(gif|jpe?g|png)$/i',
        'maxFileSize' => 2000000
    ],
...

However, it did not really help me. I am still able to upload zip archives, etc

I looked at this one - https://github.com/blueimp/jQuery-File-Upload/wiki/Options#processqueue, however no result as well.

Could you please give minimum example of validation?

[bologer]

@tonydspaniard any suggestions?

[tonydspaniard]

Sample rules:

public function rules()
    {
        return [
            [['image'], 'file', 'skipOnEmpty' => false, 'extensions' => 'png, jpg, jpeg,gif'],
        ];
    }

[tonydspaniard]

@bologer do you mind pasting the result HTML, the browser you use and check if your console has any javascript errors?

[bologer]

@tonydspaniard, hey.

Alright, when I use:

'options' => [
    'accept' => 'image/*'
]

I get no errors and any file type is uploaded.

The same story with

'clientOptions' => [
    'acceptFileTypes' => '/(\.|\/)(gif|jpe?g|png)$/i',
    'maxFileSize' => 2000000
],

No errors or anything, files are just being uploaded.

And I noticed that when I try to upload the file that is havier then maxFileSize it reply with 500 (Internal Server Error) on the upload action mentioned in url.

[bologer]

@tonydspaniard furthermore, when I implemented this in my model, I always receive this error:

array (size=1)
  'image' => 
    array (size=1)
      0 => string 'Please upload a file.' (length=21)

Even though I know for sure that I set image variable when I upload the file.

This is part of action document/upload where I set image variable:

$model = new UploadedFiles();

$model->scenario = UploadedFiles::SCENARIO_UPLOAD;

$imageFile = UploadedFile::getInstance($model, 'image');

And also, this error does not diplay on the client side, it just fails to save() and validate().

I have UploadedFiles model that contains the following rules:

...
return [
            ['image', 'safe'],

            [['image'], 'file', 'skipOnEmpty' => false, 'extensions' => 'png, jpg, jpeg, gif'],
...
        ];
...

[tonydspaniard]

Strange... if you use the FileUpladAction to your controller should return the validation errors: https://github.com/2amigos/yii2-file-upload-widget/blob/master/src/actions/FileUploadAction.php#L152

[tonydspaniard]

please check this comment: https://github.com/2amigos/yii2-file-upload-widget/issues/116#issuecomment-325190725

[bologer]

@tonydspaniard I'm sorry, but how do you run this action that you provided? It seems that it is internal of the plugin. Do I need to override it? Could you please show some minimum example of how to use it?