On the fileside of things

Hello there, reader, and welcome to this post. You should know me by now, if not, my name is Abdul Kabia!

So the past couple of weeks I was tasked with finding a bug or issue on a Github repo and making a contribution to it. Now this is something I’ve done before, but this time, the goal was to do MORE than I had previously. So instead of just focusing on CONTRIBUTING.md files, this time, I would touch actual code. So I did!

What I was met with

For this release, I decided to work on a repo of one of my fellow students, actually. He has an NPM package that is also on Github that you can work on. The package is meant to process large files and return a hash to its user, pretty cool, if you ask me.

Looking at the repo at the time, it had 2 issues. I decided to work on issue#4 (the second one). So forked the repo, I did, clone it, I did.

2cdc51d523244d265fb0ed8bdc5d36bc

Now getting familiar with the code wasn’t very hard, in fact, it was VERY interesting. The reason for this is because it introduced me to something didn’t even know was a thing, and they’re called .pug files. It’s actually a very cool way to generate a HTML page without all the necessary HTML tags like or head, title, and all those tags! Instead, you have the following.dcaccefff699f8b87b09b04ffc67fd3b.png

Yes, it’s that simple, no more forgetting closing tags! Simply type what you want, and make sure that you indented properly to indicate that something is supposed to be INSIDE another, like I’ve done!

Now the way that page above works from what I came to learn while working on this project is like so: Essentially, pug files are templates for HTML  code, they can be used to make HTML pages without all the text and mush. And the way you pass text to them is through the variables like you see on line 4 that has #{title}, now whatever that variable contains will be parsed into the h1 tag, along with the word ‘Results’. Pretty neat stuff, huh? Also, the line below that (line 5) is just a div with the id ‘results’. Fairly simple so far.

Below is how you would actually render this page and pass variables to it

res.render("index", {
title: "Fileside",
stats: arr1
});

view raw
index.js
hosted with ❤ by GitHub

Seems very straight forward, right? You’re rendering the index.pug page, and passing it a key called ‘title’ and ‘stats’, and those will contain values from my functions. Those values now get read by the index.pug file and it gets displayed. Here is how that page looks after it’s been rendered!

8e89abefab562f7d9da8fac55db8eef3

Pretty cool, huh? So yea, this is essentially the project I was getting my hands on. Now onto what I actually did!

The task at hand

As mentioned above, I was to implement an upload option for users of this package. So lets get to how I did that!

In order for me to do that, I first had to see how this code works, I noticed there was a file called fileside.js, and it was in this file that all the file size getting and hashing was done. So if this were an API, this would be the guts of the API. But this wasn’t what I was actually looking for. Instead, what I was actually looking for was a way to create a page that will allow a user to upload a file, and have that ‘API’ do the work! Which ultimately lead me to the .pug files above. So here is the .pug file I ended up creating!

extends layout
block content
h1 Fileside Upload Screen
h3 Upload a file to have it hashed
form(action="/upload", method="post" enctype="multipart/form-data")
input(type="file", name="userFile")
input(type="submit", value="Submit")
h1 #{message}

view raw
upload.js
hosted with ❤ by GitHub

Now look at how simple that is. It’s like 100 times simpler than creating an entire HTML document and all, .pug files are honestly amazing.

Anyways, that was the file I had designed for uploading and it was working just fine.

cb729b24c2da32735ce1db3b7f3cda99.png

So yea, a fairly simple upload screen, very easy to follow. Next come the coding of the actual uploading.

For uploading files, I used a library called multer. Now I will admit, multer is not the BEST, it really isn’t. And the reason I say that is because whenever I would upload with it, it would for some odd reason remove my file extension and proceed to give my file a completely random name. But thankfully, it kept track of all that, so if I were to refer to the current file being uploaded, it can get it for me. So all wasn’t lost! With multer by my side, this was a piece of cake!

router.post("/upload/", upload.single("userFile"), function (req, res, next) {
var userMessage = "";
if (req.file) {
var fileDir = req.file.path;
fileside.getFileKb(fileDir, function (err, result) {
if (err) {
throw err;
}
arr1.push(result);
console.log(result);
});
fileside.getFileBytes(fileDir, function (err, result) {
if (err) {
throw err;
}
arr1.push(result);
console.log(result);
});
algorithms.forEach(function (value) {
fileside.fileHash(fileDir, value, function (err, result) {
if (err) {
throw err;
}
arr1.push(value + ": " + result);
console.log(value + ": " + result);
});
});
res.render("index", {
title: "Fileside",
stats: arr1
});
} else {
userMessage = "File was not recieved";
res.render("upload", {
message: userMessage
});
}
arr1 = [];
});

view raw
route.js
hosted with ❤ by GitHub

And just like that, I had written the function and had gotten it working. So overall, a job well done!

I even ended up making a pull request on Github after I had reviewed my changes. I hope it gets accepted!

Conclusion

Ultimately, this was a lot of fun. The aim of these is to learn something new everytime, and I definitely learnt something new. And that is the existence of .pug files. Literally the best thing I’ve seen all year, and we’re nearly 5 months in!

If you’d like to see the PR I made after doing my contribution, click here!

I’d like to thank you for taking the time to read this far. If you have any questions, please don’t hesitate to leave them in the comments section!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s