Forem: Mihai Stanciu

Uploading files to node.js server

Mihai Stanciu — Sat, 27 Feb 2021 18:40:27 +0000

This is a guide on how to use the multer library with express.

We start with setting up a basic form for uploading a file and other text information(optional).

I used React for this tutorial but the same result can be easily achieved with any other framework or with plain JavaScript.

Creating a basic React project

In order to start we need a working React project. Simply run this command in your terminal to set up a basic React project.

npx create-react-app <project_name>

Note: Replace <project_name> with whatever you want to call your project.
To check that everything is working run cd <project_name> and npm start. You should see a boilerplate React app in your browser.

Creating the form for uploading

We will make a form that will be used to upload files and a title for that file.

App.js

import React from 'react';

const App = () => {
    return (
        <form>
            <input type="text" name="text" />
            <input type="file" name="file" />
            <input type="submit" value="Submit" />
        </form>
);
    };

export default App;

Now we will set up a server using multer.js

Note: In order to start run the following command in a folder on the same level as the React project.

First initialize a node project in the folder for the server.

npm init -y

2.Then install express and multer using the following command.

npm i -D express multer cors body-parser

3.In your package.json we need to change some things

Add the following to your `scripts`

"scripts": {
    "start": "node index.js"
}

Also add type setting

"type": "module"

4.Make a index.js file for the server

import express from 'express';
import bodyparser from 'body-parser';
import cors from 'cors';

const app = express();

app.get('/posts', (req, res) => {});

app.post('/submit', (req, res) => {});

app.listen(3030, () => console.log('server listening on port 3030'));

We also need to set up some middleware

import express from 'express';
import bodyparser from 'body-parser';
import cors from 'cors';

const app = express();

app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.use('/uploads', express.static('./uploads'));

app.get('/posts', (req, res) => {});

app.post('/submit', (req, res) => {});

app.listen(3030, () => console.log('server listening on port 3030'));

5.Now let's prepare multer

import express from 'express';
import bodyparser from 'body-parser';
import cors from 'cors';
import multer from 'multer';

const app = express();

app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads');
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now() + '.jpg');
  },
});

var upload = multer({ storage: storage });

app.use('/uploads', express.static('./uploads'));

app.get('/posts', (req, res) => {});

app.post('/submit', upload.single('file'), (req, res) => {});

app.listen(3030, () => console.log('server listening on port 3030'));

6.Now make a uploads file right next to the index.js

7.Let's set up MongoDB

Run this command

npm i -D mongoose

index.js

import express from 'express';
import bodyparser from 'body-parser';
import cors from 'cors';
import multer from 'multer';
import mongoose from 'mongoose';

const app = express();

app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads');
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now() + '.jpg');
  },
});

var upload = multer({ storage: storage });

mongoose
  .connect('mongodb://localhost:27017/multer-test', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(res => console.log('DB connected'))
  .catch(err => console.error(err));


app.use('/uploads', express.static('./uploads'));

app.get('/posts', (req, res) => {});

app.post('/submit', upload.single('file'), (req, res) => {});

app.listen(3030, () => console.log('server listening on port 3030'));

Now we will create a model for the database

models/Test.js

import mongoose from 'mongoose';

const test_schema = new mongoose.Schema({
  file_path: {
    type: String,
    required: true,
  },
  description: {
    type: String,
    required: true,
  },
});

export default mongoose.model('Test', test_schema);

And after that we can use the database

index.js

import express from 'express';
import bodyparser from 'body-parser';
import cors from 'cors';
import multer from 'multer';
import mongoose from 'mongoose';
import Test from './models/Test.js';

const app = express();

app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads');
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now() + '.jpg');
  },
});

var upload = multer({ storage: storage });

