Is there a upload progress for useSubmit?

[amuttsch]

Hi,

I'm currently working on a component that allows the user to upload files. I want to show the user the progress of the upload and with axios I'd use the onUploadProgress callback. Is there an alternative to show the user the status of the file upload using remix?

The useTransition hook only provides the loading state it seems.

Thanks!

[kiliman]

Unfortunately that is not supported at the moment (as of Remix v1.2.3... in case it's added later).

[hollandThomas]

I'm currently working on a Remix-project that needs this as well. Since we're dealing with huge files (>4 GB) and because there've been issues with resumability historically, we chose to use tus with Uppy and forego Remix uploads entirely.

Another possibility would be to use a XMLHttpRequest yourself, which implements a progress event as opposed to fetch, which does not.

I've had a brief exchange with Ryan on twitter where he hypothesized that in a future release, Remix might switch to XHR and hand you a progress automatically when it detects a file upload.

[kocyigityunus]

I am using something like this too. I think it's not possible because most of the browsers don't give you this info. Also, you are probably uploading more than one file.

So, my solution is to use Axios for file uploads (which has onUploadProgress callback). get the random id for the file from backend. and set the id in the form to post with the rest of the data.

this way I can see the progress or errors of the files individually. and I think it's a much better user experience.

[mroozspace]

Here's a snippet I used in my code, maybe some of you will find it useful.

`async function onVideoSubmit(event: FormEvent) {
event.preventDefault()

const fileInput = document.getElementById('video') as HTMLInputElement
const file = fileInput?.files && fileInput?.files[0]

if (!file) return

const coverInput = document.getElementById('cover') as HTMLInputElement

const FD = new FormData();
FD.append('video', file)
FD.append('cover', coverInput?.files?.[0] as Blob)

try {
  setIsUploading(true)
  await axios.post(`${HOST_NAME}/videos/new`, FD, {
    headers: {
      'Content-Type': 'multipart/form-data',
    },
    onUploadProgress: progressEvent => {
      if (progressEvent?.total) {
        const progress = Math.round((progressEvent.loaded / progressEvent?.total || 1) * 100);
        setProgress(progress)
      }
    },
  })
    // .then(res => console.log(res.data)) // for some reason, it return whole page - can't get id
    .finally(() => {
      setIsUploading(false)
      // redirect didn't work, when using axios, so I'm using fetcherUploadSuccess instead
      fetcherUploadSuccess.submit({}, { action: 'videos/new/success' })
    });
} catch (e) {
  console.error(e);
}

}`

[akoenig]

I was faced with the same use case where I had to visualize the upload progress in order to improve the UX for large file uploads.

My solution extends Remix's unstable_createFileUploadHandler so that it is possible to get informed about the upload progress. This progress then gets streamed back to the client via Server-Sent Events.

Maybe it is useful for somebody. I summarized this strategy in the blog post: Progressively Enhanced File Uploads with Remix ☺️

[thecneu]

This article is super helpful. I need to upload to s3 and actually upload multiple files. Struggling with the multiple files part. Any insight on how to work with multiple files?