FileUpload does not work anymore

Hi,

I just updated the syncfusion components.
Now, when using SfUploader i didnt get the file on the ValueChange Event.
The Stream is always of Size 0

Version: 18.1.0.55
.net core 3.1.4

Thanks and regards


16 Replies

SP Sureshkumar P Syncfusion Team June 9, 2020 07:51 AM UTC

Hi Michael, 
 
Greetings from Syncfusion support. 
 
Based on your shared information, we suspect that you have used uploader component inside the editform. This is default behavior or our component inside editform we need to call the upload method manually.  
 
Kindly refer the below code example. 
@using Syncfusion.Blazor.Inputs 
@using System.IO; 
@using System.ComponentModel.DataAnnotations 
 
    <EditForm Model="@employee" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="@HandleInvalidSubmit"> 
        <DataAnnotationsValidator /> 
        <div class="form-group"> 
           <SfTextBox @bind-Value="@employee.EmpID"></SfTextBox> 
        </div> 
        <div class="form-group"> 
            <SfUploader @ref="UploadObj" ID="UploadFiles"> 
                <UploaderEvents ValueChange="OnChange"></UploaderEvents> 
            </SfUploader> 
        </div> 
        <button type="submit" class="btn btn-primary">Register</button> 
    </EditForm> 
 
@code{ 
    SfUploader UploadObj; 
 
    public void OnChange(UploadChangeEventArgs args) 
    { 
        foreach (var file in args.Files) 
        { 
            var path = @"D:\" + file.FileInfo.Name; 
            FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write); 
            file.Stream.WriteTo(filestream); 
            filestream.Close(); 
            file.Stream.Close(); 
        } 
    } 
 
    public Employee employee = new Employee(); 
 
    public async Task HandleValidSubmit() 
    { 
        //you can upload the file after validate the form content using upload method 
        await this.UploadObj.Upload(); 
    } 
    public void HandleInvalidSubmit() 
    { 
 
    } 
 
    public class Employee 
    { 
        [Required(ErrorMessage = "Employee ID is required")] 
        public string EmpID { get; set; } 
 
    } 
} 
 
 
Please find the screen shot here: 
 
 
We have created the sample based on your scenario. Please find the sample here: https://www.syncfusion.com/downloads/support/directtrac/general/ze/uploaderEditForm-881449928  
 
If we misunderstood your requirement. please revert us with below details. 
1.     Whether you have used assyncSettings property or not? 
2.     Whether you have rendered uploader component inside editform or not? 
3.     Whether you have faced the issue any specific Syncfusion version or not? 
4.     If you can reproduce the issue in the above attached sample, then please revert us with details issue replication procedure. 
These details will help us to provide exact solution as earlier as possible. 
 
Regards, 
Sureshkumar P 



MS Michael Sandler June 9, 2020 10:02 AM UTC

Hi,
I used SfUploader without EditForm and i use it async.
In previous version of Syncfusion this was not a problem.

