Uppy: NextJS example

[kiwicopple]

More of a "tutorial request", but it would be amazing if there was a NextJS example for Uppy.

I'm working through the Uppy docs (which are great) but sometimes a simple code example can make a big difference.

NextJS is relatively popular (44K stars) and it's fundamentally ReactJS, so hopefully this would give a lot of exposure to Uppy for little work

[kvz]

Would you be able/willing to take notes while you figure it out and contribute such an example?

[kiwicopple]

Sure thing @kvz - I'll detail down implementation if I end up using Uppy (I hit a few roadblocks with companion)

[kvz]

Appreciated! <3

Are you hitting bugs or something? Do let us know here on on the
community forum :ok_hand:

On 11/27/19 3:13 PM, Copple wrote:
>

Sure thing @kvz https://github.com/kvz - I'll detail down
implementation if I end up using Uppy (I hit a few roadblocks with
companion)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/transloadit/uppy/issues/1958?email_source=notifications&email_token=AAAGRAHLW64IQHCUZPWR7MTQVZ6BJA5CNFSM4JSCUZJ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEFJUB4Q#issuecomment-559104242,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAAGRAGL32AAGBTDHZKZAVTQVZ6BJANCNFSM4JSCUZJQ.

[oyeanuj]

@kiwicopple @kvz Did y'all ever end up creating an example with Next.js?

[kiwicopple]

I didn't end up using it @oyeanuj, so no example on my side (i found it too much effort to set up the transloadit server)

[kvz]

You can’t run Transloadit yourself. You can let our company Transloadit host components like Tusd and Companion. That would require no setup, we take care of monitoring, upgrades, scaling, encoding, global distribution so the endpoints are close to your users. Costs $49/mo. Free plans for testing, open source, charity, students, teachers, startups at accelerators that we partner with.

We probably need to do a better job at underscoring that there are hosted versions available in the docs.

Probably you struggled running Companion in production? If you want to run Companion and Tusd yourself, that’s possible too but does require handling said things yourself. Feel free to paste errors and such on our community forum.

As for Next.js, I was interested in learning about the integration but haven’t toyed with it myself. Couldn’t you just use the react integration for this tho? If not I would like to learn why (honest Q, my experience with Next.js is limited to following a few pages of their interactive tutorial :)

Sent from mobile, pardon the brevity.

On 17 Feb 2020, at 01:42, Copple [e-mail] wrote:


I didn't end up using it @oyeanuj, so no example on my side (i found it too much effort to set up the transloadit server)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[kiwicopple]

Probably you struggled running Companion in production

Yes you're right! Sorry it was a while back. Yes, most of the implementation could be pulled from the React example, there are just some Next.js specific things that should be added (eg, the env vars in next.config.js). Also Next.js can be SSR with getInitialProps, so there may be some added value there.

Sorry i'm a bit busy to dig up the specific errors that I had with Companion. We may need this in my next project - if so I will try again

[ethanwillis]

@kvz I know Next.js pretty well. I could work on this example.

[kvz]

That would be great Ethan! 🙌

Sent from mobile, pardon the brevity.

On 30 Apr 2020, at 03:58, Ethan Willis [e-mail] wrote:


@kvz I know Next.js pretty well. I could work on this example.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[samirrayani]

@ethanwillis @kiwicopple were either of you able to cook up a nextjs -> transloadit example using uppy/robodog? I'm struggling with getting this to work (mostly with the react Dashboard component and styling) and an example would be very helpful. if not, all good but figured I'd ask!

[Jmales]

One more in need of a NextJS example with Companion. I'm trying to setup things but having problems in figuring out what goes where and if it's at all possible.

[Jmales]

I'm trying to setup a new API middleware to use Companion but I'm getting errors:

POST http://localhost:3000/api/uppy/url/meta 404 (Not Found)
OPTIONS http://localhost:3000/api/uppy/url/meta 404 (Not Found)

This is my pages\api\uppy\index.js nextjs code:
```import bodyParser from 'body-parser';
import session from 'express-session';
import companion from '@uppy/companion';

const options = {
server: {
host: 'localhost:3000',
protocol: 'http',
},
filePath: '/Users/myUser/testFolder/',
secret: 'sdaghdhgsasdajg',
};

const middlewares = [bodyParser.json(), session({ secret: 'somesecretysecret' }), companion.app(options)];

//NEXTJS

// Helper method to wait for a middleware to execute before continuing
// And to throw an error when an error happens in a middleware
function runMiddleware(req, res, fn) {
return new Promise((resolve, reject) => {
fn(req, res, (result) => {
if (result instanceof Error) {
return reject(result);
}

  return resolve(result);
});

});
}

async function handler(req, res) {
// Run the middleware

await Promise.all(middlewares.map((m) => runMiddleware(req, res, m)));
res.header('Access-Control-Allow-Methods', 'OPTIONS, GET, POST, PATCH, PUT');

res.json({ message: 'ok' });
}

export default handler;

```

Any idea on what I'm missing?