Welcome again to my blog, today we gonna learn how to upload files or images inside Deno, as uploading files or images inside Node can be handled with Multer but in Deno handling file upload is still a mystery so let unwrap this…
For uploading our we gonna need Oak Middleware Upload module from Deno‘s website. We also add other modules inside our project which include Oak and View Engine to server our webpage and manage our application. So let’s set our View Engine boilerplate codes.
// Importing Module
import {Application, Router} from 'https://deno.land/x/oak/mod.ts';
import {viewEngine,
engineFactory,
adapterFactory} from 'https://deno.land/x/view_engine/mod.ts';
import {upload} from 'https://deno.land/x/upload_middleware_for_oak_framework/mod.ts';
// Setting up our view Engine
const ejsEngine = engineFactory.getEjsEngine();
const oakAdapter = adapterFactory.getOakAdapter();
// Initiate our Application and Router
const app = new Application();
const router = new Router();
app.use(viewEngine(oakAdapter, ejsEngine));
// Setting our router to handle request
router
.get('/', (ctx) => {
ctx.render('index.ejs')
});
// Passing Router as middleware
app.use(router.routes());
app.use(router.allowedMethods());
// Server our app
console.log('App is listening on PORT 8000');
await app.listen({port: 8000});
Now inside our “index.ejs” let’s a basic form which has a method of “POST” to the path “/upload” and enctype as “multipart/form-data”. Inside the form, tag adds an input tag which is type of “file” and name as “fileName” you can set anything you want. Our index.ejs file gonna look something like.
<body> <form method="POST" enctype="multipart/form-data" action="/validated"> <input type="file" name="fileName" multiple> <br> <input type="submit" value="submit"> </form> </body>
Now inside our app.ts file let’s create a method to handle POST request as
.post('/upload', upload('uploads'), async(context: any, next: any)=>{
const file = context.uploadedFiles;
console.log(file);
context.response.redirect('/');
})
Now save your file and open the browser and check if your application is working or not. When you submit the form inside the root file where your application is stored a file upload will be created and you can see that file you have uploaded finally submit. Our app.ts file finally looks something like this in case you miss something.
// Importing Module
import {Application, Router} from 'https://deno.land/x/oak/mod.ts';
import {viewEngine,
engineFactory,
adapterFactory} from 'https://deno.land/x/view_engine/mod.ts';
import {upload} from 'https://deno.land/x/upload_middleware_for_oak_framework/mod.ts';
// Setting up our view Engine
const ejsEngine = engineFactory.getEjsEngine();
const oakAdapter = adapterFactory.getOakAdapter();
// Initiate our Application and Router
const app = new Application();
const router = new Router();
app.use(viewEngine(oakAdapter, ejsEngine));
// Setting our router to handle request
router
.get('/', (ctx) => {
ctx.render('index.ejs')
})
.post('/upload', upload('uploads'), async(context: any, next: any)=>{
const file = context.uploadedFiles;
console.log(file);
context.response.redirect('/');
});
// Passing Router as middleware
app.use(router.routes());
app.use(router.allowedMethods());
// Server our app
console.log('App is listening on PORT 8000');
await app.listen({port: 8000});
So finally we have implemented our uploading file inside the deno server so 😉. Check our video if you want to prefer to follow our video…
Top comments (0)