├── public ├── scripts │ └── app.js └── styles │ └── style.css ├── README.md ├── server └── index.js ├── .gitignore ├── views └── index.html └── package.json /public/scripts/app.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Image Upload Client-Side with Cloudinary 2 | 3 | 1. `git clone` this repo 4 | 2. `npm install` 5 | 3. `npm start` 6 | 4. You're ready to upload dank memes. 7 | -------------------------------------------------------------------------------- /server/index.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var mustacheExpress = require('mustache-express'); 3 | var path = require('path'); 4 | 5 | var app = express(); 6 | 7 | // Middleware 8 | app.engine('html', mustacheExpress()); 9 | app.set('view engine', 'mustache'); 10 | app.use('/public', express.static('public')); 11 | 12 | // Routes 13 | app.get('/', function(req, res) { 14 | res.render('index.html'); 15 | }); 16 | 17 | app.listen(1337, function() { 18 | console.log('Running on port 1337'); 19 | }); 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | -------------------------------------------------------------------------------- /views/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Cloudinary Tutorial 5 | 6 | 7 | 8 | 9 |
10 | 11 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /public/styles/style.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | background: #F5F5F5; 6 | } 7 | .card { 8 | background: white; 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | justify-content: center; 13 | box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px; 14 | } 15 | 16 | .file-upload-container { 17 | width: 100%; 18 | height: 50px; 19 | overflow: hidden; 20 | background: #3F51B5; 21 | user-select: none; 22 | transition: all 150ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; 23 | text-align: center; 24 | color: white; 25 | line-height: 50px; 26 | font-weight: 300; 27 | font-size: 20px; 28 | } 29 | 30 | .file-upload-container:hover { 31 | cursor: pointer; 32 | background: #3949AB; 33 | } 34 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cloudinary-image-upload", 3 | "version": "1.0.0", 4 | "description": "Image upload with Cloudinary. It's a beautiful thing.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "nodemon -e js,css,html server/index.js" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/DmsChrisPena/cloudinary-image-upload.git" 13 | }, 14 | "author": "", 15 | "license": "ISC", 16 | "bugs": { 17 | "url": "https://github.com/DmsChrisPena/cloudinary-image-upload/issues" 18 | }, 19 | "homepage": "https://github.com/DmsChrisPena/cloudinary-image-upload#readme", 20 | "dependencies": { 21 | "express": "^4.14.1", 22 | "mustache-express": "^1.2.4", 23 | "nodemon": "^1.11.0", 24 | "path": "^0.12.7" 25 | } 26 | } 27 | --------------------------------------------------------------------------------