{"id":28536,"date":"2022-04-28T14:40:01","date_gmt":"2022-04-28T14:40:01","guid":{"rendered":"http:\/\/how-to-validate-media-uploads-in-javascript"},"modified":"2022-04-28T14:40:01","modified_gmt":"2022-04-28T14:40:01","slug":"how-to-validate-media-uploads-in-javascript","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-validate-media-uploads-in-javascript\/","title":{"rendered":"How to Validate Media Uploads in JavaScript"},"content":{"rendered":"

Validation has become an essential concept in software development and the security of an application. We often run tests for vulnerability using validation on input fields. There are different types of validation in software development; this tutorial will focus on media files, validating the file extension, the number of files to be uploaded, and the file size.<\/p>\n

Setup<\/h2>\n

We will be using the live-server dependency for our development to aid with live-reload capability. Run the command below to install the dependency globally.<\/p>\n

npm install -g live-server\n<\/code><\/span><\/pre>\n
Navigate to the project folder and create an index.html<\/code> file. paste the code below in the index.html<\/code><\/p>\n
<!DOCTYPE html<\/span>><\/span>\n<html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\n  <head<\/span>><\/span>\n    <meta<\/span> charset<\/span>=\"UTF-8\"<\/span> \/><\/span>\n    <meta<\/span> http-equiv<\/span>=\"X-UA-Compatible\"<\/span> content<\/span>=\"IE=edge\"<\/span> \/><\/span>\n    <meta<\/span> name<\/span>=\"viewport\"<\/span> content<\/span>=\"width=device-width, initial-scale=1.0\"<\/span> \/><\/span>\n    <title<\/span>><\/span>Validate File Uploads<\/title<\/span>><\/span>\n    <script<\/span> src<\/span>=\"https:\/\/cdn.tailwindcss.com\"<\/span>><\/span><\/script<\/span>><\/span>\n  <\/head<\/span>><\/span>\n<body<\/span>><\/span>\n  <main<\/span> class<\/span>=\"flex justify-center h-screen items-center\"<\/span>><\/span>\n    <div<\/span> class<\/span>=\"flex flex-col justify-center\"<\/span>><\/span>\n      <input<\/span> class<\/span>=\"hidden\"<\/span> type<\/span>=\"file\"<\/span> multiple<\/span> name<\/span>=\"filePicker\"<\/span> \/><\/span>\n        <p<\/span> class<\/span>=\"text-red-500 mb-4\"<\/span> id<\/span>=\"error\"<\/span>><\/span><\/p<\/span>><\/span>\n        <p<\/span> class<\/span>=\"text-green-500 mb-4\"<\/span> id<\/span>=\"success\"<\/span>><\/span><\/p<\/span>><\/span>\n        <div<\/span> class<\/span>=\"grid place-items-center\"<\/span>><\/span>\n          <button<\/span> class<\/span>=\"text-white bg-gray-700 hover:bg-gray-600 px-6 py-2 rounded\"<\/span>><\/span>\n            Upload\n          <\/button<\/span>><\/span>\n        <\/div<\/span>><\/span>\n    <\/div<\/span>><\/span>\n  <\/main<\/span>><\/span>\n<script<\/span> src<\/span>=\".\/index.js\"<\/span>><\/span><\/script<\/span>><\/span>\n<\/body<\/span>><\/span>\n<\/html<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
\"\"<\/p>\n
Create A List of Allowed Image and Video Types<\/h2>\n
Create an index.js<\/code> file at the root of the project and paste the code below.<\/p>\n
const<\/span> videoMimeTypes = [\n  'video\/x-flv'<\/span>,\n  'video\/x-ms-wmv'<\/span>,\n  'video\/x-msvideo'<\/span>,\n  'video\/quicktime'<\/span>,\n  'video\/3gpp'<\/span>,\n  'video\/MP2T'<\/span>,\n  'application\/x-mpegURL'<\/span>,\n  'video\/mp4'<\/span>,\n];\n\nconst<\/span> imageMimeTypes = [\n  'image\/webp'<\/span>,\n  'image\/tiff'<\/span>,\n  'image\/svg+xml'<\/span>,\n  'image\/png'<\/span>,\n  'image\/jpeg'<\/span>,\n  'image\/vnd.microsoft.icon'<\/span>,\n  'image\/gif'<\/span>,\n  'image\/bmp'<\/span>,\n];\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The code above are the mime types where we add our extension types for images and videos. These types are the list of allowed types that can be uploaded.<\/p>\n
Grab DOM Elements<\/h2>\n
Before writing our validation functions, create an onload<\/code> function to confirm that the page is done loading before running the javascript code.<\/p>\n
window<\/span>.onload = function<\/span> validation<\/span>(<\/span>) <\/span>{\n  \/\/our code will be here<\/span>\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Our codes will be nested within the onload<\/code> function.<\/p>\n
Create javascript variables to point to the HTML tags using the querySelector<\/code>. Paste the code below inside the onload<\/code> function.<\/p>\n
const<\/span> filePicker = document<\/span>.querySelector('input'<\/span>);\nconst<\/span> button = document<\/span>.querySelector('button'<\/span>);\nconst<\/span> errorParagraph = document<\/span>.querySelector('#error'<\/span>);\nconst<\/span> successParagraph = document<\/span>.querySelector('#success'<\/span>);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Handle Upload<\/h2>\n
Next is to implement an onClick on the upload button. The function below will execute once we click on the upload button. It triggers the filePicker function, which is attached to a change listener. The change event is triggered when we upload a file.<\/p>\n
button.addEventListener('click'<\/span>, () => {\n  if<\/span> (filePicker) filePicker.click();\n});\n    \nfilePicker.addEventListener('change'<\/span>, (e) => {\n  const<\/span> files = e.target.files;\n  console.log(files);\n    \n\/\/ validation functions here <\/span>\n    \n});\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
Write Validation Functions<\/h2>\n
Once we drop the file in the browser, we need to start validating it. Here are the function signature of the validation we need to write:<\/p>\n
function<\/span> validateSize<\/span>(file, max<\/span>)\nfunction<\/span> validateExtension<\/span>(file, allowedExtensions = []<\/span>)\nfunction<\/span> validateLength<\/span>(files, max<\/span>)\nfunction<\/span> updateErrorMessage<\/span>(el, message<\/span>)\nfunction<\/span> updateSuccessMessage<\/span>(el, message<\/span>)\n<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Each of these functions has a vital role in validating our file upload.<\/p>\n