jQuery-File-Upload do not load file name to input and can not trigger by another button -

jQuery-File-Upload do not load file name to input and can not trigger by another button -

plugin:https://blueimp.github.io/jquery-file-upload/

i don't want plugin autoupload after select file. follow how-to-start-uploads-with-a-button-click, not work. and doesn't show file name after select file.

<input id="fileupload" class="fileupload" type="file" name="import_file" data-url="{% url 'staff_member_address_import' %}" /> <button type="submit" class="import_btn btn blue">import </button>

js:

var uploader = $("#fileupload"); uploader.fileupload({ autoupload: false, datatype: 'json', //formdata: { // example: 'test' //}, add: function (e, data) { $('.import_btn').on('click', function(e){ e.preventdefault(); var file_name = $('input[name="import_file"]').val(); if (!file_name) { alert('must select 1 file'); return; } if (file_name.split('.')[file_name.split('.').length-1] != 'csv') { alert('wrong file'); return; } data.submit(); }); }, done: function (e, data) { if(data.status =='ok'){ alert('ok！'); }else{ alert('fail'); } }, fail: function (e, data) { alert('fail'); } });

to have uploading button, doing (got post). can see moving file check logic outside of click event, checks file moment select in file input.

$(".import_btn").unbind('click').on('click', function() { data.submit(); }); add: function (e, data) { e.preventdefault(); var file_name = $('input[name="import_file"]').val(); if (!file_name) { alert('must select 1 file'); return; } if (file_name.split('.')[file_name.split('.').length-1] != 'csv') { alert('wrong file'); return; } $('.import_btn').on('click', function(e){ data.submit(); }); }, (...)

it uploading file when click, not showing file when select it.

jquery file-upload