list down the files in a folder in asp.net mvc

Question

I want to list all the files in folder once page loading . so

For that I just created like this

HTML code

<input id="idd" type="file" multiple="true" class="file" data-preview-file-type="text">

Script

@section scripts{   

 <script type="text/javascript">    

  $(document).ready(function () {
        $.ajax({
            url: '/Home/filesinfolder',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                $.each(data, function (index, val) {
                    $('#idd').append('<li><a href="http://'+ val.Url +'" target="_new">' + val.Url + '</a></li>');
                });
            },
            error: function (xhr, status, err) {
                console.log('Response code:' + xhr.status);
                console.log('[Error:' + err + '] ' + status);
            }
        });
    });

</script>

Controller method

    public JsonResult filesinfolder()
    {
        DirectoryInfo salesFTPDirectory = null;
        FileInfo[] files = null;

        string salesFTPPath = "C:/filePath";

        salesFTPDirectory = new DirectoryInfo(salesFTPPath);
        files = salesFTPDirectory.GetFiles();

        files = files.OrderBy(f => f.Name).ToArray();

        var salesFiles = files.Where(f => f.Extension == ".xls" || f.Extension == ".xml" || f.Extension == ".jps" || f.Extension == ".jpg" || f.Extension == ".jpeg" || f.Extension == ".png");

        return Json(salesFiles.ToList());
    }

But this is isn't list down anything at all , but once I debug I can see this filesinfolder method calling and finding files in folder.

@StephenMuecke I just replace `` with `
` but same nothing listdown — kez, Dec 14 '15 at 07:35
You also need `return Json(salesFiles, JsonRequestBehavior.AllowGet);` or add the `method: 'Post"` ajax option (the default is `Get`) And there is no need for the extra overhead of `.ToList()` — , Dec 14 '15 at 07:37
But it appears you trying to return a collection of `FileInfo`. Instead you should be returning a collection of `string` containing the property you want to display in the view (but what is `Url` anyway - its not a property of `FileInfo`?) — , Dec 14 '15 at 07:40
@StephenMuecke Nope its(`Url`) not a property of `FileInfo` , just want to list down files as links , is this possible to do ? — kez, Dec 14 '15 at 07:48
But you have `val.Url` in your script (what your returning does not have a property `Url`). Are you just wanting to list the names of all the files? — , Dec 14 '15 at 07:51
my plan is list down files as clickable links , but If its impossible to do , I wish to just list the names of all the files — kez, Dec 14 '15 at 07:54
Yes its possible, but how will you be generating the links? Do you have a controller method that returns a `FileResult` so you can download them? — , Dec 14 '15 at 07:56
Nope I don't have controller method to generate the links , Actually I don't want to complicate this , for now just want to list down the files, what should I do now , — kez, Dec 14 '15 at 08:00
Need a break for a while. I'll add an answer in an hour or so showing how to list the file names, and then we ca expand it later to include links for downloading the actual files. — , Dec 14 '15 at 08:08

score 6 · Accepted Answer · edited Dec 14 '15 at 10:13

6

You have a number of errors

The element with id="idd" is an <input> and you cannot append <li> elements to an <input> (only a <ul> element)
Your ajax call is making a GET call, but your have not included JsonRequestBehavior.AllowGet so nothing will be returned
Your attempting returning List<FileInfo> but accessing the Url property which dos not exist.
Even if you were to access the (say) FullName property, creating <a href="http://C:/filePath.someFileName.xls would not navigate to the file on the server

Since it appears you only want the name of the file, then your code should be

Html

<ul id="filelist"></ul>

Script

$(document).ready(function () {
$.ajax({
  url: '@Url.Action("filesinfolder", "Home")', // don't hardcode
  dataType: "json",
  success: function (data) {
    $.each(data, function (index, item) {
      $('#filelist').append($('<li></li>').text(item));
    });
  },
   error: function () {

  }
   });
 });

Note the contentType option is not required

Controller

public JsonResult filesinfolder()
{
    string salesFTPPath = "C:/filePath";
    DirectoryInfo salesFTPDirectory = new DirectoryInfo(salesFTPPath);
    IEnumerable<string> files = salesFTPDirectory.GetFiles()
      .Where(f => f.Extension == ".xls" || f.Extension == ".xml" || f.Extension == ".jps" || f.Extension == ".jpg" || f.Extension == ".jpeg" || f.Extension == ".png")
      .OrderBy(f => f.Name)
      .Select(f => f.FullName);
    return Json(files, JsonRequestBehavior.AllowGet);
}

edited Dec 14 '15 at 10:13

kez

2,273
9
64
123

answered Dec 14 '15 at 08:40

its not list down file name just list down as `item` – kez Dec 14 '15 at 09:22
now its working properly , but its showing files with full path like this `C:\Users\user\Documents\Visual Studio 2015\Projects\rootProject\project_name\project_name\Content\Essential_Folder\marketing_materials_EN\01\4394.jpg` how to avoid full path , just the name – kez Dec 14 '15 at 09:35
Change `.Select(f => f.FullName);` to `.Select(f => f.Name);`. But you have nother issue as well. It might be returning files when running in local host but as soon as your publish this to a server, its going to fail. But I'm not really sure what your wanting to do so not sure of the best way to handle this – Dec 14 '15 at 09:37
do I have solution for both localhost and server ? – kez Dec 14 '15 at 09:41
IF I explain briefly I just want to show files in specific folder in my edit view , since Its complicate to show with clickble links I just moved to just show the filenames , Am I clear ? – kez Dec 14 '15 at 09:43
You will need to create a folder in your app (say) MyFiles and then use `Server.MapPath()`. I'll find a few links for you a bit later to look at (including how to download the files) – Dec 14 '15 at 09:51
1

For setting the path to the folder use `string salesFTPPath = Server.MapPath("~/App_Data/MyFiles");` assuming you have a folder named `MyFiles` in the `App_Data` folder. For downloading files, start with the answers [here](http://stackoverflow.com/questions/5826649/returning-a-file-to-view-download-in-asp-net-mvc) and [here](http://stackoverflow.com/questions/3604562/download-file-of-any-type-in-asp-net-mvc-using-fileresult). – Dec 14 '15 at 10:39

score 0 · Answer 2 · answered Dec 14 '15 at 07:31

If you're using GET request then you need to explicitly allow get requests on JSON results.

  public JsonResult filesinfolder()
    {
        DirectoryInfo salesFTPDirectory = null;
        FileInfo[] files = null;

        string salesFTPPath = "C:/filePath";

        salesFTPDirectory = new DirectoryInfo(salesFTPPath);
        files = salesFTPDirectory.GetFiles();

        files = files.OrderBy(f => f.Name).ToArray();

        var salesFiles = files.Where(f => f.Extension == ".xls" || f.Extension == ".xml" || f.Extension == ".jps" || f.Extension == ".jpg" || f.Extension == ".jpeg" || f.Extension == ".png");

        return Json(salesFiles.ToList(), JsonRequestBehavior.AllowGet);
    }

Also, consider returning just the data you need to your view. The FileInfo object is complex and might not be easily serialized.

Hope this helps

list down the files in a folder in asp.net mvc

2 Answers2