Uppy: Custom Uploader plugin (completed & progress events)

[ghost]

I have wrote a very simple uploader plugin for Uppy:

class ASUploader extends Plugin {
  constructor (uppy, opts) {
    super(uppy, opts)
    this.uppy = uppy
    this.id = 'ASUploader'
    this.type = 'uploader'
    this.upload = this.upload.bind(this)
    this.input = opts.input
    this.url = this.input.dataset.directUploadUrl
  }

  upload (fileIDs) {
    let promises = []
    for (let fileID of fileIDs) {
      let uploader = new Uploader(this.uppy.getFile(fileID).data, this.url, this.input)
      promises.push(uploader.startUpload())
    }
    return Promise.all(promises)
  }

  install() {
    this.uppy.addUploader(this.upload)
  }

  uninstall() {
    this.uppy.removeUploader(this.upload)
  }
}

How can I make upload-progress events, and set state as completed when all files are uploaded?

[arturi]

Hi! Nice going with the custom plugin!

What about copying what XHRUpload does? So, for progress:

https://github.com/transloadit/uppy/blob/b7a76315759ea99fe12a4914ffca3c445525ac36/src/plugins/XHRUpload.js#L210-L221

And then when complete:

https://github.com/transloadit/uppy/blob/b7a76315759ea99fe12a4914ffca3c445525ac36/src/plugins/XHRUpload.js#L237-L245

set state as completed when all files are uploaded

Uppy Core should handle that since you registered your uploader with uppy.addUploader. You could also look into handling errors:

https://github.com/transloadit/uppy/blob/b7a76315759ea99fe12a4914ffca3c445525ac36/src/plugins/XHRUpload.js#L262-L269

And then there’s removing/canceling files:

https://github.com/transloadit/uppy/blob/b7a76315759ea99fe12a4914ffca3c445525ac36/src/plugins/XHRUpload.js#L281-L298

[ghost]

I've got problem with upload-progress event, somehow fileID is not passed to uppy. Here is my uploader class:

class Uploader {
  constructor(file, url, input, uppy, fileID) {
    this.file = file
    this.input = input
    this.uppy = uppy
    this.fileID = fileID
    this.upload = new DirectUpload(file, url, this)
  }

  startUpload() {
    this.upload.create((error, blob) => {
      if (error) {
        // Handle the error
      } else {
        console.log(blob.signed_id)
        // What is second parameter to this event? 
        // this.uppy.uppy.emit('upload-success', this.fileID, "")

        return new Promise((resolve) => {
          resolve()
        })
      }
    })
  }

  directUploadWillStoreFileWithXHR(request) {
    request.upload.addEventListener("progress", event => this.directUploadDidProgress(event))
  }

  directUploadDidProgress(event) {
    console.log(this.fileID) // fileID is correct id
    this.uppy.uppy.emit('upload-progress', this.fileID, { 
      uploader: this.uppy.uppy.uploaders[0],
      bytesUploaded: event.loaded,
      bytesTotal: event.total
    }) 
  }
}

Calling this class:

upload (fileIDs) {
    let promises = []
    for (let fileID of fileIDs) {
      let uploader = new Uploader(this.uppy.getFile(fileID).data, this.url, this.input, this, fileID)
      promises.push(uploader.startUpload())
    }
    return Promise.all(promises)
  }

[ghost]

Listening to upload-progress event gives me this results:

uppy.on('upload-progress', (file, progress) => {
      // file: { id, name, type, ... }
      // progress: { uploader, bytesUploaded, bytesTotal }
      console.log(file.id, progress.bytesUploaded, progress.bytesTotal)
})

[ghost]

Changing line setting up uploader to:

let uploader = 
  new Uploader(this.uppy.getFile(fileID).data, this.url, this.input, this, this.uppy.getFile(fileID))

Now giving correct upload-progress event, but still no feedback is displayed to user

[ghost]

Setting upload-success as:

this.uppy.uppy.setFileState(this.fileID.id, { status: "success" })
this.uppy.uppy.emit('upload-success', this.fileID, "success")

return new Promise((resolve) => {
  resolve(this.fileID)
})

Marks file as uploaded, but Upload button is still there:

[ghost]

Adding this line to Uppy's upload function did all the work:
this.uppy.emit('upload-started', this.uppy.getFile(fileID))

Thank you for creating Uppy! Uppy is 💛

[zifahm]

@devkir do you have a link to your custom uppy plugin?. I'm stuck on the part where it doesn't show completed and just refreshes.

[arturi]

@zifahm are you emitting upload-started, upload-progress, upload-success? Is your upload handler returning a Promise?

[zifahm]

let me try @arturi

[zifahm]

Oh wow i got it working now, but i get cannot read property of then undefined @arturi

  uploadFiles = (files: any[]) => {
    files.map((file, i) => {
      const current = i + 1;
      const total = files.length;

      if (file.error) {
        // @ts-ignore
        return () => Promise.reject(new Error(file.error));
      } else {
        // @ts-ignore
        this.uppy.emit("upload-started", file);
        return this.upload(file, current, total);
      }
    });
  };

  handleUpload = (fileIDs: any[]) => {
    if (fileIDs.length === 0) {
      this.uppy.log("[XHRUpload] No files to upload!");
      return Promise.resolve();
    }

    this.uppy.log("[XHRUpload] Uploading...");
    const files = fileIDs.map(fileID => this.uppy.getFile(fileID));

    // @ts-ignore
    return this.uploadFiles(files).then(() => null);
  };

[zifahm]

I returned a promise and it still refreshes tho. unable to see the completed files.
on upload success and on complete works fine.
I need the user to see the files that has been completed tho.
here is my gist https://gist.github.com/zifahm/d3cfba4b71d4d09a5e122d97065cbd04
@arturi

[zifahm]

Ohh I see now, once if you call on Complete the dashboard refreshes.

[arturi]

@zifahm have you managed to make it work?

[zifahm]

@arturi yes i have made an updated version https://github.com/zifahm/uppy-cloudinary/blob/master/src/UpdatedVersionPlugin.ts