1. Home
  2. Forum
  3. Blazor
  4. Filetype error in SfUploader

Filetype error in SfUploader

Hello,

Please look at the following code (versión 18.1.59) I'm getting an error in the SfUploader component saying that the filetype is invalid (I'm testing with a .png file). It was working in a previous version.


     <GridColumn Field=@nameof(PointsPrograms.PointsProgramLogo) HeaderText="Logo" Visible="true" AutoFit="true">
<Template>
@{
var program = context as PointsPrograms;
String imgSrc = noImage;
if (program.PointsProgramLogo != null) {
imgSrc = String.Format("data:image/png;base64,{0}", Convert.ToBase64String(program.PointsProgramLogo, 0, program.PointsProgramLogo.Length));
}
}
<div>
<img src="@imgSrc" class="rounded img-fluid" alt="Flag" />
</div>
</Template>
<EditTemplate>
@{
<p>Logo</p>
var program = context as PointsPrograms;
string imgSrc = null;
if (program.PointsProgramLogo != null)
{
imgSrc = String.Format("data:image/png;base64,{0}", Convert.ToBase64String(program.PointsProgramLogo, 0, program.PointsProgramLogo.Length));
<div>
<img src="@imgSrc" class="rounded mx-auto img-fluid" alt="Flag" />
</div>
}
<SfUploader AllowedExtensions=".jpg, .jpeg, .png" MaxFileSize=3000 Multiple="false">
<UploaderEvents ValueChange="OnChange"></UploaderEvents>
</SfUploader>
}
</EditTemplate>
</GridColumn>

Thanks,

Erick



11 Replies 1 reply marked as answer
PM Ponmani Murugaiyan Syncfusion Team July 20, 2020 07:21 AM UTC

Hi Erick, 

Greetings from Syncfusion support. 

We have validated the reported issue. This is the known bug in our end, we have resolved the issue in the Volume2 release.  We request you to upgrade to the latest version 18.2.45. Please find the sample below for reference. 

  
  
Please note that we have introduced several API break in the latest release. We would like you to review the breaking changes from the below location before you upgrade.  

  
Kindly check with the above sample. Please get back us if you need further assistance. 

Regards, 
Ponmani M

ER Erick July 20, 2020 04:01 PM UTC

Thank you very much for the response. I'll wait to the next service pack (I believe is due this week) because I've tested release 18.2.45 and there are issues with the templates inside Grid.
Regards,

erick

PM Ponmani Murugaiyan Syncfusion Team July 21, 2020 09:31 AM UTC

Hi Erick, 

Thanks for the update. Please get back us if you need further assistance. 

Regards, 
Ponmani M

ER Erick July 25, 2020 04:41 AM UTC

Hello,

I have updated my app to 18.2.46. However it seems that OnActionComplete event for SfUploader is never called, so my image is not saved on the database (via api call)

Could you please advise?

Regards,

erick

ER Erick July 25, 2020 04:51 AM UTC

One clarification. I meant that ValueChange function is not being called.


Regards,

Erick

PM Ponmani Murugaiyan Syncfusion Team July 27, 2020 09:34 AM UTC

Hi Erick,  

Thanks for the update. 

We have validated your reported issue “In version 18.2.46, SfUploader ValueChange event is not fired”. But unfortunately, the reported issue is not replicated in our end. We have prepared test sample and video demonstration below for your reference.  
 
 
 
Kindly check with the above sample. If issue still exists in your end or if we misunderstood your query, please provide the below details which will be helpful for us to provide you the solution at earliest. 

  1. Is the reported issue occurred while using SfUploader in Grid component?
  2. Please share the code snippet to replicate the issue in our end.
  3. Provide the issue reproducing sample if possible.
 
Regards, 
Ponmani M

ER Erick July 30, 2020 01:11 AM UTC

Hello,

I have verified that SfUploader do work by itself. However, I can't make it work while it's inside EditTemplate of a Grid instance.

The following is a snipped of code I'm using:

