transloadit / uppy

The next open source file uploader for web browsers :dog:

Home Page:https://uppy.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Custom Uploader add list of necessary events

MaxAndDev opened this issue · comments

commented

Initial checklist

  • I understand this is a feature request and questions should be posted in the Community Forum
  • I searched issues and couldn’t find anything (or linked relevant results below)

Problem

There is a problem with the documentation when creating custom uploader plugins. It does not outline that this event

this.uppy.emit('upload-start', this.uppy.getFiles())

is needed to make Uppy show any progress or to get to the "Done" state.

Solution

Simply add a list of events that are needed to the docs. I mean ya we could also visit the implementation of the TUS uploader but it would be nice to have everything together in one place. Essential events that are needed for custom uploader are

'upload-start' with a list of uppy files
'upload-success' for each successfully uploaded file
'upload-error' for each failed upload

and then the progress events, but those are outlined in the docs 🙏

upload(fileIDs: string[]) {
    // emit the event for progress tracking to uppy
    this.uppy.emit('upload-start', this.uppy.getFiles())

    const promises = fileIDs.map((fileId) => {
      const file = this.uppy.getFile(fileId)

      return new Promise((resolve, rejects) => {
      // some upload hook
        this.uploadHook(file.data)
          .then((result: any) => {
            // event emitting is important for uppy to keep track of the actual progress state
            this.uppy.emit('upload-success', file, result)
            resolve(result)
          })
          .catch((err: any) => {
            // event emitting is important for uppy to keep track of the actual progress state
            this.uppy.emit('upload-error', file, err)
            rejects(err)
          })
      })
    })

    return Promise.all(promises).then(() => {}) // returned promise needs to be Promise<void>
  }

Alternatives

Just link to the TUS implementation for a "custom" uploader example