Get file source path before upload

[Rolando Tonin]

Hy all,

Is there a way to obtain file source path when I drop or select a file?. I need to save this information before upload action. I have tried FileSelected event but Syncfusion.Blazor.Inputs.FileInfo class and children fields don't contains file source path (only file source name).

Thanks a lot

Rolando

[Sevvandhi Nagulan]

Hi Rolando, 

 

 

Greetings from Syncfusion support. 

 

 

We checked the reported requirement. We would like to inform you that, in the uploader component change event, you can get the Uploaded file path. Refer to the below code and sample, 

 

 

 

    public void OnChangeUpload(UploadChangeEventArgs args) 

    { 

        foreach (var file in args.Files) 

        { 

            var path = Path.GetFullPath("wwwroot\\Images\\") + file.FileInfo.Name; 

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

            file.Stream.WriteTo(filestream); 

            filestream.Close(); 

            file.Stream.Close(); 

            pathUrl = path; 

        } 

    } 

 

Screenshot:  

 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-607207992 

 

Regards, 

Sevvandhi N 

[Rolando Tonin]

Thanks Sevvandhi

but I need the original file source path because I want to register in database where does file comes from, before it uploaded by uploader

Regards Rolando

[Sevvandhi Nagulan]

Hi Rolando, 

You cannot get the selected file path in the both client side and server side due to security reasons. Refer to the following common links for more information. 

https://forums.asp.net/t/1917545.aspx?how+to+get+the+full+path+of+the+file+name+that+is+selected+using+fileupload+control 

https://stackoverflow.com/questions/53759070/how-to-get-path-directory-from-filereader 

Regards, 

Sevvandhi N 

[Boot Dat]

Hello, Thanks for your reply. 

How can i view the selected image before upload if autoupload = false ?
So the user can at least see the image selected before clicking on Upload !

[Sevvandhi Nagulan]

Hi Rolando, 

Greetings from Syncfusion support. 

We have validated the reported requirement. We have prepared and added the custom sample, below. We get the path from the change event and the source(img) element value has changed dynamically, based on the path. Refer to the code below,  

 

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

    <div class="control_wrapper">  

        <div id="dropArea" style="height: auto; overflow: auto">  

            <SfUploader @ref="uploderObj" ID="UploadFiles" AllowedExtensions=".png,.jpeg,jpg">  

                <UploaderEvents  ValueChange="onChange" OnRemove="onRemove"></UploaderEvents>  

                <UploaderTemplates>  

                    <Template>  

                        <span class="wrapper">  

                            <img class="upload-image" alt="Image"  

                                 src="@(files.Count >0 ? files.Where(item=>item.Name == context.Name)?.FirstOrDefault()?.Path : string.Empty)">  

                        </span>  

                        <div class="name file-name" title="@(context.Name)">@(context.Name)</div>  

                        <div class="file-size">@(context.Size)</div>  

                        <span class="e-icons e-file-remove-btn remove" id="removeIcon" title="Remove"></span>  

                        <span class="e-upload-icon e-icons e-file-remove-btn" title="Upload" id="iconUpload"></span>  

                    </Template>  

                </UploaderTemplates>  

  

            </SfUploader>  

  

        </div>  

    </div>  

</div>  

<style>  

    .control_wrapper {  

        width: 350px;  

        margin: 0 auto;  

    }  

</style>  

  

  

<style>  

    .control_wrapper {  

        width: 350px;  

        margin: 0 auto;  

    }  

</style>  

  

  

@code {  

    private SfUploader uploderObj;  

    private object selectedFile { get; set; }  

    List<fileInfo> files = new List<fileInfo>();  

  

  

  

    public class fileInfo  

    {  

        public string Path { get; set; }  

        public string Name { get; set; }  

        public double Size { get; set; }  

    }  

  

    public void onChange(UploadChangeEventArgs args)  

    {  

        files = new List<fileInfo>();  

        foreach (var file in args.Files)  

        {  

  

            var path = Path.GetFullPath("wwwroot\\Images\\") + file.FileInfo.Name;  

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

            file.Stream.WriteTo(filestream);  

            filestream.Close();  

            file.Stream.Close();  

  

            files.Add(new fileInfo() { Path = "/Images/" + file.FileInfo.Name , Name = file.FileInfo.Name, Size = file.FileInfo.Size });  

        }  

    }  

    public void onRemove(RemovingEventArgs args)  

    {  

        foreach (var removeFile in args.FilesData)  

        {  

            if (File.Exists(Path.Combine(@"wwwroot\Images", removeFile.Name)))  

            {  

                File.Delete(Path.Combine(@"wwwroot\Images\", removeFile.Name));  

             }  

        }  

    }  

  

    public void uploadFile(MouseEventArgs args)  

    {  

        this.uploderObj.Upload(selectedFile);  

    }  

}  

 

 

Also, removed the corresponding file when delete the file using the remove event.   

 

Addition to that create the Images folder inside the wwwroot folder in the application. Folder name can be customized as per you own, if you changed the folder name then, change the folder name in above highlighted line also.  

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Uploader_preview-42863592 

 

 

Kindly get back to us for further assistance. 

 

Regards,  

Sevvandhi N  

[Peter Guggenberger]

Hi together

 so far it seems to work.

How to only pick a directory ( only Directory no Files) 

to store a path for Application's   ( Setting's for Folders even on NetworkDrives, Path to Documents ...)

Kind Regards

[Sevvandhi Nagulan]

Hi Peter, 

Greetings from Syncfusion support. 

We couldn't choose an empty directory from the Uploader component. None of the events would be triggered if we choose the empty directory. This is intended behavior of HTML 5 uploader.  

When using the directory uploader, we can upload the directory which having some files and select event will be triggered at that moment. So, we request that you to provide the file store path manually in the application end. Please get back to us if you need further assistance. 

Regards, 

Sevvandhi N 

[Peter Guggenberger]

Hi Sevvandhi,

thank's for reply, i need this kind of directory Picker and that would be a great enhancement

( in fact is essential 😊 , cause a lot users are not able to type correct pathinfo to the app ;-) )

like this project Fugu API Tracker
on File System Access API showDirectoryPicker() … https://web.dev/file-system-access/

thanks in advance

[Sevvandhi Nagulan]

Hi Peter, 

Thanks for the information. 

We have validated the reported requirement. As previously stated, none of the events will be triggered if you chosen an empty option directly. Once we upload some files, events like selected and change will be triggered. Despite the fact that events are triggered, we are unable to obtain the desired directory/file path due to security concerns. Please find a list of blogs for your convenience. 

https://forums.asp.net/t/1917545.aspx?how+to+get+the+full+path+of+the+file+name+that+is+selected+using+fileupload+control 

https://stackoverflow.com/questions/53759070/how-to-get-path-directory-from-filereader 

Regards, 

Sevvandhi N 

[Muhammd Irfan]

 

sir this a project path concatenate. How to get Physical path where I brows file path

[Sevvandhi Nagulan]

Hi Muhammd,  

Greetings from Syncfusion support. 

You cannot get the selected file path in both client side and server side due to security reasons. Refer to the following common links for more information.  

https://forums.asp.net/t/1917545.aspx?how+to+get+the+full+path+of+the+file+name+that+is+selected+using+fileupload+control 

https://stackoverflow.com/questions/53759070/how-to-get-path-directory-from-filereader 

Kindly get back to us for further assistance. 

Regards,  

Sevvandhi N