1. Home
  2. Forum
  3. Blazor
  4. How to change filename of file uploaded from client

How to change filename of file uploaded from client

Hi,

   I have a form with file upload and other fields, I want to set a unique filename from client so that I can capture that filename and add to my form submission?

  This is the model
 public partial class TblImageTransMaster
    {
        [Key]
        [Column("INDEXER")]
        public Guid Indexer { get; set; }
        [Column("CLINIC_INDEXER")]
        public Guid? ClinicIndexer { get; set; }
        [Column("IMAGEDESCRIPTION")]
        [StringLength(258)]
        public string Imagedescription { get; set; }
        [Column("REMARKS", TypeName = "text")]
        public string Remarks { get; set; }
        [Column("IMG", TypeName = "image")]
        public byte[] Img { get; set; }
        [Column("TRANSDATE", TypeName = "datetime")]
        public DateTime? Transdate { get; set; }
        [Column("TRANSNO")]
        [StringLength(58)]
        public string Transno { get; set; }
        [Column("CREATEDBY")]
        public Guid? Createdby { get; set; }
        [Column("CREATEDDATE", TypeName = "datetime")]
        public DateTime? Createddate { get; set; }
        [Column("UPDATEDBY")]
        public Guid? Updatedby { get; set; }
        [Column("UPDATEDDATE", TypeName = "datetime")]
        public DateTime? Updateddate { get; set; }
        [Column("DELFLAG")]
        public bool? Delflag { get; set; }
        [Column("DELETEDBY")]
        public Guid? Deletedby { get; set; }
        [Column("DELETEDDATE", TypeName = "datetime")]
        public DateTime? Deleteddate { get; set; }
        [Column("PATIENT_INDEXER")]
        public Guid? PatientIndexer { get; set; }
        [Column("FILENAME")]
        [StringLength(258)]
        public string Filename { get; set; }
        [Column("LOCATION_INDEXER")]
        public Guid? LocationIndexer { get; set; }

    
    }  
  I want  to set the filename to whatever value of my primary key so that I can easily tag/link the image file to my record. Also, upon upload, i always get upload failed.

I am attaching a sample.




Thanks.

   

Attachment: FILEUPLOAD_4972c301.rar

11 Replies 1 reply marked as answer
JM Jeyanth Muthu Pratheeban Sankara Subramanian Syncfusion Team March 9, 2021 10:42 AM UTC

Hi Martin, 

Greetings from Syncfusion support. 

We have checked your query of changing the file name in the client end. We would like to know you that you can modify the name of the file when the file is selected. FileSelected event will trigger when a file is chosen from the explorer. You can get the list of files chosen in the FileSelected event args from which you can change the name of the selected file. Also, you need to set isModified as true and assign the changed the file details to ModifiedFilesData. We have modified the attached sample. Please find the sample in the below link.

Also, on analyzing the controller part, you have used two methods named Save. Therefore, on accessing the save method leads to ambiguity which causes the file failed to upload. So we suggest you to provide distinct name for the save and remove methods in the controller.


 
 


Code Snippet:

 
public void OnFileSelected(SelectedEventArgs args) 
    { 
        foreach(var file in args.FilesData) 
        { 
            file.Name = file.Name + "modified"; 
        } 
        args.IsModified = true; 
        args.ModifiedFilesData = args.FilesData; 
    } 
 
 


Please let us know if you need any further assistance.

 
Regards, 
Jeyanth. 


Marked as answer
MS Martin Sato replied to Jeyanth Muthu Pratheeban Sankara Subramanian March 9, 2021 03:34 PM UTC

Hi Martin, 

Greetings from Syncfusion support. 

We have checked your query of changing the file name in the client end. We would like to know you that you can modify the name of the file when the file is selected. FileSelected event will trigger when a file is chosen from the explorer. You can get the list of files chosen in the FileSelected event args from which you can change the name of the selected file. Also, you need to set isModified as true and assign the changed the file details to ModifiedFilesData. We have modified the attached sample. Please find the sample in the below link.

Also, on analyzing the controller part, you have used two methods named Save. Therefore, on accessing the save method leads to ambiguity which causes the file failed to upload. So we suggest you to provide distinct name for the save and remove methods in the controller.


 
 


Code Snippet:

 
public void OnFileSelected(SelectedEventArgs args) 
    { 
        foreach(var file in args.FilesData) 
        { 
            file.Name = file.Name + "modified"; 
        } 
        args.IsModified = true; 
        args.ModifiedFilesData = args.FilesData; 
    } 
 
 


Please let us know if you need any further assistance.

 
Regards, 
Jeyanth. 


Hi, I have tested it and it's working perfectly.


Thanks.

