How to use context menu in sfupload control

[KINS]

I have used sfupload control in my application.I would like to know how to use context menu in sfupload control to browse files.Please check attached file for your reference.

Attachment: Untitled_6fdd847d.zip

[Vinitha Jeyakumar]

Hi Kins, 

 

 

Currently, we are validating your reported query. We will update you the further details on 9^th September. 

 

Regards, 

Vinitha 

[KINS]

Thanks ..

Will wait..

Note:-

Need context menu and hide browse butt

[Vinitha Jeyakumar]

Hi Kins, 

 

 

We have further validated your query “How to use context menu in sfupload control” 

 

Your requirement to use ContextMenu to browse the files can be achieved in application level. We have added a click Event to the MenuItems of ContextMenu to browse the files. Please check the below code for your reference, 

 

Code snippet: 

Index.razor 

<div class="control-section"> 

    <div class="contextmenu-control"> 

        <div id="contextmenutarget">Right click/Touch hold to open the ContextMenu</div> 

        <SfContextMenu Target="#contextmenutarget" TValue="MenuItem"> 

            <MenuEvents TValue="MenuItem" ItemSelected="@click"></MenuEvents> 

            <MenuItems> 

                <MenuItem Text="Cut" IconCss="e-cm-icons e-cut"></MenuItem> 

                <MenuItem Text="Copy" IconCss="e-cm-icons e-copy"></MenuItem> 

                <MenuItem Text="Paste" IconCss="e-cm-icons e-paste"> 

                    <MenuItems> 

                        <MenuItem Text="Paste Text" IconCss="e-cm-icons e-pastetext"></MenuItem> 

                        <MenuItem Text="Paste Special" IconCss="e-cm-icons e-pastespecial"></MenuItem> 

                    </MenuItems> 

                </MenuItem> 

                <MenuItem Separator="true"></MenuItem> 

                <MenuItem Text="Link" IconCss="e-cm-icons e-link"></MenuItem> 

                <MenuItem Text="New Comment" IconCss="e-cm-icons e-comment"></MenuItem> 

                <MenuItem Separator="true"></MenuItem> 

               // when you click on this browse text, the browse files popup will appear 

                <MenuItem Text="Browse" Id="browse"></MenuItem> 

            </MenuItems> 

        </SfContextMenu> 

        <SfUploader></SfUploader> 

         

 

    </div> 

</div> 

@code { 

    private async void click(MenuEventArgs<MenuItem> args) 

    { 

        if (args.Item.Text == "Browse") 

        { 

            await jsRuntime.InvokeAsync<object>("accessDOMElement"); 

        } 

 

    } 

} 

<style> 

    .e-upload.e-control-wrapper, .e-bigger.e-small .e-upload.e-control-wrapper { 

        visibility: hidden; 

    } 

</style> 

 

Host.csHtml 

<script> 

        function accessDOMElement() { 

            document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click(); 

                       

        } 

    </script> 

Sample: https://www.syncfusion.com/downloads/support/forum/168641/ze/Context_upload12136242072 

Please check the sample and code snippet and let us know if it satisfies your requirement. 

Regards, 

Vinitha. 

[KINS]

can u pls send me example code for upload image file and then display it with above contextmenu

[Vinitha Jeyakumar]

Hi Kins, 

 

 

We have further validated your query “can u pls send me example code for upload image file and then display it with above contextmenu” 

 

Your requirement to upload the image file and to display it with the ContextMenu can be achieved by using FileSelected and ValueChange Events of Uploader component. We have also prepared a sample for your reference, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/168641/ze/Upload_Context3-345318360 

 

Please check the above sample and let us know if it satisfies your requirement. 

 

Regards, 

Vinitha.