Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(examples): added file upload example #1808

Merged

Conversation

marvinwu
Copy link
Contributor

@marvinwu marvinwu commented Feb 5, 2022

upload file and images

This is a simple example of using the remix buildin uploadHandler and Form with multipart data to upload an image file and display it,
it also show a simple(though not efficient way) of integrate with cloudinary without writing custom handler.

the relevent files are:

├── app
│   ├── routes
│   │   ├── cloudinary-upload.tsx // upload to cloudinary
│   │   └── local-upload.tsx // local upload using build in [createfileuploadhandler](https://remix.run/docs/en/v1/api/remix#unstable_createfileuploadhandler)
│   └── utils
│       └── utils.server.ts  // init cloudinary nodejs client on server side
|── .env // holds cloudinary credentails

steps to set up cloudinary

  • sign up a free cloudinary account
  • get the cloudname, api key and api secret from dashboard
  • copy the .env.sample to .env and populate the credentials

@remix-cla-bot
Copy link
Contributor

remix-cla-bot bot commented Feb 5, 2022

Hi @marvinwu,

Welcome, and thank you for contributing to Remix!

Before we consider your pull request, we ask that you sign our Contributor License Agreement (CLA). We require this only once.

You may review the CLA and sign it by adding your name to contributors.yml.

Once the CLA is signed, the CLA Signed label will be added to the pull request.

If you have already signed the CLA and received this response in error, or if you have any questions, please contact us at hello@remix.run.

Thanks!

- The Remix team

@remix-cla-bot
Copy link
Contributor

remix-cla-bot bot commented Feb 5, 2022

Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳

@ryanflorence
Copy link
Member

@kentcdodds can you review this example and merge when you're ready?

Copy link
Member

@kentcdodds kentcdodds left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good! I've got a few bits of feedback for this one.

examples/file-and-cloudinary-upload/README.md Outdated Show resolved Hide resolved
examples/file-and-cloudinary-upload/README.md Outdated Show resolved Hide resolved
examples/file-and-cloudinary-upload/README.md Outdated Show resolved Hide resolved
@marvinwu marvinwu force-pushed the example/file-and-cloudniary-uploads branch from 7e5cea8 to f1503b7 Compare February 13, 2022 10:16
@marvinwu marvinwu force-pushed the example/file-and-cloudniary-uploads branch from f1503b7 to 0725607 Compare February 13, 2022 10:18
Co-authored-by: Michaël De Boey <info@michaeldeboey.be>
Copy link
Member

@kentcdodds kentcdodds left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sweet! This is very cool 👍

contributors.yml Outdated Show resolved Hide resolved
contributors.yml Outdated Show resolved Hide resolved
examples/file-and-cloudinary-upload/README.md Outdated Show resolved Hide resolved
@kentcdodds kentcdodds changed the title (doc-examples): added file upload examples docs(examples): added file upload example Feb 16, 2022
@kentcdodds kentcdodds merged commit 5460fec into remix-run:main Feb 16, 2022
@kentcdodds
Copy link
Member

Thanks everyone 👏👏

import cloudinary from "cloudinary";
import type { Stream } from "stream";

dotenv.config();
Copy link
Contributor

@silvenon silvenon Feb 17, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love this example! Just a question about environment variables: according to Remix docs dotenv should only be used when starting the development script via node -r, see server environment variables. However, I prefer your way much better. Is there something wrong with it then?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I always avoid calling it via code. It's a potential source of bugs if you ship a ".env" to production by accident.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed! Fixed 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

8 participants