Piece of a upload code with PL Upload.

part-of-upload-engine.js

let uploadEngine = new plupload.Uploader({
  runtimes: 'html5',
  url: `${apiUrl}/upload`,
  multiple_queues: true,
  multi_selection: true,
  browse_button: 'btnAddFoto',
  multipart_params: {
    'File': '${filename}',
  },
  filters: {
    max_file_size: '10mb',
    mime_types: [
      { title: 'Imagens', extensions: 'jpg,jpeg,git,png' },
    ]
  },
  preinit: {
    Init: (up, info) => {
      console.log('[Init]', 'Info:', info, 'Features:', up.features)
    },
  },
  init: {
    PostInit: (uploader, info) => {
      // console.log('[Init]', 'Info:', info, 'Features:', uploader.features)
    },

    FilesAdded: (uploader, files) => {
      uploader.start();
    },

    FileFiltered: (uploader, file) => {
      console.log('FileFiltered' + file.name);
      this.fotos.set(file.id, { id: file.id, name: '100x100', percent: 0, uri: `http://via.placeholder.com/100x100` });
      this.fotosMapChangeTracker += 1;
    },
    // BeforeUpload: (uploader, file) => {},
    // UploadFile: (uploader, file) => {},
    UploadProgress: (uploader, file) => {
      this.fotos.get(file.id).percent = file.percent;
      this.fotosMapChangeTracker += 1;
      this.progress = uploader.total;
    },
    FileUploaded: (uploader, file, res) => {
      let response =  JSON.parse(res.response);
      this.fotos.get(file.id).uri = response.uri;
      this.fotos.get(file.id).path = response.path;
    },
    // UploadComplete: (uploader, file) => {},
    Error: (uploader, err) => {
      console.log(err);
    }
  }
});

uploadEngine.init();