Read CSV File From Blazor Web Assembly

CSV is a very popular format and probably in somes scenarios we need to read this type of file to save information in the database or to do something else.

 

In this article, I will show you how to read this format (CSV) in Blazor web assembly applications

 

First, we need to add an InputFile element in the compenent where we want to read the file,

<InputFile OnChange="@OnInputFileChange" class="btn btn-primary" />

Then, we need to implement the event @OnInputFileChange where, we will validate the format and read the file's information, 

  public async Task OnInputFileChange(InputFileChangeEventArgs e)
        {
            SpinnerModal.ShowSpinner();
            var singleFile = e.File;

            Regex regex = new Regex(".+\\.csv", RegexOptions.Compiled);
            if (!regex.IsMatch(singleFile.Name))
            {
                //show error invalidad format file
            }
            else
            {
                var stream = singleFile.OpenReadStream();
                var csv = new List<string[]>();
                MemoryStream ms = new MemoryStream();
                await stream.CopyToAsync(ms);
                stream.Close();
                var outputFileString = System.Text.Encoding.UTF8.GetString(ms.ToArray());

                foreach (var item in outputFileString.Split(Environment.NewLine))
                {
                    csv.Add(SplitCSV(item.ToString()));
                }

             }
   }

        private string[] SplitCSV(string input)
        {
            //Excludes commas within quotes
            Regex csvSplit = new Regex("(?:^|,)(\"(?:[^\"]+|\"\")*\"|[^,]*)", RegexOptions.Compiled);
            List<string> list = new List<string>();
            string curr = null;
            foreach (Match match in csvSplit.Matches(input))
            {
                curr = match.Value;
                if (0 == curr.Length)  list.Add("");

                list.Add(curr.TrimStart(','));
            }

            return list.ToArray();
        }

SplitCSV reads the CSV file excluding the columns with commas in the values and also returns a string array including all the values.

 

At the end, we will have a csv array that includes the whole data and then, we can send that information to the server.

 

If you want to make a refactoring in this code feel fre to do it. Share your solution in the comment's section.