0

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.

enter image description here

//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.

Tammy
  • 1,122
  • 5
  • 19
  • 50

2 Answers2

2

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;" />
Manu Varghese
  • 791
  • 8
  • 25
  • Thanks for your answer. but this should be checked with Parent child. else it won't work in my case. – Tammy Feb 17 '20 at 06:09
  • 1
    @TanmoySarkar I didn't get that. please explain your requirement. – Manu Varghese Feb 17 '20 at 06:10
  • My requirement is to open a dialog box on click attachment button. This button can be repeatable . So we have to check which button is clicked and the file should be checked accordingly. – Tammy Feb 17 '20 at 06:13
  • As above solution won't work for me because my button can be repeated . And this solution will work for only for one button. – Tammy Feb 17 '20 at 06:16
  • @TanmoySarkar now anwser updated. now you add open multiple file input – Manu Varghese Feb 17 '20 at 06:26
0

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>
elahe karami
  • 641
  • 5
  • 11