1. Home
  2. Forum
  3. Blazor
  4. Get file source path before upload

Get file source path before upload

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

11 Replies 1 reply marked as answer
SN Sevvandhi Nagulan Syncfusion Team July 10, 2020 09:07 AM UTC

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:  
 
 
 
 
Regards, 
Sevvandhi N 



Marked as answer
RT Rolando Tonin July 10, 2020 09:13 AM UTC

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

SN Sevvandhi Nagulan Syncfusion Team July 13, 2020 10:55 AM UTC

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. 




Regards, 
Sevvandhi N 


BD Boot Dat replied to Sevvandhi Nagulan August 6, 2021 09:44 AM UTC

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 !

viewimage.PNG


SN Sevvandhi Nagulan Syncfusion Team August 9, 2021 12:48 PM UTC

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.  


 
 
 
Kindly get back to us for further assistance. 


 
Regards,  
Sevvandhi N  


PG Peter Guggenberger replied to Sevvandhi Nagulan August 10, 2021 05:44 AM UTC

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



SN Sevvandhi Nagulan Syncfusion Team August 11, 2021 07:43 AM UTC

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 


PG Peter Guggenberger August 11, 2021 01:32 PM UTC

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


SN Sevvandhi Nagulan Syncfusion Team August 12, 2021 12:52 PM UTC

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. 





Regards, 
Sevvandhi N 


MI Muhammd Irfan replied to Sevvandhi Nagulan August 24, 2021 11:54 AM UTC

download.png 

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


SN Sevvandhi Nagulan Syncfusion Team August 25, 2021 07:24 AM UTC

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.  





Kindly get back to us for further assistance. 

Regards,  
Sevvandhi N 


Loader.
Up arrow icon