Sample:

 private async Task OnUploadImageAsync(UploadChangeEventArgs args) {
      try {
        if (args == null || args.Files == null || args.Files.Count == 0)
          throw new Exception("Wrong File");
        if (args.Files.Count > 1)
          throw new Exception("Multiple file upload disabled");
        var file = args.Files.FirstOrDefault();
        var fileObj = file.FileInfo.RawFile;
        using MemoryStream stream = new MemoryStream();
        file.Stream.WriteTo(stream);    <--- file.Stream Length = 0

If you need aditional info, please write me.

Thanks and regards Michael



TK Timo Kern June 9, 2020 10:10 AM UTC

Hi,

I have the same problem.


Code Example .razor:
<ToolbarItem Type="ItemType.Input">
                <Template>
                    <SfUploader AllowedExtensions=".csv" @ref="@FileUploadDialog"          Buttons="@ImportButtonProps" ShowFileList="false" Locale="de" ID="MyFileUploadDialog">
                        <UploaderEvents ValueChange="DoImport"></UploaderEvents>
                    </SfUploader>
                </Template>
</ToolbarItem>

.razor.cs:
private async void DoImport(UploadChangeEventArgs args)
{
      foreach (var file in args.Files)
      {
                long size = file.Stream.Length;
                byte[] csvBytes = file.Stream.ToArray();
                // Both are 0
       }
}


ST Stefan June 9, 2020 05:00 PM UTC

i have similar problem. 

when i use this:
<SfUploader>
    <UploaderAsyncSettings SaveUrl="UploadFile"></UploaderAsyncSettings>
</SfUploader>

with this controller:
[HttpPost]
        public async Task<ActionResult> Post()
        {
            try
            {
                var share = GetContainer();
                string fileName = "Test.docx";

                var directory = share.GetDirectoryClient("Test");
                await directory.CreateIfNotExistsAsync();

                var file = directory.GetFileClient(fileName);

                await file.UploadAsync(Request.Body);
            }
            catch (Exception)
            {
                return new BadRequestObjectResult("Error saving file");
            }

            return new OkObjectResult("ok");
        }



After the program executes every line of the vontroller i get this





SP Sureshkumar P Syncfusion Team June 10, 2020 10:33 AM UTC

Hi All, 
 
Thanks for your update.  
 
When using assyncSettings property in your application, inside the change event you cannot able to access the files. This is the default behavior of our uploader component. So, we suggest you use uploader component without assyncSettings property to achieve your requirement.  
 
Also, we suspect that you want to know the selected files fileSize (length). So, we suggest you refer the below highlighted code to achieve your requirement. 
 
Please find the code example here: 
 <SfUploader @ref="UploadObj" ID="UploadFiles"> 
                <UploaderEvents ValueChange="OnChange">UploaderEvents> 
            SfUploader> 
public void OnChange(UploadChangeEventArgs args) 
    { 
        foreach (var file in args.Files) 
        { 
            var size = file.FileInfo.Size; 
            var path = @"D:\" + file.FileInfo.Name; 
            FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write); 
            file.Stream.WriteTo(filestream); 
            filestream.Close(); 
            file.Stream.Close(); 
        } 
    } 
 
 
If we misunderstood your requirement. please revert us with below details. 
1.     In which version (your mentioned previous version) you can get the filestream.length value in your application. 
2.     If possible, please attach the issue replicated sample with detailed issue replication procedure. 
These details will help us to provide exact solution as earlier as possible. 
 
Regards, 
Sureshkumar P 
 
 



MS Michael Sandler June 10, 2020 03:44 PM UTC

Hi!

I tried to change my method to sync version, but with no success.
Then I tested your code snippet, and it is also not working.
I get the size from the file (file.FileInfo.Size), but the Stream (file.Stream) has a Length of 0
Also file.FileInfo.RawFile has a Count of 0.
If you can't reproduce it, i could try to make a sample project.

I am using version 18.1.0.56, also tried 18.1.0.55.
Working version was (i think) 18.1.0.48. With that version it was also possible to use the function async.

Thanks and regards
Michael


MS Michael Sandler June 10, 2020 03:45 PM UTC

Additional info:
I am using Server-Side-Blazor....

Regards Michael


SP Sureshkumar P Syncfusion Team June 11, 2020 12:15 PM UTC

Hi Michael, 
 
Thanks for your update. 
 
We are trying to replicate the reported issue from our end. in the meantime, can you please share issue reproduce sample or video demonstration/pictorial representation. That will help us to sort out the issue and provide exact solution as earlier as possible. 
 
Regards, 
Sureshkumar p 



AB Abdul August 13, 2021 05:05 AM UTC

Do we have any solution for this issue, we are also facing same issue.

Thanks



BC Berly Christopher Syncfusion Team August 13, 2021 01:47 PM UTC

Hi Abdul, 
  
We suggest you to upgrade the Syncfusion Product version to the latest version to resolve the reported issue. Still issue persists, please share the below requested details that will help us to check and proceed further from our end. 
  
·       Code example of component rendering 
·       Syncfusion NuGet version 
·       Screenshot of faced issue in the application. 
·       Simple issue reproducing sample (if possible) 
  
Regards, 
Berly B.C 



RA René Astad Dupont April 18, 2023 10:54 AM UTC

Hi

I suddenly have got this error, using the latesst version of Syncfusion. The same code has worked before

the stream field is null, eve tougth that the Upload function seems to be working as exspected.

I have tried both the sync and the async versions.

I dont get any error messages





SP Sureshkumar P Syncfusion Team April 19, 2023 10:42 AM UTC

Hi René,

We would like to inform you that there have been breaking changes in the 21.1.35 version onwards for the file stream argument for the Change event. We recommend referring to the release notes for more information on these changes. You can find the release notes on the Syncfusion Blazor documentation page here: https://blazor.syncfusion.com/documentation/release-notes/21.1.35?type=all#breaking-changes-7

We suggest using the updated code provided in the release notes to resolve the issue you are facing.

code changes here:


Regards,

Sureshkumar P



RA René Astad Dupont April 19, 2023 02:36 PM UTC

Thak you, This solved my issue.



UD UdhayaKumar Duraisamy Syncfusion Team April 20, 2023 04:43 AM UTC

We are happy to assist you. Please get back to us if you need any further assistance on this.



PE Peter January 16, 2024 02:09 PM UTC

Hi Support Team,


I have adapted the implementation as mentioned, but I am receiving a JS error:

Microsoft.JSInterop.JSException

  HResult=0x80131500

  Message=Cannot read properties of null (reading '_blazorFilesById')

TypeError: Cannot read properties of null (reading '_blazorFilesById')

    at Ze (https://localhost:5001/_framework/blazor.server.js:1:37264)

    at Object.readFileData (https://localhost:5001/_framework/blazor.server.js:1:37222)

    at https://localhost:5001/_framework/blazor.server.js:1:3244

    at new Promise (<anonymous>)

    at y.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.server.js:1:3201)

    at Yt._invokeClientMethod (https://localhost:5001/_framework/blazor.server.js:1:61041)

    at Yt._processIncomingData (https://localhost:5001/_framework/blazor.server.js:1:58516)

    at Yt.connection.onreceive (https://localhost:5001/_framework/blazor.server.js:1:52157)

    at s.onmessage (https://localhost:5001/_framework/blazor.server.js:1:80302)

  Source=System.Private.CoreLib

  StackTrace:

   at System.Threading.Tasks.ValueTask`1.get_Result() in /_/src/libraries/System.Private.CoreLib/src/System/Threading/Tasks/ValueTask.cs:line 812

   at Microsoft.AspNetCore.Components.Forms.BrowserFileStream.<OpenReadStreamAsync>d__29.MoveNext() in Microsoft.AspNetCore.Components.Forms\BrowserFileStream.cs:line 105

   at Microsoft.AspNetCore.Components.Forms.BrowserFileStream.<CopyFileDataIntoBuffer>d__30.MoveNext() in Microsoft.AspNetCore.Components.Forms\BrowserFileStream.cs:line 112

   at System.Threading.Tasks.ValueTask`1.get_Result() in /_/src/libraries/System.Private.CoreLib/src/System/Threading/Tasks/ValueTask.cs:line 816

   at System.Runtime.CompilerServices.ValueTaskAwaiter`1.GetResult() in /_/src/libraries/System.Private.CoreLib/src/System/Runtime/CompilerServices/ValueTaskAwaiter.cs:line 126

   at Microsoft.AspNetCore.Components.Forms.BrowserFileStream.<ReadAsync>d__28.MoveNext() in Microsoft.AspNetCore.Components.Forms\BrowserFileStream.cs:line 98

   at System.IO.Stream.<<CopyToAsync>g__Core|27_0>d.MoveNext() in /_/src/libraries/System.Private.CoreLib/src/System/IO/Stream.cs:line 108

   at BlazorCommon.Components.Admin.BcAdminDomainPreOnboardingComponentBase.<OnFileUpload>d__21.MoveNext() in D:\develop.n8\Shared\BlazorMgtCommon\Components\Admin\BcAdminDomainPreOnboardingComponent.razor.cs:line 107


  This exception was originally thrown at this call stack:

    System.Threading.Tasks.ValueTask<TResult>.Result.get() in ValueTask.cs

    Microsoft.AspNetCore.Components.Forms.BrowserFileStream.OpenReadStreamAsync(System.Threading.CancellationToken) in BrowserFileStream.cs

    Microsoft.AspNetCore.Components.Forms.BrowserFileStream.CopyFileDataIntoBuffer(System.Memory<byte>, System.Threading.CancellationToken) in BrowserFileStream.cs

    System.Threading.Tasks.ValueTask<TResult>.Result.get() in ValueTask.cs

    System.Runtime.CompilerServices.ValueTaskAwaiter<TResult>.GetResult() in ValueTaskAwaiter.cs

    Microsoft.AspNetCore.Components.Forms.BrowserFileStream.ReadAsync(System.Memory<byte>, System.Threading.CancellationToken) in BrowserFileStream.cs

    System.IO.Stream.CopyToAsync.__Core|27_0(System.IO.Stream, System.IO.Stream, int, System.Threading.CancellationToken) in Stream.cs

    BlazorCommon.Components.Admin.BcAdminDomainPreOnboardingComponentBase.OnFileUpload(Syncfusion.Blazor.Inputs.UploadChangeEventArgs) in BcAdminDomainPreOnboardingComponent.razor.cs

I am using V24.1.45 (migrated from latest V20)

Razor snippet:

<SfUploader AllowMultiple=false >

<UploaderEvents ValueChange=this.OnFileUpload />

</SfUploader>


CS snippet:

protected async void OnFileUpload(UploadChangeEventArgs args)

{

if (args.Files.Count != 1)

{

BcApplication.ShowMsgBox(this.BcaApp, "Please select a single file!");

return;

}


using MemoryStream oImportStream = new();

using Stream oUploadStream = args.Files[0].File.OpenReadStream(10 * 1024 * 1024);

await oUploadStream.CopyToAsync(oImportStream);


It doesn't matter if FileStream or MemoryStream is used as the target of the CopyToAsync.

I would appreciate it if you could point me to how to troubleshoot the issue.

Peter



KP Kokila Poovendran Syncfusion Team January 25, 2024 08:28 AM UTC

Hi Peter,


Thank you for reaching out to us and providing details about the issue you're encountering. We understand the importance of resolving this matter promptly.


After carefully reviewing your query and attempting to replicate the issue on our end, we were unable to encounter the reported JS error. To better assist you, we kindly request additional details. If possible, could you share a more comprehensive code snippet that replicates the issue? Alternatively, you may modify the provided sample to reflect your scenario.


Additionally, a video illustration of the problem would greatly enhance our ability to pinpoint and address the root cause. Your cooperation in providing these details will enable us to offer a more accurate and prompt solution.

Samplehttps://blazorplayground.syncfusion.com/VDBfNCVoUDfDRQKJ


Thank you for your understanding and collaboration. We are committed to resolving this matter to your satisfaction.


Regards,
Kokila Poovendran.


Loader.
Up arrow icon