Asp.net MVC button should open file dialog

Question

I want to use the button below to open a file dialog to select one/muliple word files. I also want it to be like a method that returns the path so that i can read /load that data.

<div>
    <div class="col-lg-6 col-md-6 col-sm-6">
        <img class="img-analyse" src="~/Content/open-file_icon.png">
        <button class="button-analyse"onclick="SelectFile">b</button>
    </div>
</div>

How do I go on? Do I register an action event? Sorry I am a total beginner in asp.net.

you know, that this will execute on client side, and you actually can't write there from MVC, right? — vasily.sib
– vasily.sib, Commented Jul 13, 2018 at 7:25
I tried that but then I cant modify my button to make it tansparent. And where do I get the file path if I do it this way? — ZaraZahara
– ZaraZahara, Commented Jul 13, 2018 at 10:22

Nitin S · Accepted Answer · 2018-07-13 08:00:06Z

6

You can use proxy file upload control

$("#btnSelect").click(function() {
  var $input = $('<input type="file" />');
  $input.change(function() {
    console.log("selected file:" + $(this).val());
  });
  $input.trigger('click');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-lg-6 col-md-6 col-sm-6">
  <button class="button-analyse" id="btnSelect">select file</button>
</div>

Here's fiddle for you: http://jsfiddle.net/CSvjw/2034/

answered Jul 13, 2018 at 8:00

Nitin S

7,71310 gold badges64 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ZaraZahara Over a year ago

were did you write this code? in the bootstrap.js or bootstrap.min.js?

Nitin S Over a year ago

In a separate .js file, why would you write code in bootstrap.js or bootstrap.min.js, they are library files.

ZaraZahara Over a year ago

okay thanks I will try that and I already have the script line in my layout.cshtml file so that should be good right?

Collectives™ on Stack Overflow

Asp.net MVC button should open file dialog

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related