Skip to content

Make setting the "Chosen Item" in a <input type="file"> easier #190

Closed

Description

@Smurf-IV

Is your feature request related to a problem? Please describe.
Need to be able to progmatically set a "Chosen File" (Or files) in an <input type="file"> easier.
e.g. if Blazor has the following
image
image

Then a test needs to be able to identify the <input> by the id, and set the field that stores the input(s) chosen.

Then when the test initiates the "Submit", the functionality will take the input details and work out what needs to be done (i.e. Upload via gRPC once the file has been opened as a Stream via Tewr.Blazor.FileReader [i.e. keep memory usage as low as possible!])

Describe the solution you'd like
Make it cleaner

Describe alternatives you've considered

        protected static IHtmlInputElement FindInputElement(IRenderedComponent<CascadingAuthenticationState> cut, string findFrom = @"input")
        {
            return ((AngleSharpWrappers.Wrapper<AngleSharp.Dom.IElement>)cut.Find(findFrom)).WrappedElement as AngleSharp.Html.Dom.IHtmlInputElement;
        }

        protected async Task<FileInfo> AddFileToAsync(IRenderedComponent<CascadingAuthenticationState> cut, string fileName, string findFrom = @"input", string type = @"text/csv")
        {
            var inputLoading = FindInputElement(cut, findFrom);
            (Context.Services.GetService<IFileReaderService>() as MockIFileReaderService).SetInput(inputLoading);
            var fi = new FileInfo(fileName);
            inputLoading.Files.Add(new InputFile(fi.Name, type, fi.OpenRead(), fi.LastWriteTimeUtc));
            await inputLoading.ChangeAsync(new ChangeEventArgs());
            return fi;
        }

How is the above used

        [Test]
        public async Task A020_UpLoadEnvironmentPage()
        {
            const string TESTDATA_METOCEAN1_CSV = @"TestData/metocean1.csv";

            var cut = RenderComponent<CascadingAuthenticationState>(x => x
                .AddChildContent<UploadEnvironment>(parameters => parameters.Add(p => p.AssetId, AssetId)));
            var uploadBut = cut.Find(@"button"); // There is only one
            uploadBut.HasAttribute(@"disabled").Should().BeTrue();
            uploadBut.TextContent.Should().BeEquivalentTo(@"Upload");

            FileInfo fi = await AddFileToAsync(cut, TESTDATA_METOCEAN1_CSV);

            uploadBut.HasAttribute(@"disabled").Should().BeFalse();
            await cut.Find(@"form").SubmitAsync();

           // Some other magic happens here to get the ingestMessage from the target

            await using var streamFile = new FileStream(fi.FullName, FileMode.Open, FileAccess.Read, FileShare.None, 1024 * 32,
                /*FileOptions.DeleteOnClose |*/ FileOptions.Asynchronous | FileOptions.SequentialScan);
            (await new StreamCompare().AreEqualAsync(streamFile, ingestMessage.stream, null)).Should().BeTrue();
        }

Activity

  1. added
    enhancementNew feature or request
    help wantedExtra attention is needed
    input neededWhen an issue requires input or suggestions
    on Aug 14, 2020
  2. egil commented on Aug 15, 2020

    @egil
    Member

    Thanks for this @Smurf-IV. I will have a look at this when some of the core issues are out of the way.

  3. linkdotnet commented on May 11, 2022

    @linkdotnet
    Collaborator

    @egil is this closed with #700 ?
    Seems the request was tracked twice.

  4. egil commented on May 11, 2022

    @egil
    Member

    Technically no, but probably yes.

    Can our solution for InputFile be extended to cover a native input element too?

    If not, then I'm fine closing this now.

  5. linkdotnet commented on May 11, 2022

    @linkdotnet
    Collaborator

    Ahhh sorry that is on my. Well I guess there could be ways to do so, but not out of the box.

  6. egil commented on May 11, 2022

    @egil
    Member

    I do think that most people will use InputFile, so this can likely be closed though. That said, if there is a low hanging fruit here then let's do it.

  7. linkdotnet commented on May 11, 2022

    @linkdotnet
    Collaborator

    I just fiddled around very quickly and I don't think it would be very low-hanging as we have to do stuff around the ElementReference to the <input type="file"/>.
    At the end we would almost rebuild InputFile. Don't think it would be worth the effort.

  8. egil commented on May 11, 2022

    @egil
    Member

    Ok. Let's close those and leave it as is, recommend folks use InputFile.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requesthelp wantedExtra attention is neededinput neededWhen an issue requires input or suggestions

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions