Dropping file with UploadBrowserFile always surrounds the file content with a markdown link

[wilhelmberg]

Example 3 which is not using UploadBrowserFile works as expected:

• drag a file into the text area
• just the file contents is shown, not [<file_name>](<file_contents>)

---

My setup is an InteractiveServer project using latest 0.8.12.

        <CodeMirror6Wrapper @bind-Doc=@Text
                            AutoFormatMarkdown=@false
                            TabSize=@TabSize
                            IndentationUnit=@TabSize
                            Theme=@Theme
                            Language=@Language
                            LintDocument=@LintDocument
                            Setup=@Setup
                            UploadBrowserFile=@UploadBrowserFile
                            EmbedUploadsAsDataUrls=@false
                            PreviewImages=@false
                            FullScreen=@FullScreen
                            MaxHeight="60em">

private CodeMirrorLanguage Language = CodeMirrorLanguage.PostgreSql;

private readonly CodeMirrorSetup Setup = new() {
    HighlightSelectionMatches = true,
    ScrollToStart = false,
    ScrollToEnd = false,
    BindMode = DocumentBindMode.OnDelayedInput
};

private async Task<string> UploadBrowserFile(IBrowserFile file) {
    using TextReader reader = new StreamReader(file.OpenReadStream());
    return await reader.ReadToEndAsync();
}

Dropping the file my-perfect.sql with contents select * from table always ends up as:

[my-perfect.sql](select * from table)

I've already tried various combinations of settings and also a FileUploadController - to no avail, always the same result.

The only thing that seems to make it display the contents only, is not defining UploadBrowserFile=@UploadBrowserFile.

But that isn't helpful for my scenario as I need to do some validations and edits on the dropped SQL before it gets passed to the text area.

Any hints/ideas/suggestions on how to "catch" the SQL after it has been dropped and how to get the "raw" SQL to show up?

[gaelj]

Hi @wilhelmberg,

The next release will feature a new parameter that will give you control over how dropped (or pasted) files should be handled : either upload them, or insert their contents into the editor - if possible, i.e. if it's a text file (or empty MIME type) (else they'll get uploaded if the callback exists). Let me know if this doesn't match your specific needs.

The reason of your bug (markdown link containing the contents) is that your UploadBrowserFile callback is supposed to return an URL to where the uploaded file can be downloaded, rather than the contents of the file itself:

So you'll need some kind of back-end storage for the uploaded files, and another endpoint to download the file. This should probably be added to the examples at some point, for clarity.

Speaking of which, don't use the lazy and naive approach implemented in my examples (storing file contents within the document as data-URLs) in a "real" project, because it causes display bugs, makes the document very heavy (in Blazor Server the whole document gets transferred on each keystroke), easily breaking the Blazor signal-R connection to the server.

[wilhelmberg]

Hi @gaelj,

thanks for your swift reply, clarifications and new features 🎉👏

Being able to decide whether the files should be uploaded or inserted sounds great.
I will check it out during the coming days.

My current workaround in UploadBrowserFile spins off a thread, does some processing on the uploaded file, waits for 2 seconds and then sets the variable bound with @bind-Doc to the processed contents of the file.
This creates a rather bad and clunky user experience 😂🙈 .

Thanks for the hint about the document being transferred to each keystroke.
That might pose problems with some of the bigger files (SQL and JSON), but I will cross that bridge when I get to it.

[wilhelmberg]

Hi @gaelj,
the new parameter InsertDroppedFileContents works great 🎉

Another question:
Is there an event after the file has been dragged and dropped?
That differs from DocChanged, which is also fired on regular edits.
As I mentioned, I need to do some validation on the file and also save it to the DB.
I looked at CodeMirror6Wrapper.razor.cs but couldn't find any.