Unable to hide the file attachment browse button

Question

I am sending attachments in email, while sending user can actually add multiple attachments. My code is keep displaying the browse button for every time. I want to display only one button and let the user opens the file picker for any no of attachments. Please tell me whats wrong with my code. Also see the attached image. Which is something I don't want that behavior.

What I want is on clicking the attach more button it should automatically open the file picker. Currently it is displaying the

Thank you.

<div class="col-sm-10">
              <div class="element">
                <label>Attachment</label>
                <span class="upload_file_button"><input type="file" name="upload_file1" id="upload_file1"/></span>
                </div>
                <div id="moreImageUpload"></div>
                <div id="moreImageUploadLink" style="display:none;margin-left: 10px;">
                <a href="javascript:void(0);" id="attachMore" class="fa fa-plus"> Attach More</a>
                </div>
            </div>
          </div>
        </div>

javascript

<script type="text/javascript">
// onclick browse button attach the file id and show the attachmore link

$(document).ready(function() {
  $("input[id^='upload_file']").each(function() {
  var id = parseInt(this.id.replace("upload_file", ""));
  $("#upload_file" + id).change(function() { 
   if ($("#upload_file" + id).val() != "") {
   $("#moreImageUploadLink").show();
   }
  });
});
var upload_number = 2;
$('#attachMore').click(function() {
//add more file. Everytime clicking on attachmore link show the browse button also attach more as well.
var moreUploadTag = ''
 moreUploadTag += '<div class="element"><label for="upload_file"' + upload_number + '>Upload File ' + upload_number + '</label>';
 moreUploadTag += '<span class="upload_file_button"><input type="file" id="upload_file' + upload_number + '" name="upload_file' + upload_number + '"/></span>';
 moreUploadTag += '&nbsp;<a href="javascript:del_file(' + upload_number + ')" style="cursor:pointer;" onclick="return confirm(\"Are you really want to delete ?\")">Delete ' + upload_number + '</a></div>';
 $('<dl id="delete_file' + upload_number + '">' + moreUploadTag + '</dl>').fadeIn('slow').appendTo('#moreImageUpload');
 upload_number++;
 });
});

function del_file(eleId) {
 var ele = document.getElementById("delete_file" + eleId);
 ele.parentNode.removeChild(ele);
}
</script>

enter image description here

On click + Attach More it is displaying the browse button. Instead I want to open the file picker right away upon clicking + Attach more.

I see no where in your code where you try to open it up. Click the input — epascarello, Apr 08 '15 at 12:58
@epascarello No. Every time I click on + Attach more, it is opening the Browse button. If you tested on jsfiddle it does not work. Please help me to fix this. — Prabhakar, Apr 08 '15 at 13:02
Check here http://stackoverflow.com/questions/10216331/open-file-dialog-box-on-a-tag — merezha, Apr 08 '15 at 13:29

score 2 · Answer 1 · answered Apr 08 '15 at 13:27

2

Just add this line

$('#upload_file'  + upload_number).trigger('click');

before

 upload_number++;

in order to have the "Attach more" button to trigger the opening of the file pickup. Then you could hide the input file tag with CSS.

answered Apr 08 '15 at 13:27

Giovanni

543
2
11

When I add that line, on attach more it is opening the file picker but it is not showing the file name. – Prabhakar Apr 08 '15 at 14:59

Unable to hide the file attachment browse button

1 Answers1