1

Please check the code below. I want fullpath in place of filename that is passed, to parse json file.

I understand that InputFile does not provide full path info about the user file system that could potentially be exploited in some ways. But I have to pass this chosen file's full path from razor to index.js.

Is it possible that InputFile has this fullpath in memory and this full path memory variable can be passed and accessed in index.js without revealing the actual file path to the user? Thank you.

Code below:

razor page:

<button onclick="document.getElementById('flpicker').click()">choose file</button>
                    <InputFile id="flpicker" OnChange="@OnInputFileChange" hidden multiple />


private async Task OnInputFileChange(InputFileChangeEventArgs e)
{    
    foreach (var File in e.GetMultipleFiles(e.FileCount))
    {
        var fileName = File.Name;       
    }
        await JSRuntime.InvokeVoidAsync("Create", fileName);
   }

index.js:

function create(fileName){
     $.getJSON(fileName, function (data) {
            ....
     });
 }

Edited:

AppState.cs:

public string? json
    {
        get;
        set;
    }

page1.razor:

private IBrowserFile _loadedFile;
private async Task OnInputFileChange(InputFileChangeEventArgs e)
{   
    _loadedFile = e.File;

    var utf8Json = _loadedFile.OpenReadStream(maxAllowedSize: 1024 * 1024 * 10); 

    try
    {
        var jsonDocument = await JsonDocument.ParseAsync(utf8Json);

        AppState.json = jsonDocument @* I understand can't convert to string *@ 
    }
    catch (JsonException ex)
    {
        Console.WriteLine(ex.Message);
    }
}

page2.razor:

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await JSRuntime.InvokeVoidAsync("Create", AppState.json);

}
Sarahrb
  • 407
  • 11
  • 24
  • For security reasons you can _never_ access the full, actual path of an input file from JS. The browser of course retains a reference to that as it will need to upload that file somehow, but the client-side API does not expose that information whatsoever. – Terry Oct 07 '22 at 22:18
  • Does this answer your question? [How to get full path of selected file on change of using javascript, jquery-ajax?](https://stackoverflow.com/questions/15201071/how-to-get-full-path-of-selected-file-on-change-of-input-type-file-using-jav) – Terry Oct 07 '22 at 22:18

1 Answers1

2

Even if you get the full path to the file, $.getJSON(fileName, ...); won't work for the same reason you mentioned:

could potentially be exploited

You can't access the user's file system from JavaScript. Also there is not point in doing this when the user has already uploaded the whole file anyway. You already have the file in memory so why use $.getJSON() to fetch it again? Instead of passing fileName to the js function you can pass the file directly.

Example:

@using System.Text.Json
@inject IJSRuntime JS

<InputFile OnChange="LoadFile" />

<p>Loaded file: @_loadedFile?.Name</p>

<button @onclick="Submit">Submit</button>

@code {
    private IBrowserFile? _loadedFile;

    private void LoadFile(InputFileChangeEventArgs e)
    {
        _loadedFile = e.File;
    }

    private async Task Submit()
    {
        if (_loadedFile == null)
        {
            return;
        }

        var utf8Json = _loadedFile.OpenReadStream(maxAllowedSize: 1024 * 1024 * 10); // 10MB

        try
        {
            JsonDocument? jsonDocument = await JsonDocument.ParseAsync(utf8Json);

            await JS.InvokeVoidAsync("create", jsonDocument);
        }
        catch (JsonException ex)
        {
            Console.WriteLine(ex.Message);
        }
    }
}
Dimitris Maragkos
  • 8,932
  • 2
  • 8
  • 26