<SfGrid ID="MainGrid" @ref="@MainGrid" Query="@GridQuery" TValue="PointsPrograms" AllowPaging="true" AllowSorting="true" AllowReordering="true"
AllowResizing="true" AllowFiltering="false" AllowGrouping="false" ShowColumnChooser="true" Toolbar="@Tool">
<GridEvents OnActionBegin="ActionBeginHandler" TValue="PointsPrograms"></GridEvents>
<SfDataManager Url=@($"{apiURL}/pointsprograms") Adaptor="Adaptors.ODataV4Adaptor" CrossDomain="true"></SfDataManager>
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" ShowDeleteConfirmDialog="true" Mode="EditMode.Dialog">
<HeaderTemplate>
@{
var text = GetHeader((context as PointsPrograms));
<span>@text</span>
}
</HeaderTemplate>
</GridEditSettings>
<GridColumns>
<GridColumn Field=@nameof(PointsPrograms.Id) HeaderText="Id" IsPrimaryKey="true" IsIdentity="true" AllowEditing="false" Visible="false" ShowInColumnChooser="false"></GridColumn>
<GridColumn Field=@nameof(PointsPrograms.PointsProgramLogo) HeaderText="Logo" Visible="true" AutoFit="true">
<Template>
@{
var program = context as PointsPrograms;
String imgSrc = noImage;
if (program.PointsProgramLogo != null) {
imgSrc = String.Format("data:image/png;base64,{0}", Convert.ToBase64String(program.PointsProgramLogo, 0, program.PointsProgramLogo.Length));
}
}
<div>
<img src="@imgSrc" class="rounded img-fluid" alt="Flag" />
</div>
</Template>
<EditTemplate>
@{
<p>Logo</p>
var program = context as PointsPrograms;
string imgSrc = noImage;
if (program.PointsProgramLogo != null)
{
imgSrc = String.Format("data:image/png;base64,{0}", Convert.ToBase64String(program.PointsProgramLogo, 0, program.PointsProgramLogo.Length));
}
<div>
<img src="@imgSrc" class="rounded mx-auto img-fluid" alt="Logo" />
</div>
<SfUploader AllowedExtensions=".jpg, .jpeg, .png" MaxFileSize=3000 Multiple="false">
<UploaderEvents ValueChange="UploadChange"></UploaderEvents>
</SfUploader>
}
</EditTemplate>
</GridColumn>
...

The ValueChange event copies the image content from the Stream to a variable

public void UploadChange(UploadChangeEventArgs args)
{
Console.WriteLine("UploadChange");
uploadedImg = args.Files[0].Stream.ToArray();
}

so I can update it in args.Data inside ActionBeginHandler before it is sen

public void ActionBeginHandler(ActionEventArgs<PointsPrograms> args)
{
Console.WriteLine("args.RequestType");
if (args.RequestType == Syncfusion.Blazor.Grids.Action.Save)
{
...

args.Data.PointsProgramLogo = uploadedImg;

...
}
if (args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit)
{
...
}
}

I have added a Grid in the example you sent. Attached you will find the project. There are two SfUploaders in the example (one inside the grid EditTemplate and one standalone). I have noticed that the standalone uploader component shows the message File Uploaded Successfully, while the component inside grid edit template shows Ready to Upload (this after selecting a file). Following are the two images of the scenarios.

I'm doing something wrong but can't find what it is.

Thanks again for your help,

erick









Attachment: BlazorServerSideLocalization_upload_within_grid_aa25f2f6.zip

PM Ponmani Murugaiyan Syncfusion Team July 30, 2020 04:51 PM UTC

Hi Erick, 

Thanks for the update. 

We would like to inform you that, while place the Uploader component inside the EditForm or Grid Edit Template, then Upload and Cancel button will not be shown. This is the default behavior of the Uploader component. We need to call the Upload method manually to save the selected file in the Uploader component as like below code snippet. 

public async Task HandleValidSubmit() 
    { 
        await this.UploadObj.Upload(); 
    } 
 

