- Fork and clone this repository to your
Development
folder.
In this task, you will create a cool api that takes an image and returns the text inside. Aka OCR, Image to Text.
Use this image for testing
Create a route for the media files.
- Create a folder called
media
for your images. - In
app.js
, create a route with the path/media
. - Join
media
to the directory path__dirname
usingjoin
and pass it toexpress.static
. - Test your route by putting any image in the
media
folder, then in your browser go tolocalhost:8000/media/<image_name>
. - Add
media
to your.gitignore
file.
Set up the upload middleware using multer.
- Install multer
$ npm install multer
-
In your
middleware
folder (create one if you don't have it), create a file calledmulter.js
. -
In this file
multer.js
, copy paste the following code:
const multer = require('multer');
const storage = multer.diskStorage({
destination: './media',
filename: (req, file, cb) => {
cb(null, `${+new Date()}${file.originalname}`);
},
});
const upload = multer({
storage,
});
module.exports = upload;
- In
ocr/ocr.routes.js
, requireupload
.
const upload = require('../../middleware/multer');
-
Call
upload
middleware before theocrCreate
controller. -
Specify that
single
images are uploaded only and the field name isimage
.
- In
ocrCreate
controller method, check if an image was uploaded by checking ifreq.file
exists. - If a file is uploaded, save the path in the body of the URL.
- The path must include the request's protocol
http
and the hostreq.get("host")
followed bymedia
and the file's name.
- Use the following (package)[https://www.npmjs.com/package/tesseract.js/v/2.1.1]
- The rest is a challenge!
In multer.js
specify a size limit of 1 megabyte for the files uploaded.
In multer.js
specify a the file types which are allowed to upload, we need to only upload images!
Create a front end page for your ocr api!