Display pending file in <Upload /> while waiting for upload request (…

…#6969)

* show file to be uploaded before request begins

* add changeset

* tweak

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/empty-bags-type.md

@@ -0,0 +1,6 @@
+---
+"@gradio/upload": patch
+"gradio": patch
+---
+
+fix:Display pending file in `<Upload />` while waiting for upload request

js/upload/src/UploadProgress.svelte

@@ -11,6 +11,7 @@
 	let event_source: EventSource;
 	let progress = false;
 	let current_file_upload: FileDataWithProgress;
+	let file_to_display: FileDataWithProgress;
 
 	let files_with_progress: FileDataWithProgress[] = files.map((file) => {
 		return {
@@ -68,6 +69,8 @@
 	}
 
 	$: calculateTotalProgress(files_with_progress);
+
+	$: file_to_display = current_file_upload || files_with_progress[0];
 </script>
 
 <div class="wrap" class:progress>
@@ -76,19 +79,19 @@
 		{files_with_progress.length > 1 ? "files" : "file"}...</span
 	>
 
-	{#if current_file_upload}
+	{#if file_to_display}
 		<div class="file">
 			<span>
 				<div class="progress-bar">
 					<progress
 						style="visibility:hidden;height:0;width:0;"
-						value={getProgress(current_file_upload)}
-						max="100">{getProgress(current_file_upload)}</progress
+						value={getProgress(file_to_display)}
+						max="100">{getProgress(file_to_display)}</progress
 					>
 				</div>
 			</span>
 			<span class="file-name">
-				{current_file_upload.orig_name}
+				{file_to_display.orig_name}
 			</span>
 		</div>
 	{/if}