JM Jeyanth Muthu Pratheeban Sankara Subramanian Syncfusion Team March 10, 2021 04:51 AM UTC

Hi Martin, 

We are glad to know that your issue has been resolved. Please let us know if you need any further assistance on this. 

Regards, 
Jeyanth. 


MS Martin Sato replied to Jeyanth Muthu Pratheeban Sankara Subramanian March 10, 2021 05:18 AM UTC

Hi Martin, 

We are glad to know that your issue has been resolved. Please let us know if you need any further assistance on this. 

Regards, 
Jeyanth. 


Hi,

  I have this strange behaviour, for sfuploader during update of a transaction, the first click of the component and select file, nothing happens, it just refreshes the 2nd time I selected file it's working fine.

 please see attached video file.

Attachment: sfuploader_update_issue_fd09ffc4.rar

MS Martin Sato replied to Martin Sato March 10, 2021 07:32 AM UTC

Hi Martin, 

We are glad to know that your issue has been resolved. Please let us know if you need any further assistance on this. 

Regards, 
Jeyanth. 


Hi,

  I have this strange behaviour, for sfuploader during update of a transaction, the first click of the component and select file, nothing happens, it just refreshes the 2nd time I selected file it's working fine.

 please see attached video file.

Attachment: sfuploader_update_issue_fd09ffc4.rar

Also, is it possible to use sfuploader like 

<input type="file" accept="image/*">

Wherein, user can either capture/select existing image from phone?

Thanks.

JM Jeyanth Muthu Pratheeban Sankara Subramanian Syncfusion Team March 11, 2021 10:54 AM UTC

Hi Martin, 

Thanks for your update. 

Please find the details below.

Query 1:

I have this strange behaviour, for sfuploader during update of a transaction, the first click of the component and select file, nothing happens, it just refreshes the 2nd time I selected file it's working fine.

Response:

We have validated your query and ensured the reported behavior with your attached project in the previous update. Unfortunately, we could not replicate the issue and it is working good in the first selection. On analyzing the attached video, you have integrated the Uploader inside a dialog. We are in need of below information to validate the issue further. 

  1. Whether you are using SfDialog or any other modals used.
  2. Whether you rendered Uploader inside a form.
  3. If possible reproduce the reported issue in the attached sample.

Query 2: 

Also, is it possible to use sfuploader like  

<input type="file" accept="image/*"> 

Wherein, user can either capture/select existing image from phone? 

Response:

