jQuery: How to open file open dialog box on click button

Question

How can I make a dialog box open on click of button on swallow rendering. It can be dynamically repeatable button as it is inside li.

//Code

var wrapper = $(this).parents(".file-upload-wrapper")[0];
$(wrapper).find('.attachment-button-div')[0].click(function() {
 $(wrapper).find('.attachment-button')[0].trigger('click');

});

$(wrapper).find('.file-upload').change(function() {
 $('input[type=text]').val($(this).val());
});

But it is not working as expected . Any suggestion.

Answer 1

you can try this. create buttons and corresponding invisible file input to each button. Add some jQuery to trigger/click corresponding invisible file input:

function openfile(a) {
  $(a).trigger('click');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button1" onclick='openfile("#file-input3")' class="file-button"> Open</button>
<input id="file-input1" type="file" name="name" style="display: none;" />

<button id="button2" onclick='openfile("#file-input2")' class="file-button"> Open</button>
<input id="file-input2" type="file" name="name" style="display: none;" />

<button id="button3" onclick='openfile("#file-input3")' class="file-button"> Open</button>
<input id="file-input3" type="file" name="name" style="display: none;" />

Answer 2

why you don't simply use input tag with file type? It opens the choose file dialog box.

<h3>Please choose your attachment:</h3>
<form action="">
  <label for="myfile">Select files:</label>
  <input type="file" id="myfile" name="myfile" multiple><br><br>
  <input type="submit">
</form>