Using SfUploader and FileInfo is null on Upload

It seems that the issue you're encountering is related to accessing the FileInfo properties in the ValueChange handler of the File Upload component. Based on your scenario, we have reviewed the implementation and provided a solution to handle the uploaded files effectively.

Here is the updated implementation:

Hi UdhayaKumar

Seems this part works now.

But working further on your sample on uploading the file:

            var FileData = args.Files.FirstOrDefault();

            if (FileData != null)

            {

                var FileName = FileData.File.Name;

                var firstFileFileInfo = FileData.FileInfo;

                var firstFileFileInfoName = firstFileFileInfo.Name;

                await js.InvokeVoidAsync("alert", "Uploading " + firstFileFileInfoName);

                var path = @"" + firstFileFileInfoName;

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

                await FileData.File.OpenReadStream(long.MaxValue).CopyToAsync(filestream);

                filestream.Close();

                await js.InvokeVoidAsync("alert", "Uploaded " + firstFileFileInfoName + " to " + filestream.Name);

            }

The code seems to work, and does not fail. But I do not get any file uploaded?? Where is it supposed to land? Or rather: No matter what other path I try to put in the destination path it fails. 

I would like the file to land in the /Images/Signatures folder - how do I achieve that?

Peter

Hi UdhayaKumar

Seems this part works now.

But working further on your sample on uploading the file:

            var FileData = args.Files.FirstOrDefault();

            if (FileData != null)

            {

                var FileName = FileData.File.Name;

                var firstFileFileInfo = FileData.FileInfo;

                var firstFileFileInfoName = firstFileFileInfo.Name;

                await js.InvokeVoidAsync("alert", "Uploading " + firstFileFileInfoName);

                var path = @"" + firstFileFileInfoName;

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

                await FileData.File.OpenReadStream(long.MaxValue).CopyToAsync(filestream);

                filestream.Close();

                await js.InvokeVoidAsync("alert", "Uploaded " + firstFileFileInfoName + " to " + filestream.Name);

            }

The code seems to work, and does not fail. But I do not get any file uploaded?? Where is it supposed to land? Or rather: No matter what other path I try to put in the destination path it fails. 

I would like the file to land in the /Images/Signatures folder - how do I achieve that?

Peter

• Directory Path: The directoryPath is dynamically set to a folder named /Images/Signatures within your application’s base directory.
• Directory Creation: The Directory.CreateDirectory method ensures that the target folder exists before saving any files.
• File Saving: Each uploaded file is saved with its original name in the specified directory using a FileStream.

Hi Kirthika

Yes, of course GetCurrentDirectory should be the base of the path used. I didn't see that.

You code works perfectly, however the file never gets saved to the physical file system anyway

FullPath of GetCurrentDirectory() returns "/"

I have researched into this and find that this is because I use Blazor WebAsembly (WASM)

WASM uses a virtual copy of the file system to which the file is saved.

I think I will have to revert to saving the file in my database in an image column

Do you have a sample of showing the image from an SQL Server image column?

Peter

Hi Kirthika

Yes, of course GetCurrentDirectory should be the base of the path used. I didn't see that.

You code works perfectly, however the file never gets saved to the physical file system anyway

FullPath of GetCurrentDirectory() returns "/"

I have researched into this and find that this is because I use Blazor WebAsembly (WASM)

WASM uses a virtual copy of the file system to which the file is saved.

I think I will have to revert to saving the file in my database in an image column

Do you have a sample of showing the image from an SQL Server image column?

Peter

Hi Kirthika

Yes, of course GetCurrentDirectory should be the base of the path used. I didn't see that.

You code works perfectly, however the file never gets saved to the physical file system anyway

FullPath of GetCurrentDirectory() returns "/"

I have researched into this and find that this is because I use Blazor WebAsembly (WASM)

WASM uses a virtual copy of the file system to which the file is saved.

I think I will have to revert to saving the file in my database in an image column

Do you have a sample of showing the image from an SQL Server image column?

Peter

Never mind.

I have a working solution now

Peter

This is the complete working solution:

The Directory Images/Signatures will be created in the WASM virtual file system, the file uploaded here, and then loaded into a bytearray in my person class.

            var directoryPath = Path.Combine(Directory.GetCurrentDirectory(), "Images", "Signatures");

            if (!Directory.Exists(directoryPath))

            {

                Directory.CreateDirectory(directoryPath);

            }

            foreach (var file in args.Files)

            {

                var filePath = Path.Combine(directoryPath, file.FileInfo.Name);

                using (var fileStream = new FileStream(filePath, FileMode.Create, FileAccess.Write))

                {

                    await file.File.OpenReadStream(long.MaxValue).CopyToAsync(fileStream);

                    string fullPath = Path.GetFullPath(filePath);

                    if (cdbperson != null)

                    {

                        cdbperson.SignatureNew = File.ReadAllBytes(fullPath);

                    }

                }

            }

Hmmmm?

Why does this only work with .bmp files? If I try with .png files it does not work!?

The byte array is empty

Peter

Hi Peter Rasmussen,

Based on the provided details, we noticed that you are using ReadAllBytes to retrieve the file contents. We recommend using ReadAllBytesAsync instead, as it ensures proper retrieval of file data, particularly for PNG format.

To assist you further, we have attached a sample and a video demonstration for your reference.

Video Reference:

Regards,

Yaswin Vikhaash

Hi Yaswin

It still doesn't work for me.

The file I am uploading has a size of 1.01 KB and you can see the image in the thumbnail

But when I run the code I get a zero-length byte-array:

Hi Peter,

We have created a ticket under your account. Please follow up the created ticket for further updates.

https://support.syncfusion.com

Regards,

Archana