While uploading [Note: Inporgress of uploading ] the file if i click remove next to file it remove from ui but it still present somewhere

0 Answers 10 Views
DropZone FileSelect Upload
Vaibhav
Top achievements
Rank 1
Iron
Iron
Vaibhav asked on 01 Aug 2025, 03:32 PM

so issue was when i uploading file that still in upload phase if i click the cancel button next upload progress bar the file is removes from ui but somewhere is still present 

so i have used OnSelectHandler event to handle to duplicate uploading and some extra validation added in OnSelectHandler event but my issue is

when i am uploading file and immediately click [ Before upload process is done ] cancel then it remove from ui but somewhere is present after that remove click again try to add show my validation error that is duplicate message 


Expected Result- 

Clicking Cancel should stop the upload process entirely, and no file should be uploaded or stored.

Please Refer Below Attachment 

Step 1 => Select file eg. dummy.pdf and select Note : AutoUpload is true and check below screenshot and i click cancel button 

 

Step 2 => The file removed from UI see below screenshot




Step 3 => If i try to add again same file i.e dummy.pdf the my custom validation msg show that is file is already present see below screenshot





Below is My Code :

 <TelerikUpload DropZoneId="dropzone-id" @ref="@UploadRef" Id="uploadFile"
                SaveUrl="@UploadSaveUrlPath"
                Class="@UploadClass"
                OnSuccess="@OnUploadSuccess"
                OnRemove="@OnUploadRemove"
                OnError="@OnUploadError"
                OnProgress="@OnUploadProgress"
                Multiple="true"
                OnSelect="@OnSelectHandler" >
     
 </TelerikUpload>

  private async void OnUploadSuccess(UploadSuccessEventArgs args)
  {
      if (args.Operation != UploadOperationType.Upload) return;

      isUploadedSuccess = true;
      uploadedInfoCache = await LoadUploadedFilesAsync();

      foreach (var file in args.Files)
      {
          var match = uploadedInfoCache?.FirstOrDefault(f =>
              f.FileName == file.Name &&
              f.Size == file.Size);

          if (match != null)
          {
              file.Id = match.FileId; // Set ID for later removal
          }
      }
  }

  private void OnUploadError(UploadErrorEventArgs e) => isUploadedSuccess = false;

  private async Task OnSelectHandler(UploadSelectEventArgs e)
  {
      // Early exit if already full
      if (selectedFiles.Count > MaxAttachmentFile)
          return;

      foreach (var file in e.Files.ToList())
      {
          // 1. Check max file size
          if (file.Size > MaxFileSize * 1024 * 1024)
          {
              await DialogSvc.AlertAsync(Resources.Attachments,
                  string.Format(Resources.MaxAllowedFileSizeShould, MaxFileSize, Math.Ceiling((double)file.Size / 1024 / 1024)));

              e.Files.Remove(file); // exclude large file
              continue;
          }

          // 2. Check for duplicate name (uploaded or selected)
          bool isDuplicate = Attachments.Any(a => a.FileName.Equals(file.Name, StringComparison.OrdinalIgnoreCase)) ||
                             selectedFiles.Any(a => a.Name.Equals(file.Name, StringComparison.OrdinalIgnoreCase));

          if (isDuplicate)
          {
              await DialogSvc.AlertAsync(Resources.TitleDuplicateAttachment,
                  string.Format(Resources.DuplicateAttachmentMsg, file.Name));

              e.Files.Remove(file); // exclude duplicate
          }
      }

      // 3. File count check after all filtering
      if (selectedFiles.Count + e.Files.Count > MaxAttachmentFile)
      {
          e.IsCancelled = true;
          await DialogSvc.AlertAsync(Resources.MaxFileUploadedTitle, MaxFileErrorMsg);
          return;
      }

      // 4. Add only valid files
      selectedFiles.AddRange(e.Files);

      // 5. Final file-level validations
      isUploadedSuccess = e.Files.All(file =>
          !file.InvalidExtension &&
          !file.InvalidMinFileSize &&
          !file.InvalidMaxFileSize);
  }

 private async void OnUploadRemove(UploadEventArgs args)
 {
     foreach (var file in args.Files)
     {
         selectedFiles.RemoveAll(f => f.Id == file.Id);

         var match = uploadedInfoCache.FirstOrDefault(f => f.FileName == file.Name && f.Size == file.Size);
         if (match == null) continue;

         var content = new FormUrlEncodedContent(new[]
         {
             new KeyValuePair<string, string>("fileId", match.FileId)
         });

         await HttpClient.PostAsync(ToAbsoluteUrl(RemoveFileUrlPath), content);
     }

     if (!selectedFiles.Any())
     {
         UploadRef.ClearFiles();
         await HttpClient.GetAsync(ToAbsoluteUrl(CleanFilesUrlPath));
     }
 }

No answers yet. Maybe you can help?

Tags
DropZone FileSelect Upload
Asked by
Vaibhav
Top achievements
Rank 1
Iron
Iron
Share this question
or