locked
How can copy the value from the click event to another control when I click brows button RRS feed

  • Question

  • User-1355965324 posted

    How can I copy the  the value  while I click  brow the button and after selecting  the filename to  hidden control in an html file

     public class EmpDocumentModel
        {
            
            public string FileUrl{ get; set; }
            [NotMapped]
            public IFormFile FileNameURL { get; set; }
           
        }
    // When I click Browse button btnSelect and after selectingthe  filename , that file name should be stored into FileNameURL Please help
    
    <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label asp-for="FileUrl" class="control-label control-label-left col-sm-3 text-danger">File Name</label>
                                            <div class="controls col-sm-9">
                                                <div class="input-group">
                                                    <input asp-for="FileUrl" class="form-control" id="fileUrl" maxlength="250" readonly />
                                                    <span class="input-group-btn">
                                                        <button class="btn btn-default" type="button" id="btnSelect">Browse...</button>
    
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
    
                                    </div>
    
                                    <div class="col-md-6 hidden ">
                                        <div class="form-group">
                                            <label asp-for="FileNameURL" class="control-label control-label-left col-sm-3 text-danger">File Name</label>
                                                <div class="col-sm-9">
                                                    <div class="custom-file">
                                                        <input asp-for="FileNameURL" class="form-control custom-file-input">
                                                       
                                                    </div>
                                                </div>
                                            
                                        </div>
    
                                    </div>
    
    
    
     $(document).ready(function () {
          
            $("#btnSelect").click(function () {
                var $input = $('<input type="file" />');
                $input.change(function () {
    	    text = text.substring(text.lastIndexOf("\\") + 1, text.length);
    
                    $('#fileUrl').val(text);
    
    
                });
                $input.trigger('click');
            });
    
    
                                </div>

    Wednesday, February 5, 2020 8:15 PM

Answers

  • User711641945 posted

    Hi polachan,

    I understand what you mean now.You need to know, when you use <input type="file">,it would display like your attached image by default.If you want to change the default `no file chosen`,you could only click the <input type="file">.It is impossible to change the value through JavaScript or HTML.This is by design.

    Please read my previous post carefully.The main point I have pasted below:

    For security reasons, the value of a `<input type=file>` element can only be changed by a user. It's not possible to change the value through JavaScript or HTML.

    Best Regards,

    Rena

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, February 6, 2020 7:46 AM

All replies

  • User-864166757 posted

    Did you try to use FileUpload control rather than simple button to browse file. Here is the sample: https://docs.microsoft.com/en-us/aspnet/core/mvc/models/file-uploads?view=aspnetcore-3.1

    Thursday, February 6, 2020 12:23 AM
  • User711641945 posted

    Hi polachan,

    The FileNameURL input's type is file,due to the property is IFormFile type.

    That is to say,the following code:

     <input asp-for="FileNameURL" class="form-control custom-file-input">
    

    generate the html like below:

     <input type="file" id="FileNameURL" name="FileNameURL" class="form-control custom-file-input">

    For security reasons, the value of a `<input type=file>`  element can only be changed by a user. It's not possible to change the value through JavaScript or HTML. 

    You could only change the value of <input type='text'>,your js has some error,you need to modify like below to show the select filename:

    <script>
        $(document).ready(function () {
    
            $("#btnSelect").click(function () {
                var $input = $('<input type="file" />');
                $input.change(function () {
                    var text = $input.val();
                    text =  text.substring(text.lastIndexOf("\\") + 1, text.length);
                    console.log(text);
                    $('#fileUrl').val(text.toString());                             
                });
                $input.trigger('click');
            });
        })
    </script>
    

    Best Regards,

    Rena

    Thursday, February 6, 2020 2:45 AM
  • User-1355965324 posted

    Rena

    I have applied that code already , but the problem is it doesn't show Browse text at the end of the input , It shows choose file text in front of the input . I am trying to show  text Browse display rather than default choose file text. Everything is working fine except this small problem.

     <input type="file" id="FileNameURL" name="FileNameURL" class="form-control custom-file-input">

    Thursday, February 6, 2020 7:12 AM
  • User711641945 posted

    Hi polachan,

    I have applied that code already , but the problem is it doesn't show Browse text at the end of the input , It shows choose file text in front of the input . I am trying to show  text Browse display rather than default choose file text. Everything is working fine except this small problem.

    Sorry that I could not understand what you said.Did you want to show the selected file name on the `FileNameURL` input?If so,as what i said before,it is impossible.

    For security reasons, the value of a `<input type=file>`  element can only be changed by a userIt's not possible to change the value through JavaScript or HTML. 

    If you want to show the file name on the `FileUrl`  input.The js I modified would be OK.

    Could you share your result of view?And please share the result you wanted?

    Best Regards,

    Rena

    Thursday, February 6, 2020 7:25 AM
  • User-1355965324 posted

    Rena

    Please can you go through the attached image. I have given that image here. Here show <Choose File> how can change  the text as Browse and it should show at the end. Sorry for disturbing,

    https://drive.google.com/open?id=1bkWIdOVdTGuHdi7UCucxLbmY3uWoVTKR

    Thursday, February 6, 2020 7:29 AM
  • User711641945 posted

    Hi polachan,

    I understand what you mean now.You need to know, when you use <input type="file">,it would display like your attached image by default.If you want to change the default `no file chosen`,you could only click the <input type="file">.It is impossible to change the value through JavaScript or HTML.This is by design.

    Please read my previous post carefully.The main point I have pasted below:

    For security reasons, the value of a `<input type=file>` element can only be changed by a user. It's not possible to change the value through JavaScript or HTML.

    Best Regards,

    Rena

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, February 6, 2020 7:46 AM