Giter Club home page Giter Club logo

react-image-upload's Introduction

React Image Upload

React Image Upload

Medium post that details this repo

Getting Started

git clone https://github.com/funador/react-image-upload.git
cd react-image-upload/client
npm i && npm start
// open new terminal
cd react-image-upload/server
npm i && npm run dev

To run this project you need a Cloudinary account.

You can sign up with Cloudinary here. Afterwards you will need to plug your keys into a .env file that needs to be created as well.

// server/.env
CLOUD_NAME=your_cloud_name
API_KEY=your_cloud_key
API_SECRET=your_cloud_secret

But that is it for the setup!

Issues

Something not working? Please open an issue

react-image-upload's People

Contributors

funador avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

react-image-upload's Issues

Authentication issue

Hi,

I am getting 'Must supply api_key' response from the server when trying to upload to Cloudinary. I am mostly using your code with no additions, just the multiple-image upload removed.

I created the .env file and have placed my credentials in there.

CLOUD_NAME=serdar-mustafa API_KEY=435187483574455 API_SECRET=XJsgK0RiS3_xzNkE2FsyfsjT-yM

Should anything else need updating, changing?

Receive "Cannot GET /" message

Hi,
Thanks for your tutorial so far, it has been very helpful. However, after running 'npm i && npm run dev' on the server, I get the message "Cannot GET /" in the browser.

In the console the error I receive is:

Refused to load the image 'http://localhost:3000/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

Hopefully you can help.
Thanks again

i'm not getting output. facing d below error..pls try to solve my issue

ReferenceError: basicdemo is not defined
at Object. (C:\Users\Susmitha\Downloads\react-image-upload-master\server\server.js:11:15)
at Module._compile (module.js:653:30)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Function.Module.runMain (module.js:694:10)
at startup (bootstrap_node.js:204:16)
at bootstrap_node.js:625:3
[nodemon] app crashed - waiting for file changes before starting...

Error uploading image

Hi, I'm getting the following issue. Is there anything you can do to help me with this? Thanks a lot!
Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0
82 | })
83 | })
84 | .catch(err => {

85 | err.json().then(e => {
86 | this.toast(e.message, 'custom', 2000, toastColor)
87 | this.setState({ uploading: false })
88 | })

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.