Also, attached the sample for your reference with the uploader component. 

 
With the above provided suggestion, we request you to make changes in your application that it requires the upload method call to upload the files. You can achieve this either in button click or Dialog close or Form save or submit to save the selected files. 

Please get back us if you need further assistance. 

Regards, 
Ponmani M 



ER Erick July 31, 2020 01:12 AM UTC

Hello,

Thanks for your response. I've made the changes you described but are getting the error:

RAZORGENERATE : error RZ9999: The child content element 'ChildContent' of component 'EditForm' uses the same parameter name ('context') as enclosing child content element 'EditTemplate' of component 'GridColumn'. Specify the parameter name like: '<ChildContent Context="another_name"> to resolve the ambiguity [/Users/efuentes/Documents/Proyectos/XARetailApp/XARetail.Web/XARetail.Web.csproj]

The code is:

<GridColumn Field=@nameof(PointsPrograms.PointsProgramLogo) HeaderText="Logo" Visible="true" AutoFit="true">
<Template>
@{
var program = context as PointsPrograms;
String imgSrc = noImage;
if (program.PointsProgramLogo != null) {
imgSrc = String.Format("data:image/png;base64,{0}", Convert.ToBase64String(program.PointsProgramLogo, 0, program.PointsProgramLogo.Length));
}
}
<div>
<img src="@imgSrc" class="rounded img-fluid" alt="Flag" />
</div>
</Template>
<EditTemplate>
@{
<p>Logo</p>
var program = context as PointsPrograms;
string imgSrc = noImage;
if (program.PointsProgramLogo != null)
{
imgSrc = String.Format("data:image/png;base64,{0}", Convert.ToBase64String(program.PointsProgramLogo, 0, program.PointsProgramLogo.Length));
}
<div>
<img src="@imgSrc" class="rounded mx-auto img-fluid" alt="Logo" />
</div>
<EditForm Model="@(context as PointsPrograms)" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="@HandleInvalidSubmit">
<DataAnnotationsValidator />
<div class="form-group">
<SfUploader @ref="@UploadObj" AllowedExtensions=".jpg, .jpeg, .png" MaxFileSize=3000 Multiple="false">
<UploaderEvents ValueChange="UploadChange"></UploaderEvents>
</SfUploader>
</div>
<button type="submit" class="btn btn-primary">Confirmar</button>
</EditForm>
}
</EditTemplate>
</GridColumn>

Thanks in advance for your response.

erick


ER Erick July 31, 2020 01:18 AM UTC

I believe EditForm should not be nested inside EditTemplate. What should be the event that triggers the call to this.UploadObj.Upload()?

Thanks,

erick

PM Ponmani Murugaiyan Syncfusion Team August 3, 2020 10:09 AM UTC

Hi Erick,  

Thanks for the patience. 

Query1: I've made the changes you described but are getting the error: 
 
You have placed an EditForm inside the EditTemplate and so the reported issue occurs. So we suggest you to use Uploader inside the EditTemplate and remove the EditForm. 

Query2: What should be the event that triggers the call to this.UploadObj.Upload()? 

We suggest you to use the OnActionBegin event of the grid to invoke the upload method. We have prepared sample for your reference. Please find below. 

<SfGrid DataSource="@Employees" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 
   <GridEvents OnActionBegin="ActionBeginHandler" TValue="EmployeeData"></GridEvents> 
... 
 
<EditTemplate> 
   <SfUploader @ref="UploaderObj" ID="UploadFiles" AllowedExtensions=".jpg, .jpeg, .png" MaxFileSize=300000 Multiple="false"> 
   <UploaderEvents ValueChange="OnChange"></UploaderEvents> 
   </SfUploader> 
</EditTemplate> 
 
@code { 
        SfUploader UploaderObj; 
        public void ActionBeginHandler(ActionEventArgs<EmployeeData> args) 
        { 
            if (this.UploaderObj != null) 
            { 
                this.UploaderObj.Upload(); 
            } 
        } 
} 

 
Please get back us, if you need further assistance. 

Regards, 
Ponmani M

Marked as answer
Loader.
Up arrow icon