mongoose
  .connect('mongodb://localhost:27017/multer-test', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(res => console.log('DB connected'))
  .catch(err => console.error(err));


app.use('/uploads', express.static('./uploads'));

app.get('/posts', (req, res) => {
    Test.find({})
        .then(response => res.json(response))
        .catch(err => console.error(err));
});

app.post('/submit', upload.single('file'), (req, res) => {
    const data = new Test({ description: req.body.text, file_path: req.file.path });
    data.save()
        .then(response => console.log(response))
        .catch(err => console.error(err));
});

app.listen(3030, () => console.log('server listening on port 3030'));

Note: This completes our server.

Now we will make a request from the server in order to upload a file

Back in our React project we run:

npm i -D axios

src/App.js

import React, { useRef } from 'react';
import axios from 'axios';

const App = () => {
    const formRef = useRef(null);
    const submit_file = e => {
        e.preventDefault();

        const form_data = new FormData(formRef.current);

        axios({
            url: 'http://localhost:3030/submit',
            method: 'post',
            headers: { 'Content-Type': 'multipart/form-data' },
            data: form_data
        })
            .then(res => console.log(res))
            .catch(err => console.error(err));
    };

    return (
        <form onSubmit={submit_file} ref={formRef}>
            <input type="text" name="text" />
            <input type="file" name="file" />
            <input type="submit" value="Submit" />
        </form>
);
    };

export default App;

Now we can upload files and save their path to the database

Also if we want access to our files and the data related to them we can make another axios request to http://localhost:3030/posts.

src/App.js

import React, { useRef, useState, useEffect } from 'react';
import axios from 'axios';

const App = () => {
    const formRef = useRef(null);
    const [data, setData] = useState([]);

    useEffect(() => {
        axios.get('http://localhost:3030/posts')
            .then(res => setData(res.data))
            .catch(err => console.error(err));
    }, []);

    const submit_file = e => {
        e.preventDefault();

        const form_data = new FormData(formRef.current);

        axios({
            url: 'http://localhost:3030/submit',
            method: 'post',
            headers: { 'Content-Type': 'multipart/form-data' },
            data: form_data
        })
            .then(res => console.log(res))
            .catch(err => console.error(err));
    };

    return (
        <form onSubmit={submit_file} ref={formRef}>
            <input type="text" name="text" />
            <input type="file" name="file" />
            <input type="submit" value="Submit" />
        </form>
);
    };

export default App;

Now we have acces to the file path and text within our data array.

src/App.js

import React, { useRef, useState, useEffect } from 'react';
import axios from 'axios';

const App = () => {
    const formRef = useRef(null);
    const [data, setData] = useState([]);

    useEffect(() => {
        axios.get('http://localhost:3030/posts')
            .then(res => setData(res.data))
            .catch(err => console.error(err));
    }, []);

    const submit_file = e => {
        e.preventDefault();

        const form_data = new FormData(formRef.current);

        axios({
            url: 'http://localhost:3030/submit',
            method: 'post',
            headers: { 'Content-Type': 'multipart/form-data' },
            data: form_data
        })
            .then(res => console.log(res))
            .catch(err => console.error(err));
    };

    return (
        <>
            <form onSubmit={submit_file} ref={formRef}>
                <input type="text" name="text" />
                <input type="file" name="file" />
                <input type="submit" value="Submit" />
            </form>
            <div>
            {data.map(el => (
                <div key={el._id}>
                    <h2>{ el.description }</h2>
                    <img src={`http://localhost:3030/${el.file_path.replace('\\', '/')}`} />
                </div>
            ))}
            </div>
        </>
    );
};

export default App;

This is it now you can upload files through a form.

If you have any questions please address them in the comments.

I also have all the source code for a project like this onn my GitHub profile, here.

Regex basics with explanations and examples

Mihai Stanciu — Mon, 18 Jan 2021 21:50:44 +0000

Regular expressions or regex, as it's more commonly known is a sequence of characters that form a search pattern. Simply put, a regular expression is like a database query, but for a string.
In this article, we will talk about the different special characters you can use and provide examples for them. After reading this, hopefully you will not have trouble with regex.

How to use regular expressions in JavaScript

To use a regular expression in JavaScript simply use the match() function on a string like this

const response = string.match('your-regex-here');

Of course there are multiple functions that deal with matching regex, but we want to talk about the regex itself, so here is a link that will help you.

Basic form of a RegEx

/regex/gmi

As you can see the expression has something to search in a string surrounded by / characters.
The g at the end stands for global, meaning search the entire string, not just the first line.
Additionally, you can add other characters at the end, such as i for case insensitive(ignores the difference between upper and lowercase letters) and m meaning multiline, making the expression search by lines.

Note: You don't need to use all three parameters, so you can just have /regex/g.

Basic searches

A RegEx can just be used as a way to search for a word or character in a string, although that defeats the purpose of even using them, knowing that we have functions that do this in most programming languages.

We will be using this string for our examples:

const string = 'RegExr was created by gskinner.com, and is proudly hosted by Media Temple.

Edit the Expression & Text to see matches. Roll over matches or the expression for details. PCRE & JavaScript flavors of RegEx are supported. Validate your expression with Tests mode.

The side bar includes a Cheatsheet, full Reference, and Help. You can also Save & Share with the Community, and view patterns you create or favorite in My Patterns.

Explore results with the Tools below. Replace & List output custom results. Details lists capture groups. Explain describes your expression in plain English.
';

Examples:

/,/g

This will return all the commas(,) in the string.

/in/g

This will return all the occurrences of the in word in the string.

RegEx special character

What makes regular expressions amazing are the special characters that we can use. Such as:

Note: In case we need these characters in our search, we can just use the \ character to escape and say that this is not a RegEx related special character.

1.the + character

/e+/g

This will return any sequence of the string, where there is at least 1 e. So it will return isolated e characters as well as e characters that are grouped(such as Cheatsh ee t)

2.the ? character

/ea?/g

This will return all sequences that have an e and also the sequences that also have an a. The ? character says that whatever is in front of it is optional.

3.the * character

/he*/g

This special character is a combination of the + and ? characters. Meaning it will return all h letters and then all possible e characters after it.(e.g. Cheatsh ee t, c h aracters).

4.the . character

/.he/g

The . character means match anything. So in this case above The, the or che will match it.

5.the \w and \W characters
*\w - will match any word
*\W - will match anything that's not a word

6.the \s and \S characters
*\s - will match any white space
*\S - will match anything that's not a white space

7.the | character - this is like saying OR

8.the ^ character

/^T/g

This will only match the character following it if it exists at the beginning of the string.

9.the $ character

/\.$/g

This will only match a . character if it is at the end of the string.

10.the <= characters

/(?<=[tT]he)./g

This will match the characters that are preceded by the specified search. In this case, any one character that follows the words the or The.

11.the <! characters

/(?<![tT]he)./g

This is the opposite of the <= characters. It will return anything the <= does not return.

Tips and tricks

There are some different commands with RegEx that do many things and offer variety to our searches.

1.the count {}

/\w{3,}/g

This will match any words with more than 3 letters. You can also add another value ({3, 5}) that will limit the word between 3 and 5 letters.

2.the options []

/[tcT]he/g

This will match a string with the last two letters he and the first letter a character from the provided list (t | c | T).

Note: To provide an interval we can just use the - character, like this [a-zA-Z0-9]. This will match anything in the specified ranges (a to z - lowercase, A to Z - uppercase and 0 to 9 - numbers)

3.grouping ()

/(ea){2,3}/g

This will match occurrences of the ea group of characters that appear between 2 and 3 times. If we used just /ea{2,3}/g it would only match the occurrences of the a character.

Resources

This website is an amazing tool for testing RegEx. I recommend it. This is how I learned RegEx and it's very easy to practice with it.

JavaScript Arrays - all you need to know

Mihai Stanciu — Wed, 13 Jan 2021 14:43:30 +0000

Arrays are, basically, lists of elements. They are a very important part of programming. In this article, I will introduce this data structure's usage and aspects in the JavaScript language.

How to declare an array

In JavaScript there are multiple ways of declaring an array.

1.using the bracket([]) notation
It can be declared as an empty array

const array = [];

// or we can also declare the values inside the array:
const array = [10, 15, 44, 39, 75, 99, 87];

2.using the Array keyword

const array = new Array();

// or
const array = new Array(10, 15, 44, 39, 75, 99, 87);

Fun fact: In JavaScript we can have arrays of objects or even arrays that have different types of elements. For example, this is valid:

const array = [12, "string", [1, "another string"]];

How to access elements in the array

As discussed above, an array is a list. So how would we access elements from this list?
We can use the brackets([]) notation like this:

const firstElement = array[0];

const secondElement = array[1];

Remember: In most programming languages, arrays start at 0 not at 1. So the first element is array[0] and the second is array[1].

Iterating through the array

In order to have access to all elements of the array we need to iterate through the it. Of course, we could just use the bracket notation([]), but in cases where we don't know how many elements in the array or the array has too many elements we need to iterate through it with a loop(while/for).

Example:

for (var i = 0; i < array.length; i++) {
  //now you have access through array[i]
  console.log(array[i])
}

We can also iterate through an array uisng the forEach() or map() functions.
Examples:

array.forEach((element, <index>) => {
  //the index parameter is optional and it returns the current index to be accessed
  console.log('Element at index ' + index + ' is ' + element)
})

array.map((element, <index>) => {
  //the index parameter is optional and it returns the current index to be accessed
  console.log('Element at index ' + index + ' is ' + element)
})

Common Array Functions

In JavaScript, any array has some available methods. These are basics of the JavaScript language and any developer needs to know them.

We will be working on this array for now:

var array = [21, 33, 11, 43, 97, 86, 10, 9];

1.length of array

array.length

This returns the number of elements in the array(in our case 8)

2.sorting the array

array.sort()

Sorts the array(so the array will become [9, 10, 11, 21, 33, 43, 86, 97]).

3.filter function

array.filter(element => element > 30)

Creates a new array that only has elements that check the condition(in this case [33, 43, 97, 86])

4.the push function

array.push(newElement)

This function adds a new element at the end of the array

5.the pop function

array.pop()

Removes the last element of the array and returns it; if this is assigned to a variable we have access to the removed value

6.the splice function

array.splice(<start>, <count>, <item1>, <item2>, [...])

Changes an array based on the parameters.
Parameters:

start - specifies the index where the changes start
count - optionalspecifies the amount of elements to be removed - if it is 0 or negative no elements will be removed(in this case at least one item is necessary)
[item1, item2, ...] - optionalelements to be added to the array starting at the given index(if it is not provided, the function will only remove elements)

7.the slice function

array.slice(<positionA>, <positionB>)

Returns an array with elements from the original array in the closed interval [positionA, positionB]

8.the concat function

array.concat([22, 34])

Adds the parameter to the array(in this case it will become [21, 33, 11, 43, 97, 86, 10, 9, 22, 34])

9.the indexOf function

array.indexOf(21)//returns 0 in our case

Returns the index of the passes element from the array.

10.the find function

var element = array.find(findFunction);

function findFunction(element, <index>) {
  return element > 39;
}

Returns the first element that fit the condition(in our case, returns 43).

11.the findIndex function

var element = array.findIndex(findFunction);

function findFunction(element, <index>) {
  return element === 43;
}

Does the same thing as the find function, but returns the index of the element instead of the value.

Conclusions

Presented above, we have functions and properties of the Array object in JavaScript. Of course, these are helpers and can be implemented as well, but is is easier to use them(no need to reinvent the wheel). You don't need to remember them exactly, you can just remember that something like this exists and google them. I hope this was helpful and informative.

Thank you for your attention.

Concepts you should know to be a master of JavaScript

Mihai Stanciu — Tue, 12 Jan 2021 18:17:30 +0000

MLH #MajorLeagueHacking #LocalHackDay

How to use JavaScript

JavaScript is an amazing programming language. It is most popular as the browser's programming language, but that does not mean that's all it is good for. It is used for much more...backend development, desktop development, machine learning, and many more.
For anything not in the browser, one way to compile and run JavaScript is Node.js.

With the browser

In the browser, you can just add a file with the .js extension to your HTML using the script tag like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>

    <script defer src="path/to/file.js"></script>
  </body>
</html>

Note: Everything in the JavaScript file will be executed in the browser.

With Node.js

In order to run a JavaScript file on your machine all you need to do is use the console like this:

// script.js

console.log("Hello World!");

node script.js

What you need to know to master JavaScript

Data Structures

The concept of Data Structures is not specific to JavaScript. But there are some interesting features in JS for them.

Arrays

In JavaScript, arrays have special functions attached to them, called Array Methods.

The examples will use the following array:


var array = [18, 20, 22, 40, 15, 21, 16, 17, 96];

1.the forEach function:


function callbackFunction(value, <index>) {
  sum = sum + value;
}

array.forEach(callbackFunction);

This will return the sum of all elements in the array, without creating a new array.

The value parameter has a specific element of the specified array.
The index parameter is optional and returns the current index.

2.the map function


function callbackFunction(value, <index>) {
  sum = sum + value;
}

array.map(callbackFunction);

This does the same thing as the forEach function, but it generates a new array to work on.

3.the filter function


function callbackFunction(value, <index>) {
  return value > 20;
}

array.filter(callbackFunction);

This function creates a new array with element that pass the test from the function passed as parameter.

4.the reduce function


var sum = array.reduce(callbackFunction)

function callbackFunction(total, value) {
  return total + value;
}

This function will reduce the array to a single number. In this case it will reduce it to the sum of all elements within it.

The parameters are:

total - initial value / previously returned value
value - the current value

Objects

In JavaScript, objects are a collection of other elements of the language. I say other elements, because it can also contain functions and other objects.

Example:


const object = {
  elem1: "text", //a string
  elem2: 2,      //an integer
  elem3: function () {
                 // a function
    const a = 2, b = 3;
    return a + b;
  },
  elem4: {       // an object
    elem: "text2"
  }
};

How to access elements of an object

You can access an element from an object using the . notation.


console.log(object.elem1);     //return "text"

console.log(object.elem2);     //return 2

console.log(object.elem3());   //return 5(2+3);

console.log(object.elem4.elem);//return "text2"

Functions

In JavaScript there are 3 ways to declare functions:

Named function

function myFunction() {
  //code here
}

Anonymous function

function() {
  //code here
}

Arrow functions

const myFunction = () => {
  //code here
}

There are different ways of using functions:

Normal

myFunction();

IIFE (Instantly Invoked Function Expression)

function myFunction() {
  //code here
}();

Note: As you can see the function is called instantly after it is declared. We can tell by the parenthesis () at the end of the function declaration.

Returning a function

A function can return another function, with the returned function being called a Closure. Here is an example:

function parentFunction() {
  return {
    function returnedFunction() {
      //code here
    }
  }
}

parentFunction().returnedFunction();

**Note: **This concept helps with encapsulation(technique for compartmentalizing information).
Example:

function parentFunction() {
  function _privateFunction() {

    return "text to be returned"
  }
  return {
    function returnedFunction() {
      return _privateFunction();
    }
  }
}

parentFunction().returnedFunction()  //"text to be returned"

Promises

Producing code is code that can take some time. Consuming code is code that must wait for the result. A Promise is a JavaScript object that links producing code and consuming code.

let myPromise = new Promise(function(resolve, reject) {
  resolve();  //when successful
  reject();   //when an error occurs
});

myPromise
  .then(res => {
    //when the call is successful
    //we have access to the result via the res parameter
  })
  .catch(err => {
    //when an error occurs
    // we have access to the error via the err parameter
  })

Async/await

the 'async' keyword When async is in front of the function declaration, the function will return a Promise. So:

async function myFunction() {
  return "Hello World!"
}

is equivalent with:

async function myFunction() {
  return Promise.resolve("Hello World!")
}

the await keyword The await keyword before a function makes the function wait for a promise.

let result = await promise;

**Note: **The await keyword can only be used inside an async. function.

Web API requests

Making requests to APIs is an essential part of JavaScript. Every developer is required to know this. For example:

a front-end dev is required to know in order to access APIs to make the project more interactive(sending emails, saving in databases, etc.)
a back-end dev needs to know this to be able to access existing services(Spotify API, Discord API, Twilio API, etc.), instead of coding the from 0(not reinventing the wheel)

There are 2 great ways to make API calls:

with the fetch function (included in the basic JavaScript installation) - no need to install anything


const options = {
  method: "GET/POST/PUT/DELETE",
  headers: {}, //optional
  data: {},  //optional
  body: {},    //optional
}

const request = fetch('url/of/api', options); // this returns a promise so we could and should use the await keyword

const result = request.json(); // returns a JSON object

const options = {
  method: "GET/POST/PUT/DELETE",
  headers: {}, //optional
  data: {},  //optional
  body: {},    //optional
}

fetch('url/of/api', options)
  .then(res => {
    //returns a JSON object
  })
  .catch(err => {
    //code for error here
    console.error(err);
  });

with the axios function - axios function needs to be installed

**Note: **You have to import the axios library like this:

import axios from 'axios';

const options = {
  headers: {}, //optional
  params: {},  //optional
};

axios.<get/put/post/delete>('url/to/api', options)
  .then(res => {
    // can access a JSON object
  })
  .catch(err => console.error(err));

const options = {
  headers: {}, //optional
  params: {},  //optional
  method: "GET/POST/PUT/DELETE"
};

axios('url/to/api', options)
  .then(res => {
    // can access a JSON object
  })
  .catch(err => console.error(err));

What helps in mastering anything code related

This next section is important, however it does not have any technical explanations. These are some tips on how to grow as a developer and what helps when you are looking to get hired. If you're not interested you can skip this part.

Join a community
Communities of developers can help you meet new people interested in the same topics. It's not only fun but also leads to learning from other developer's experience.
Contribute to Open Source
Join GitHub. Find something interesting. Add value to that project. For more information, I recommend Eddie Jaoude's Youtube channel. He has amazing content.
Participate in hackathons
Currently I am taking part in MLH's Local Hack Day: Build, and the challenges are great. They propose topics such as Combine Two APIs, Use a Music API or Use the Twilio API, and many other interesting problems you can solve alone or with your guildmates. It is an amazing experience and I recommend it to anyone serious about development and coding. #MLH #MajorLeagueHacking #LocalHackDay

Forem: Mihai Stanciu

Uploading files to node.js server

Creating a basic React project

Creating the form for uploading

Now we will set up a server using multer.js

Add the following to your scripts

Also add type setting

We also need to set up some middleware

Now we will create a model for the database

Now we will make a request from the server in order to upload a file

Now we can upload files and save their path to the database

Regex basics with explanations and examples

How to use regular expressions in JavaScript

Basic form of a RegEx

Basic searches

RegEx special character

Tips and tricks

Resources

JavaScript Arrays - all you need to know

How to declare an array

How to access elements in the array

Iterating through the array

Common Array Functions

Conclusions

Concepts you should know to be a master of JavaScript

MLH #MajorLeagueHacking #LocalHackDay

How to use JavaScript

With the browser

With Node.js

What you need to know to master JavaScript

Data Structures

Arrays

Objects

How to access elements of an object

Functions

There are different ways of using functions:

Returning a function

Promises

Async/await

Web API requests

What helps in mastering anything code related

Add the following to your `scripts`