Howto preserve af SfUploader from one Tab to an other

[huskaner]

Hi Support,

my razor file look like this:

...
<DialogTemplates>
        <Content>
            <SfTab LoadOn="ContentLoad.Init" SelectedItem="@SelectedTabIndex" HeaderPlacement="HeaderPosition.Left" Height="100%">
                <TabItems>
                    <TabItem>
                        <HeaderTemplate>First</HeaderTemplate>
                        <ContentTemplate>
                            <div class="p-4">
                                <SiteHeaderSmall Heading="Required File(s)"></SiteHeaderSmall>
                                <SfUploader @ref="First"/>
                            </div>
                        </ContentTemplate>
                    </TabItem>
                    <TabItem>
                        <HeaderTemplate>Second</HeaderTemplate>
                            <ContentTemplate>
                                <div class="p-4">
                                    <SiteHeaderSmall Heading="Summary"></SiteHeaderSmall>
                                    <SfUploader @ref="Second"/>
                                 </div>
                            </ContentTemplate>
                    </TabItem>
                </TabItems>
            </SfTab>
        </Content>
    </DialogTemplates>
...

I try to preserve the all content /FileList of SfUploader First in SfUploloader Second, so both use the same "source". There is no datasource property or something. How can i achieve that in both tabs both SfUploader are equal ?

[Sureshkumar P]

Hi Huskaner,

We will validate the requirement in our component. We update you in two business days (July 7th, 2022).

Regards,

Sureshkumar P

[Sureshkumar P]

Hi Huskaner,

We can achieve your requirement by using our preload files feature. Please find the code example in the below code:

<div id="target" class="col-lg-12 control-section">

    <div>

        @if (this.ShowButton)

        {

            <button class="e-btn" @onclick="@OnBtnclicked">Open</button>

        }

    </div>

    <SfDialog Height="75%" Width="435px" Target="#target" ShowCloseIcon="true" @bind-Visible="Visibility">

        <DialogTemplates>

            <Content>

                <SfTab LoadOn="ContentLoad.Dynamic" HeaderPlacement="HeaderPosition.Left" Height="100%">

                    <TabItems>

                        <TabItem>

                            <HeaderTemplate>First</HeaderTemplate>

                            <ContentTemplate>

                                <div class="p-4">

                                    <SfUploader @ref="First" ID="UploadFile1">

                                        <UploaderEvents ValueChange="OnChange" Success="FileSucess"></UploaderEvents>

                                    </SfUploader>

                                </div>

                            </ContentTemplate>

                        </TabItem>

                        <TabItem>

                            <HeaderTemplate>Second</HeaderTemplate>

                            <ContentTemplate>

                                <div class="p-4">

                                    <SfUploader @ref="Second" ID="UploadFile2">

                                        <UploaderFiles>

                                            <UploaderUploadedFiles Name="@Name" Size=@Size Type="@Type"></UploaderUploadedFiles>

                                        </UploaderFiles>

                                        <UploaderEvents ValueChange="OnChange"></UploaderEvents>

                                    </SfUploader>

                                </div>

                            </ContentTemplate>

                        </TabItem>

                    </TabItems>

                </SfTab>

            </Content>

        </DialogTemplates>

        <DialogEvents OnOpen="@DialogOpen" Closed="@DialogClose"></DialogEvents>

    </SfDialog>

</div>

 

@code {

    SfUploader First;

    SfUploader Second;

 

    public String Name { get; set; }

 

    public double Size { get; set; }

 

    public String Type { get; set; }

 

    void FileSucess(SuccessEventArgs args)

    {

        Name = args.File.Name;

        Size = args.File.Size;

        Type = args.File.Type;

    }

    private void OnChange(UploadChangeEventArgs args)

    {

        foreach (var file in args.Files)

        {

            var path = @"path" + file.FileInfo.Name;

            FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write);

            file.Stream.WriteTo(filestream);

            filestream.Close();

            file.Stream.Close();

        }

    }

 

    SfTextBox TextboxObj;

    private string TextBoxValue;

    private bool Visibility { get; set; } = true;

    private bool ShowButton { get; set; } = false;

    private void DialogOpen(Object args)

    {

        this.ShowButton = false;

    }

    private void DialogClose(Object args)

    {

        this.ShowButton = true;

    }

    private void OnBtnclicked()

    {

        this.Visibility = true;

    }

}

 

<style>

    #target {

        height: 600px;

    }

</style>

In the above code example, we have retrieved the first uploader component uploaded files using a success event and using that file details, we have rendered the second uploader with preload files. We suggest you use the tab component LoadOn property value as Dynamic to render the component when the tab item is clicked.

Find the sample and video demonstration in the attachment:

Regards,

Sureshkumar P

Attachment: blazor_5f3af7b9.zip

[huskaner]

I am sorry, but this is not what i expected..

What i want to achieve is this:

1. Select in First Tab with SfUploader First a few Files. After selecting with ok , this files will be added to the FileList and also shown there with a upload button (not automatically). This Tab is for selecting files.
2. Now select Second Tab. This Tab is for a summary page with progress and additional infos  There is not action to upload between the tabs. 
3. Expected Behavior: The Files and Showlist of SfUploader Second appear exactly like in First Tab (as it where the same control). So the second SfUploader should have same Files and Showlist (after rendering). I could now Upload them with the upload button

[Sureshkumar P]

Hi Huskaner,

We have validated your requirement, we cannot achieve your requirement by using default properties, so we will try to create a custom sample to achieve your requirement. We need two more business days to create the custom sample. we will update you on July 12^th,2022 on further details.

Regards,

Sureshkumar P

[huskaner]

