title: Assigning multiple image paths to show thumbnail in blazor
body: <p>I have a modal that is supposed to take multiple image file inputs that are categorized by zones.</p>
  <pre><code>&lt;div class=&quot;modal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; id=&quot;thumbnailsModal&quot;&gt;
      &lt;div class=&quot;modal-dialog modal-lg&quot; role=&quot;document&quot;&gt;
          &lt;div class=&quot;modal-content&quot;&gt;
              &lt;div class=&quot;modal-header&quot;&gt;
                  &lt;h5 class=&quot;modal-title&quot;&gt;Manage Flyer Thumbnails&lt;/h5&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-body&quot;&gt;
                  &lt;div class=&quot;row&quot;&gt;
                      &lt;div class=&quot;col-6&quot;&gt;
                          @if (firstPage == null)
                          {
                              &lt;p&gt;Flyer needs at least one page to be able to add thumbnails&lt;/p&gt;
                          }
                          else
                          {
                              &lt;RadzenGrid @ref=&quot;grid&quot; Style=&quot;height:395px;color:#000000;&quot; Data=&quot;@thumbnails&quot; AllowPaging=&quot;false&quot; PageSize=&quot;5&quot; AllowFiltering=&quot;false&quot; AllowSorting=&quot;true&quot; TItem=&quot;Thumbnail&quot; RowSelect=&quot;@ThumbnailSelected&quot; EditMode=DataGridEditMode.Single Value=&quot;@firstThumbnail&quot;&gt;
                                  &lt;Columns&gt;
                                      &lt;RadzenGridColumn TItem=&quot;Thumbnail&quot; Property=&quot;RowNumber&quot; Title=&quot;#&quot; Context=&quot;data&quot; Type=&quot;integer&quot; Width=&quot;25px&quot; Visible=&quot;false&quot;&gt;
                                          &lt;Template&gt;
                                              @data.RowNumber
                                          &lt;/Template&gt;
                                      &lt;/RadzenGridColumn&gt;
                                      &lt;RadzenGridColumn TItem=&quot;Thumbnail&quot; Property=&quot;Zone&quot; Title=&quot;Zone&quot; Context=&quot;data&quot; Type=&quot;text&quot; Width=&quot;125px&quot;&gt;
                                          &lt;Template&gt;
                                              @data.Zone
                                          &lt;/Template&gt;
                                      &lt;/RadzenGridColumn&gt;
                                      &lt;RadzenGridColumn TItem=&quot;Thumbnail&quot; Property=&quot;Filename&quot; Title=&quot;Filename&quot; Context=&quot;data&quot; Type=&quot;text&quot; Width=&quot;125px&quot;&gt;
                                          &lt;Template&gt;
                                              @data.Filename
                                          &lt;/Template&gt;
                                      &lt;/RadzenGridColumn&gt;
                                  &lt;/Columns&gt;
                              &lt;/RadzenGrid&gt;
                          }
                      &lt;/div&gt;
                      &lt;div class=&quot;col-6&quot;&gt;
                          @if (!string.IsNullOrEmpty(selectedZone))
                          {
                              @if (!@isDeleteButtonDisabled)
                              {
                                  @*&lt;img height=&quot;600&quot; width=&quot;600&quot; src=&quot;api/thumbnail/@Flyer.Id/@pageId/@selectedZone&quot; /&gt;*@
                                  &lt;img height=&quot;600&quot; width=&quot;600&quot; src=@imagePath /&gt;
                                  &lt;br /&gt;
                              }
                              &lt;BlazorInputFile.InputFile id=&quot;inputFile&quot; multiple OnChange=&quot;@SetImage&quot; /&gt;
                              @*  &lt;RadzenUpload Multiple=&quot;true&quot; Url=&quot;upload/multiple&quot; Change=&quot;@SetImage&quot; Class=&quot;w-100&quot; /&gt;*@
                              @if (!@isDeleteButtonDisabled)
                              {
                                  &lt;br /&gt;
  
  
  
                                  &lt;br /&gt;
                                  &lt;input type=&quot;button&quot; class=&quot;btn btn-secondary&quot; value=&quot;Delete&quot; @onclick=&quot;Delete&quot; disabled=@isDeleteButtonDisabled /&gt;
                              }
                          }
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;CoralUI.Dialog Title=&quot;@errorTitle&quot; Content=&quot;@errorContent&quot; @ref=&quot;errorDialog&quot; /&gt;
              
              &lt;div class=&quot;modal-footer&quot;&gt;
                  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
              &lt;/div&gt;
  </code></pre>
  <p>What I am trying to achieve is that when one or more files are uploaded the files are matched to its corresponding zone by file name as seen here in my set image method.</p>
  <pre><code>    async Task SetImage(IFileListEntry[] files)
      {
          foreach (var file in files)
          {
              foreach (var thumbnail in thumbnails)
              {
                  if (file.Name.Contains(thumbnail.Zone.ToString()))
  
                  {
                      thumbnail.Filename = file.Name;
                      thumbnail.Image = file.Data;
                      await Save();
                  }
  
              }
              
  
          }
  
  
  
          isDeleteButtonDisabled = false;
          StateHasChanged();
      }
  </code></pre>
  <p>I then store my image path values per zone in a dictionary and try to assign them.</p>
  <pre><code>    private async Task Save()
      {
          try
          {
              foreach (var thumbnail in thumbnails)
              {
                  await FlyerRepository.DeleteDataOneAsync(Flyer.Id, pageId, thumbnail.Zone);
  
                  var metadata = new FlyerMetadata
                      {
                          PageId = pageId,
                          FlyerId = Flyer.Id,
                          Zone = thumbnail.Zone
                      };
  
  
  
                  await FlyerRepository.SaveDataAsync(thumbnail.Filename, thumbnail.Image, metadata);
                  imagePath = string.Format(&quot;api/thumbnail/{0}/{1}/{2}/{3}&quot;, Flyer.Id, pageId, thumbnail.Zone, DateTime.Now.ToString().Replace(&quot; &quot;, &quot;_&quot;));
                  ImagePathValues.Add(thumbnail.Zone, imagePath);
              }
              foreach (var thumbnail in thumbnails)
              {
                  foreach (var path in ImagePathValues)
                  {
                      if (thumbnail.Zone == path.Key)
                      {
                          imagePath = path.Value;
                      }
                  }
              }
  
          }
  
          catch (Exception exception)
          {
              errorTitle = &quot;Error saving thumbnail.&quot;;
              errorContent = exception.Message;
              errorDialog.Open();
          }
      }
  </code></pre>
  <p>I unfortunately can't seem to get the save right and my image path is not showing my thumbnail. I can't seem to figure out how to fix this issue. Any help would be appreciated!</p>