We would like to know you that if you configure AllowedExtensions property as list of image formats, accept attribute will automatically added to the input element and it accepts only the image with those specified formats also allows to take instant picture from camera. You can also configure the AllowedExtensions property as “image/*” to accept only image files. Please refer to the below code snippet and screenshot.


 
 <SfUploader ID="UploadFiles" AutoUpload="false" AllowMultiple=false 
                        AllowedExtensions="image/*"> 
                <UploaderEvents ValueChange="OnChange" FileSelected="OnFileSelected"></UploaderEvents> 
                <UploaderAsyncSettings SaveUrl="Images/Save" 
                                       RemoveUrl="Images/Remove"> 
 
                </UploaderAsyncSettings> 
            </SfUploader> 
 



Regards, 
Jeyanth.

MS Martin Sato replied to Jeyanth Muthu Pratheeban Sankara Subramanian March 11, 2021 01:35 PM UTC

Hi Martin, 

Thanks for your update. 

Please find the details below.

Query 1:

I have this strange behaviour, for sfuploader during update of a transaction, the first click of the component and select file, nothing happens, it just refreshes the 2nd time I selected file it's working fine.

Response:

We have validated your query and ensured the reported behavior with your attached project in the previous update. Unfortunately, we could not replicate the issue and it is working good in the first selection. On analyzing the attached video, you have integrated the Uploader inside a dialog. We are in need of below information to validate the issue further. 

  1. Whether you are using SfDialog or any other modals used.
  2. Whether you rendered Uploader inside a form.
  3. If possible reproduce the reported issue in the attached sample.

Query 2: 

Also, is it possible to use sfuploader like  

<input type="file" accept="image/*"> 

Wherein, user can either capture/select existing image from phone? 

Response:

We would like to know you that if you configure AllowedExtensions property as list of image formats, accept attribute will automatically added to the input element and it accepts only the image with those specified formats also allows to take instant picture from camera. You can also configure the AllowedExtensions property as “image/*” to accept only image files. Please refer to the below code snippet and screenshot.


 
 <SfUploader ID="UploadFiles" AutoUpload="false" AllowMultiple=false 
                        AllowedExtensions="image/*"> 
                <UploaderEvents ValueChange="OnChange" FileSelected="OnFileSelected"></UploaderEvents> 
                <UploaderAsyncSettings SaveUrl="Images/Save" 
                                       RemoveUrl="Images/Remove"> 
 
                </UploaderAsyncSettings> 
            </SfUploader> 
 



Regards, 
Jeyanth.

Hi,

  When I run it, it suddenly hits a break, but there are is no breakpoint set, please see attached photo, this happens when I select a file, maybe this is the reason, it works the second time.



Thanks.

MS Martin Sato replied to Martin Sato March 11, 2021 01:40 PM UTC

Hi Martin, 

Thanks for your update. 

Please find the details below.

Query 1:

I have this strange behaviour, for sfuploader during update of a transaction, the first click of the component and select file, nothing happens, it just refreshes the 2nd time I selected file it's working fine.

Response:

We have validated your query and ensured the reported behavior with your attached project in the previous update. Unfortunately, we could not replicate the issue and it is working good in the first selection. On analyzing the attached video, you have integrated the Uploader inside a dialog. We are in need of below information to validate the issue further. 

  1. Whether you are using SfDialog or any other modals used.
  2. Whether you rendered Uploader inside a form.
  3. If possible reproduce the reported issue in the attached sample.

Query 2: 

Also, is it possible to use sfuploader like  

<input type="file" accept="image/*"> 

Wherein, user can either capture/select existing image from phone? 

Response:

We would like to know you that if you configure AllowedExtensions property as list of image formats, accept attribute will automatically added to the input element and it accepts only the image with those specified formats also allows to take instant picture from camera. You can also configure the AllowedExtensions property as “image/*” to accept only image files. Please refer to the below code snippet and screenshot.


 
 <SfUploader ID="UploadFiles" AutoUpload="false" AllowMultiple=false 
                        AllowedExtensions="image/*"> 
                <UploaderEvents ValueChange="OnChange" FileSelected="OnFileSelected"></UploaderEvents> 
                <UploaderAsyncSettings SaveUrl="Images/Save" 
                                       RemoveUrl="Images/Remove"> 
 
                </UploaderAsyncSettings> 
            </SfUploader> 
 



Regards, 
Jeyanth.

Hi,

  When I run it, it suddenly hits a break, but there are is no breakpoint set, please see attached photo, this happens when I select a file, maybe this is the reason, it works the second time.



Thanks.

For your question

  1. Whether you are using SfDialog or any other modals used. - Yes, I am using SfDialog, during Add New, it's working fine, but during update, that's where the problem persist.
  2. Whether you rendered Uploader inside a form. -Yes I am using EditForm
  3. If possible reproduce the reported issue in the attached sample. I will try to simplify my project and send it.
Thanks.

JM Jeyanth Muthu Pratheeban Sankara Subramanian Syncfusion Team March 12, 2021 01:37 PM UTC

Hello Martin, 

Thanks for your update. 

We have checked the reported issue based on the provided information. Unfortunately we could not replicate the issue when placing SfUploader inside EditForm of SfDialog. Here we have attached the ensured sample in the below link. Kindly check the same and if possible reproduce the reported issue in the attached sample. We have also checked the reported issue of breakpoint is hitting in OnAfterRenderasync(). We could reproduce the reported issue and it does not occur any more after removing the breakpoints using “Delete all breakpoints” in Debug menu. 


Regards, 
Jeyanth. 


MA Marco February 8, 2023 06:30 PM UTC

Hi Support!


I know this is an old thread, but I just found out an issue related to it.


Although the solution proposed for the first question works well to change the NAME of the file, it does not work when trying to change the file STATUS.


I'm trying to customize the status message, by showing the maximum size allowed for a file, with the following code:


    private void OnFileSelected(SelectedEventArgs args)
    {
        if (!args.IsCanceled)
        {
            var fileInfo = args.FilesData[0];
            var msgs = fileInfo.ValidationMessages;
            if (FileExceedsMaxSize(msgs))
            {
                args.IsModified = true;
                args.ModifiedFilesData = args.FilesData;
                args.ModifiedFilesData[0].Status = msgs.MaxSize.Replace("{0}", _maxFileSize.ToString());
            }
        }
    }



However, the message show is still the one with the placeholder ({0}) as specified in my Resources file (.resx).


P.S.: I had already used a similar approach for Angular Syncfusion File Uploader and it worked fine.


Please advise.


Regards,

Marco.


SP Sureshkumar P Syncfusion Team February 13, 2023 12:50 PM UTC

Hi Marco,

You can refer the below public forum answers to achieve your requirements.

Forum:

  1. https://www.syncfusion.com/forums/176802

  2. https://www.syncfusion.com/forums/163492   

Regards,

Sureshkumar P


Loader.
Up arrow icon