Hi Sureshmumr P,

It should look like this example:

Switching from one tab to an an other wont change the control. in fact we need to be able to use one datasource for both sfuploaders, or copy one to the other one,,,

Best Regards

[Sureshkumar P]

Hi Huskaner,

Thanks for your update, as per our previous update we will try to achieve your requirement with a custom sample and update you on July 12^th,2022.

Regards,

Sureshkumar P

[Sureshkumar P]

Hi Huskaner,

As per our previous update we have created the custom sample to achieve your requirement. In this custom sample, we have gathered the first uploader component selected file list details using fileSelected event, and using that list we have rendered the second uploader file list using preload file feature. When rendering the preload file, the upload button is not visible to upload the preload files because preload files are considered as already uploaded files. We have overridden the file list with JSIntrop as in the below code example also we have uploaded the selected first uploader component files using an external button click.

Find the sample code here:

[index.razor]

<div id="target" class="col-lg-12 control-section">

 

    <div>

 

        @if (this.ShowButton)

 

        {

 

            <button class="e-btn" @onclick="@OnBtnclicked">Open</button>

 

        }

 

    </div>

 

    <SfDialog Height="75%" Width="435px" Target="#target" ShowCloseIcon="true" @bind-Visible="Visibility">

 

        <DialogTemplates>

 

            <Content>

 

                <SfTab LoadOn="ContentLoad.Demand"HeaderPlacement="HeaderPosition.Left" Height="100%">

 

                    <TabItems>

 

                        <TabItem>

 

                            <HeaderTemplate>First</HeaderTemplate>

 

                            <ContentTemplate>

 

                                <div class="p-4">

 

                                    <SfUploader @ref="First" ID="UploadFile1" AutoUpload="false">

 

                                        <UploaderEvents ValueChange="OnChange" FileSelected="FileSelected"></UploaderEvents>

 

                                    </SfUploader>

 

                                </div>

 

                            </ContentTemplate>

 

                        </TabItem>

 

                        <TabItem>

 

                            <HeaderTemplate>Second</HeaderTemplate>

 

                            <ContentTemplate>

 

                                <div class="p-4">

 

                                    <SfUploader @ref="Second" ID="UploadFile2">

 

                                        <UploaderFiles>

 

                                            @foreach( var file in fileDetails){

                                            <UploaderUploadedFiles Name="@file.Name" Size=@file.Size Type="@file.Type"></UploaderUploadedFiles>

                                            }

 

                                        </UploaderFiles>

 

                                        <UploaderEvents ValueChange="OnChange" Created="FileListCreated"></UploaderEvents>

 

                                    </SfUploader>

                                    <button @onclick="externalupload">ExternalUpload</button>

 

                                </div>

 

                            </ContentTemplate>

 

                        </TabItem>

 

                    </TabItems>

 

                </SfTab>

 

            </Content>

 

        </DialogTemplates>

 

        <DialogEvents OnOpen="@DialogOpen" Closed="@DialogClose"></DialogEvents>

 

    </SfDialog>

 

</div>

 

 

 

@code {

 

    SfUploader First;

 

    SfUploader Second;

 

    public List<FileDetail> fileDetails { get; set; } = new List<FileDetail>(){};

 

    public class FileDetail

    {

        public String Name { get; set; }

        public double Size { get; set; }

        public String Type { get; set; }

    }

 

    void FileSelected(SelectedEventArgs args)

    {

        foreach(var file in args.FilesData)

        {

            FileDetail fd = new FileDetail() { };

            fd.Name = file.Name;

            fd.Size = file.Size;

            fd.Type = file.Type;

            fileDetails.Add(fd);

        }

    }

 

    async Task FileListCreated()

    {

        await JS.InvokeAsync<string>("liststatuschange", "readyMessage");

    }

 

    void externalupload()

    {

        this.First.UploadAsync();

    }

 

    private async Task OnChange(UploadChangeEventArgs args)

 

    {

 

        foreach (var file in args.Files)

 

        {

 

            var path = @"path" + file.FileInfo.Name;

 

            FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write);

 

            file.Stream.WriteTo(filestream);

 

            filestream.Close();

 

            file.Stream.Close();

            await JS.InvokeAsync<string>("liststatuschange", "sucessMessage");

 

        }

 

    }

 

 

 

    SfTextBox TextboxObj;

 

    private string TextBoxValue;

 

    private bool Visibility { get; set; } = true;

 

    private bool ShowButton { get; set; } = false;

 

    private void DialogOpen(Object args)

 

    {

 

        this.ShowButton = false;

 

    }

 

    private void DialogClose(Object args)

 

    {

 

        this.ShowButton = true;

 

    }

 

    private void OnBtnclicked()

 

    {

 

        this.Visibility = true;

 

    }

 

}

 

 

 

<style>

 

    #target {

 

        height: 600px;

 

    }

 

</style>

Override JSIntrop code:

function liststatuschange(args) {

    filesStatus = document.getElementsByClassName("e-file-status");

    for (var file = 0; file < filesStatus.length; file++) {

        if (args == "readyMessage") {

            filesStatus[file].classList.remove("e-upload-success");

            filesStatus[file].textContent = "Ready to upload";

        } else {

            filesStatus[file].classList.add("e-upload-success");

            filesStatus[file].textContent = "File uploaded successfully";

        }

    }

};

Find the custom sample in the attachment:

Regards,

Sureshkumar P

Attachment: BlazorApp1_e638e432.zip

[huskaner]

Hi  Sureshkumar,

i thank your for your reply. So far it works as expected.

Thanky yo

[Sureshkumar P]

Huskaner,

Thanks for your update.

Regards,

Sureshkumar P