0 to 100 instant, no intermediate progress

Uppy
1

Hi, I am wondering what might be the cause of this - when I am developing locally (Angular), the upload all works correctly, but on the deployed Azure instance the progress of the file is not shown; the file is being uploaded, but I can’t see the progress moving until it completes, then it just immediately goes from 0% to 100%.

Any ideas what are the necessary environment potential causes? TY!

2

There is not enough information to help. Without integration code and what you do on the backend it’s hard to know

3

Do you require specifics or is it OK if I provide some general overview what’s being handled for the TUS protocol? I don’t think the guys did anything special, but I can ask for more specific information if you have some topic you’d like to hear about - the actual implementation will probably be forbidden by an agreement so that’s pretty munch out of the question.

4

Without a reproducible example or exact integration code I don’t see a way to help.

Here are some starters to kickstart a reproducible example:

5

Here’s an example .NET code:

public static Task<DefaultTusConfiguration> TusConfigurationFactory(HttpContext httpContext)
{
    var storageOptions = httpContext.RequestServices.GetRequiredService<IOptions<TusOptions>>().Value;

    var config = new DefaultTusConfiguration
    {
        Store = new TusDiskStore(storageOptions.GetCurrentDirectoryStoragePath,
            deletePartialFilesOnConcat: false,
            TusDiskBufferSize.Default,
            new GuidFileIdProvider()),
        UsePipelinesIfAvailable = true,
        Expiration = storageOptions switch
        {
            { EnableExpiration: true, AbsoluteExpiration: true } => new AbsoluteExpiration(
                TimeSpan.FromSeconds(storageOptions.ExpirationInSeconds)),
            { EnableExpiration: true, AbsoluteExpiration: false } => new SlidingExpiration(
                TimeSpan.FromSeconds(storageOptions.ExpirationInSeconds)),
            _ => null
        },
        Events = new Events
        {
            OnBeforeCreateAsync = HandleOnBeforeCreateAsync,
            OnFileCompleteAsync = context => HandleOnFileCompleteAsync(context, httpContext),
        }
    };

    return Task.FromResult(config);
}

My BE colleague says this as well; HandleOnBeforeCreateAsync only does metadata validation, while on HandleOnFileCompleteAsync they call other services, repositories and the actual file storing on the storage.

6

To clarify, unless the problem is on the client-side Uppy integration code, you’re probably best off posting a issue in the tusdotnet repo.

This is the Uppy forum. We can help with Uppy related code

7

Most in general this is it, I have some signal based code (Angular) that I set the state to when the event fires.

 /**
   * Registers Uppy instance
   */
  registerUppy({ allowedFileTypes, meta }: UppyOptions): void {
    this.uppy = new Uppy<Meta>({
      autoProceed: true,
      restrictions: {
        allowedFileTypes,
      },
      meta,
    });

    this.$uploadState.update(currentState => ({
      ...currentState,
      progress: 0,
      files: {},
    }));

    if (this.uppy) {
      this.configureUppy(this.uppy);
    }
  }

  /**
   * Configures Uppy instance
   */
  configureUppy(uppy: Uppy): void {
    const msalAccount = this.authenticationService.getActiveMSALAccount();
    const windowsAccount = this.authenticationService.getActiveWindowsAccount();

    if (msalAccount) {
      let accessToken = '';

      this.msalService
        .acquireTokenSilent({
          scopes: environment.apiConfig.scopes,
          account: msalAccount,
        })
        .pipe(takeUntilDestroyed(this.destroyRef))
        .subscribe(accountInfo => {
          accessToken = accountInfo.accessToken;

          uppy.use(Tus, {
            endpoint: environment.apiConfig.uri.split('/api')[0] + '/upload',
            headers: {
              Authorization: `Bearer ${accessToken}`,
            },
          });
        });
    } else if (windowsAccount) {
      uppy.use(Tus, {
        endpoint: environment.apiConfig.uri.split('/api')[0] + '/upload',
        withCredentials: true,
      });
    }

    /**
     * Upon a file restriction failure
     */
    uppy.on('restriction-failed', (file, error) => {
      // TODO: Remove notification if unnecessary
      if (file) {
        this.toastsService.showErrorToast(
          `Adding file ${file.name} failed. Error: ${error.message}`,
        );
      }
    });

There isn’t much else configuration wise. This restriction failed is just an example of an event handling.

8

I’m not an Angular expert and so I don’t know the context this code is run in (also because a lot of code is missing) and if your signals based approach could be part of the problem.

I recommend making the smallest possible reproducible example. We haven’t seen this issue anywhere else. You can see on https://uppy.io/examples/, which also uses tus, that everything works as expected.

9

OK thank you, I don’t think this is code related to be fair, it’s probably related to the environment. I figured maybe someone from the team might have a hint that the environment must have some flags set, but no problem if this doesn’t sound familiar. Thank you for the inputs! Cheers!