Uppy: Using uppy with a React component

[alolis]

Hello,

Is the quick example here still the correct way to import the latest version of uppy (0.8.0)? I am getting a Module not found: Error: Cannot resolve module uppy/core

Uppy was installed with npm install uppy --save

Thanks for any feedback

[alolis]

Update: The following seems to fix the loading issue although I am still trying to glue pieces together to use it within a React component:

import Uppy from 'uppy/lib/core';
import Dashboard from 'uppy/lib/plugins/Modal';

If anyone has any related samples they would definitely help

[hedgerh]

Hey @alolis, we are currently looking into an issue with our npm package. I will keep you updated.

Regarding usage with React, how were you planning on using it?

[arturi]

So, turns out we’ve been providing an incorrect example in readme, since we are only working with the source ourselves and importing files directly, we were not using the npm version. I apologize for that.

This is the way you’d bundle Uppy from npm at the moment:

import Uppy from 'uppy'

const uppy = new Uppy.Core({wait: false})
const files = uppy
  .use(Uppy.plugins.DragDrop, {target: '#upload-target'})
  .use(Uppy.plugins.Multipart, {endpoint: 'https://api2.transloadit.com/'})
  .run()

As far as React support, we do not have it figured out yet, but it is a priority. We are planning to properly expose the API so you could use it anywhere, without being tied to our cool view/rendering components, like the Dashboard. We are discussing that in #116 right now actually, and yeah, would be cool if you briefly shared your use case. Thank you!

[alolis]

@arturi, @hedgerh Thanks for the replies guys. I posted my thoughts regarding React in #116 in order to keep everything together instead of writing here.

[alolis]

@arturi , I am getting the following with your example:

Uncaught TypeError: Cannot read property 'Core' of undefined

in line

const uppy = new Uppy.Core({wait: false})

Currently using version 0.8.2

[arturi]

Uncaught TypeError: Cannot read property 'Core' of undefined

Ok, it seems like it works with require, but with import we have to do this:

import * as Uppy from 'uppy'

Sorry, I’m not a pro-ES2015 ninja, assumed if var uppy = require('uppy') worked, import would too.

Working live example: https://esnextb.in/?gist=526e9fdf4a8b93c03a3607e6b2f35a25

[alolis]

@arturi, cheers that indeed worked. To be honest for now I am just trying to make the Dashboard work _as is_ with React. To click a button and to make the Dashboard appear just like the example here and then I can move forward to make it a bit more react-ish :)

If you have any pointers I am all ears.

Also you might want to update the example on this page as well since it's still wrong.

[arturi]

Right, I would like to discuss the way we want import to works with the team first, I think the way it’s supposed to work, like in the example on uppy.io, is what we should aim for.

[alolis]

@arturi , yeah of course. Loading only what is required is definitely the goal here.

I do experience one more problem though. I now see in my console log the following:

LOG: Installing DashboardUI to body
LOG: Installing Dummy to DashboardUI
LOG: Updating state with: 

but the Dashboard looks like it rendered already on my page (not as modal though) and it looks like something is missing, some JS never got loaded or maybe a stylesheet.

I am pretty sure I am missing the uppy.min.css for starters, but I can't find it on the uppy repo...or I am not supposed to load any related stylesheets?

This is what I see inside my browser, at the bottom of the page:
http://imgur.com/a/TbZ8O

UPDATE: I cloned the whole uppy project and run node run build:css to generate the required stylesheet. Loaded it to my project and problem fixed; modal loads properly now.

[arturi]

Yes, was about to tell you to just get it from here. This is on our list too, we are discussing bundling the css or something.

[alolis]

@arturi , someone else will find the link useful for sure :) I am now implementing on my backend tus to give it a go with uppy (resuming upload was got me here on the first place!)

[alolis]

@arturi , is there documentation somewhere on what to use exactly and how in order to subscribe to the events published by the core emitter?

[arturi]

Currently that’s not possible, but it’s on our list for the next release, also discussed is #116. What are your thoughts on how this should work? Something like this:

uppy.on('upload-complete', doThis)
uppy.on('progress', doThat)

or

const uppy = new Uppy({
  onProgress: function (progress) {
    console.log(`progress for ${progress.fileName} is ${progress.percentage}`)
  },
  onSuccess: function () {
    console.log('all files have been uploaded')
  }
})

In theory, you could make a plugin like MagicLog and subscribe to undocumented events that are about to change, but it’s better to wait till we roll out the real API.

[alolis]

@arturi , I am pretty sure I saw somewhere an example implemented with the first way so I think you have already decided which one you guys prefer :) My personal preference is the first way as well since you can easily chain things and I find it cleaner anyway.

Also, the progress related events, if I am uploading multiple files, will it be total progress or per file progress? A parameter with the file id will definitely be nice in order to get a per file progress so the caller will be able to update state accordingly (or do whatever he wants to do to his view).

So, just to clarify here, at the moment there is no way to get uploading status/progress (except by writing a plugin as you showed, but I wanted to use the Dashboard directly and save some time) ? If not, then my hands are tide until you guys expose the API.

I do wonder, however, how exactly are other people currently use the Dashboard. Do they find it OK to wait for all their uploads to finish, then click the modal X button and then page refresh to see the new uploads since they do not have a way to get upload status and programmatically do whatever they want? or am I missing something here?

[arturi]

So, just to clarify here, at the moment there is no way to get uploading status/progress

Not as an API, but there is a ProgressBar plugin that listens to progress events and shows visual progress bar. Plus on the Dashboard each file has its own circular progress thing, speed and ETA. But yes, you can’t pass a callback that will fire once all uploads are finished, so that you can then do something else in your app.

I do wonder, however, how exactly are other people currently use the Dashboard

We’ve been mostly developing Uppy and testing in-house, focusing on how the plugins interact with each other, browser support, custom metadata, translations (i18n), uppy-server component that fetches files from Google Drive or Instagram, and the Dashboard interface. We allocated time to allow for experimentation with UI and internal APIs first. The project got traction within the community only about a month ago and since then we’ve started talking about exposing APIs and real-world usage.

my hands are tide until you guys expose the API

I think it will happen very soon. We could just go with exposing events we already have in place, like upload-progress, file-add and all-uploads-complete. This should not be hard to implement, and I agree it’s crucial functionality.

[alolis]

@arturi , thanks for the reply, I will check ProgressBar as well. uppy seems promising but I guess we need to be patient :)

[hedgerh]

Hey @alolis, I wanted to let you know that I started work on an uppy-react package this week.

https://github.com/hedgerh/uppy-react

The only part that's functional right now really is UppyContainer. It provides a child component with a bunch of functionality and stuff via props. I'll give a more thorough rundown when I have more time, but wanted to share it with the community and hopefully get some input on it.

You may or may not also be interested in uppy-base. I pulled out any functionality from Uppy that didn't deal with the DOM/UI, state management, etc. and could be reused in any ecosystem or context. The idea is that when we have to write any wrappers/abstractions/components, like uppy-react or an Angular2 lib, for example, we can use uppy-base as a starting point.

[alolis]

@hedgerh , thanks for letting me know. I will be checking out the code and see if I can give you some feedback.

[arturi]

@alolis Wanted to let you know that we exposed some events, so you can now do:

uppy.on('core:upload-progress', (data) => {
  console.log(data.id, data.bytesUploaded, data.bytesTotal)
})

There is core:upload-success when one upload is complete, and core:success when totalProgress is 100%, so all uploads are complete. I started documenting the API here https://github.com/transloadit/uppy#api, but since we are in alpha and changing stuff all the time, didn’t go all the way yet.

[alolis]

@arturi , cheers, i will have a look!