CODEWITHSUNDEEP
jqueryajaxfile-uploadyii2kartik-v
Valik Tralik
Valik Tralik

Reputation: 79

Yii2 : kartik-v/fileinput trigger upload on selection

I use YII2 + /kartik-v/bootstrap-fileinput plugin. I need to upload file when user just drop it into upload input. Make it by ajax request. When I set "showUpload" option to false, and set "uploadUrl" with ajax action, no request to server happens on change file event. 

<?= $form->field($model, 'logotype')->widget(FileInput::class, [
    'options'       => [ 'accept' => 'image/*' ],
    'pluginOptions' => [
    'showCaption' => false,
    'showRemove'  => false,
    'showUpload'  => false,
    'browseClass' => 'btn btn-primary btn-block',
    'browseIcon'  => '<i class="glyphicon glyphicon-camera"></i> ',
    'uploadUrl'=> '/module/controller/action'
],
]); ?>

I expect the form to create ajax POST on the server with my file in data when user select image and without press "upload" button additionally. Is it possible to make it using this plugin? Or I should write a custom handler onchange event? Maybe there is some kind of callback in plugin options.

Upvotes: 2

Views: 2799

Answers (2)

Prahlad
Prahlad

Reputation: 796

For me "filebatchselected" event works.

Originally https://plugins.krajee.com/file-input-ajax-demo/6

$("#projectplan-plan_file").on('filebatchselected', function(event) {
    $(this).fileinput('upload');
});

Upvotes: 1

Muhammad Omer Aslam
Muhammad Omer Aslam

Reputation: 23738

You can use the change event to trigger the upload manually when the file is selected and to trigger the ajax upload you should call the upload method.

See the below code

$('#input-id').on('change', function(event) {
    $(this).fileinput('upload');
});

Hope it helps

Upvotes: 2

Related Questions