Displaying loading indicator while uploading large video files

Backend
1

I’m working on a video upload feature for my web app. Here’s what I’ve got so far:

function uploadVideo(videoFile) {
  const requestData = {
    action: {
      type: 'upload',
      userId: currentUser.id
    },
    content: {
      fileName: videoFile.name
    }
  };

  ApiClient.sendVideo(requestData, videoFile)
    .then(response => {
      console.log('Upload result:', response);
      if (response.success) {
        updateVideoList(response.videoId);
        refreshGallery();
      } else {
        showError(response.message);
      }
    });
}

The upload works, but there’s no feedback for users when they’re uploading big files or on slow connections. How can I add a loading indicator or progress bar? I want to show something like ‘Video uploading…’ until I get a response from the server. Any ideas on how to implement this?

2

hey ryan! have u considered using the Fetch API with a ReadableStream? it lets u track upload progress in real-time. you could update a progress bar as the upload happens. also, maybe add a cancel button for those looong uploads? what kinda videos are users uploading? sounds like a cool project!

3

yo ryan, have u tried using axios? it’s awesome for handling uploads n progress tracking. just wrap ur existing code in an axios request, add an onUploadProgress callback, and BAM! u can update a progress bar or show a spinner. it’s super easy to setup too. lemme know if u need help!

4

To implement a loading indicator for large video uploads, you can utilize the XMLHttpRequest object instead of the Fetch API. This allows you to track upload progress more easily. A basic approach involves creating a progress element in your HTML, using XMLHttpRequest to send the file, listening for the ‘progress’ event on the XMLHttpRequest object, and updating the progress element based on the event data.

This method provides real-time feedback to users during the upload process. Additionally, consider implementing error handling and a timeout mechanism for very large files or slow connections. Testing with various file sizes and network conditions is crucial to ensure a smooth user experience across different scenarios.