Complete File Upload Using MERN Stack || Reactjs Nodejs Expressjs Multer Mongodb with Progress Bar

[Music] hello friend today i will show you how to upload a file using node.js in node.js using express multi package so let's start first of all create a directory and npm in it go to create mpm node.js basic package.json file code dot browse to vs code and npm install first of all express then mongoose for database to store a file and database and multi for file uploader file file upload and a body parser to parse the body and json and cores to one more package required and payments node mode for development servers for live reload server so first of all we create direct different folders structure and index file after that we have to create a database file for configuration with mongoose and where and a folder like routes first specified routes and models for models and also controllers for controller files helpers for helper files so this is a basic structure no first of all file helper.js file for help multiconfiguration you set const multer is equal to require multipackage that we have installed earlier cost path of course we need require a part for getting a folder of files storage multi-rot disk storage destination it is a function request file that will receive from web user callback function callback function null of otherwise uploads folder upload folder we have to create so create folder upload folder for save for files to store in that folder now file name request file callback function all back first parameter will be null second parameter will be string new data unique for file name dot which is string dot replace because our string have slashes by default we have to remove that forward slashes and previously iphone on side that side now foil file dot original file name now create file filter for specific file that we want to store like jpg png etc if if file dot mime type equal to image slash png or file dot mime type is equal to image slash jpg or one more we require file dot mime type equal to image slash p jpeg jpeg file if all these require file if file type all between these two three files then callback return true otherwise callback return false cb null false okay instance of multi cost upload is equal to multa to parameter storage for storage that we have function created above storage and for file filter we have to pass file filter and file filter now module dot export upload that's it from the monitor configuration now we have you know now created a database connection with mongoose first of all acquire mongos equal to require mongos [Music] module.export is equal to arrow function mongoose dot connect string mongodb you have to write like only like this mongodb colon slash slash forward slash local or slash and the database name whatever we whatever we want to name that database upload dash files dash database these parameters required i'm going to be new use new parcel url password true and use unified topology true because i have to draw these four parameters use create index row and use find and modify true dot then some simply print the database connection successful console.log connect it to database connect it to database to mongodb that's it for mongodb connection now we have to create index file for configuration express server acquire express const path for quality following directory for uploads images cost to express require if this is for database initialization in index for index file to initialize the database only f dot use course for http requests post requests or whatever you want and body parser this pass the body to json [Music] i'm not use course app.use body parser dot json okay and app.use first uploads folder path to access everywhere images in the in this folder from this folder expo statics by the join directory name and specific that folder path name uploads app.listen we have to access dot environment dot port or 8080 option port console.login or simply print console.org server is listening on url http and localhold forward slash forward slash port in dynamics so we have you to use backtech this is available in esj es6 or on above in javascript syntax we have to write dollar sign and put a dynamic value and in the curly braces that's it for index file configuration no setup for node mode to start a development server and refresh every time when we hit save on file npm start okay that nice surface listening and the connected to mongodb also connected so now we have to create a controller a file upload file uploader controller save the file in databases and database and single file upload first of all we have to first of all we to create single file for single file upload use new using try cache block for any errors coming through this response of status if error then responds the status 400 dot send error dot message only if not alright then we have to then const file is equal to request is equal to request dot file request dot status dot 20201 dot send file file uploaded successfully simply print the message module let me explain how to export this module to modular export single file upload just like that now we have to clear route file up dash upload dash routes dot js you stick for strict mode js file cost express equal to require express server [Music] single file for route url uploader single this is a file this is a file upload a single file that we have to write that name any of that name written in the this file user input all right so single file we have to grab the controller that we have set up here single file upload you have to pass in this three third parameter under.export equal to routes colon router simple and easy now we have to add this router and configure it router in the index file first of all app.use and api slash comma import router file first file also equal to require route slash file upload routes file loads dot routes that's it you have to check a file and console for the property file i have had in there stop the server is listening every time so on another npm start again install the development server go to the postman and enter http colon slash localhost colon 8080 slash api slash single that we have written here an url copy this and paste there an api for a payroll and slash url that we have created a single file in the body we have to write this centering or anything identifier a property like in file type file select file any of you want to file ad first of all justice images and post request send let's say file uploaded successfully and file i have uploaded file and this folder uploads sorry this is a file with a timestamp and do you sustain these two as a string format and name that hyphen and this is the file properties that a file have file name original name and will be browsing a file or sending a file to client or any other now create this file object with these properties that we have saved that we want to save in database for file name request.file.original name file path request dot file dot path i'm sorry file.path file type request.file.mime type mime type and lost field file size request.file dot size because this file size is in bytes so we have to convert in kbmb's it's like how to create an extra function was for file size for matter then let us see that that received two parameter bytes and decimal for decimal up to two decimal three decimal if bytes is equal to zero then simply returns zero bytes string else else const decimal dm is equal to decimal if provided are two cone sizes just like a bytes kb mb gb gigabyte tb terabyte pb eb yb just like these are all my years for file size zb now cost index we have to calculate mather floor math.log math.log we have to pass here bytes divided by method log 1000 and return pass float bytes divided by math dot pow 1000 and second parameter will be index dot to fixed dm decimal this will this will this will fix the decimal to specific points concat string dashes sizes index that index have this now format file size pass request dot file dot size and second parameter will be decimal this will be three decimal after point or four four decimal but simply default have two decimal after point we have to create new for model like single file dot js for mongodb model const mongoose npm package required mongoose const schema is equal to mongoose.schema cost single file schema is equal to new schema my property file name sorry file name type string and required true this will be a required field if we put true here then file path just like say type string and required true third parameter a property file type type string and required true this will also be required field mark as required field and unlocks properties file size and required true this is the basis schema for single file upload and this will create uh in in in in the file object timestamps created or updated that automatic add mongos by default if we timestamp or true and model.export is equal to mongoose.model single file any of the document name or table name then single file schema that's it for single file model first of all we have to import your stick for strict mode and import that single file require dot dot slash model the single file we have to create new object we have property pass these are properties that we have already assigned and getting data now we have simply passed new create new new file object single file and wrap wrap around this object simple after that we have to wait for our async request file dot save this will save the file in database now check again single file upload and save in database this time we have a session is this so this p jpg file we have to delete the previous one that we have uploaded folder is empty now now send this file post okay file copy successfully message is a paired and also file saved here and now check databases database have been created upload single file that table and document this is of whole added there's a kb with good dash and and dashboard though so we have to remove this dash and only put empty space here now upload one more file okay send file uploaded now check database and refresh here and this file now this file this is file size and kb now i have file path multiple file upload equal to async request or function request response and only simple next middleware to jump to next middleware and try cashblock try catch if any error respond or status 400 if you send a bad request dot send error dot message response or status 201 dot send files uploaded successfully files uploaded successfully that's it now pause multiple file upload function here and create that route for multiple file first of all import multiple file upload and router.post multiple file of multiple files only upload dot oh sorry now this time we have to upload dot array for files identifier or property like multiple file upload okay that's it for multiple file upper routes let first of all we have to create array let files array empty array then this will be empty and request dot files dot for each loop to act to access the or access all the files with all in our format for formatted object cons file is equal to file name element dot original file original name file path element dot path file type element dot mime type lost file size element dot and we have to format this file size file size parameter function that we have created earlier now pause this for element dot now pass element dot size and second parameter will be two to the two decimal places five dot push this file object this will push the all the all the files in the files array and finally const file multiple file that we have to want to create independence of the database so first of all required here to model create model multiple file multiple file.js cost mongoose equal to require mongoose const schema is equal to mongoose dot schema cost multiple file schema is equal to new schema title for gallery purpose or any thing and anything what and in any thing you want to add title for the type string required true and second property will be files array and arrive that receive an objects of array array of objects and then also with timestamps for created and updated it by default on finally module dot exports equal to mongoose dot mongoose dot model mod table name or document name multiple file and second parameter will be multiple file schema that's it for multiple file model for mongodb and now to all we have also doing multiple file model multiple file cost multiple files new multiple files first title this will be in body dot title and the file that we have initially that we have already the files array then only lost await multiple files dot save method to save in saving database on this url multiple file url and and we are initially in a new tab http slash slash localhost colon88 slash api slash multiple files post request and body form data first of all property title give any title neon gallery images etc whatever you want to add title and second parameter will be files and type also files and here we have and pass this parameter or property files multiplayer multiple multi select file one two three four and one two more five and six okay this file is selected uploaded successfully this is the one created and now check database now single table refresh and multiple first uh document and a pair and that's our document and an object with title number images and files array also and timestamp of course and files array that we have uploaded these are all files that we have uploaded from multi-full pop multiple file using multiple file method one more for multiple file this time we have only just two files open select ok two file selected now sending and file uploaded successfully also check for database refresh document and this is a title and files array two files uploaded these two files we have currently uploaded no now get the i got the list got the all the lists for using single file document and from database we just cost get all single files is equal to async request response next for to jump into next middleware if you want try catch or catch any error respond or status 400 dot send narrow dot message const files single file dot find this will um basically this find method will uh get the all the objects get all single files have to export this method and create a route router dot get slash get single file get all single files that method we have created in controller now check http localhost colon 8080 api slash get single files okay 200 response this is the list and from database and single files folder or table or document whatever these two these two of these two object that we have received in here now same for multiple file just type multiple and here also multiple file model dot find all the objects in the in this file and database from the device get all multiple files and hold that export and also you have to create a route for multiple file just type multiple get all multiple files auto import and here multiple get multiple files send and this is a list for all multiple file from database see next nested array now so you can check and browser this chrome extension for json formatter i have include in chrome this these two of these two objects from database simply multiple files one and title objects etc and second object will be here that's it for this tutorial thanks for watching see you again hello friends no create or uploading file so let's start react app and give any app name like a client project hit enter this will take a while to complete the process so did no go to directory cd cd client project enter and simply type npm start to start the react application so here is our react application no no go to bootstrap and copy this link home page version 4.5 i have been using so copy this link for css purpose paste expand public index html and paste in the head section for bootstrap let's minimize this and also these three links jquery bootstrap.js we have to include in the body section here that's fine now close this into html and go to source app.js first of all first of all remove remove we don't need this and also this style no is a blank page let's start for design first also remove this logo the whole div class name class name container to go in the middle of the page e or single uh and multiple file load using mer stack i mean express and react and node mustac technology we have to give the class name for style this only first check this knowledge here first text danger this will this will texture font weight bolder to bold the font and border bottom bottom and also and also for text center i'll check some some single small border and text red and bold and in the middle now now we have create first screen for a file upload folder screen like this and file file upload screen dot js react template and function name row margin top two r3 and div class name call dash 6 also six one one div column more now div class name form group and this we have a label [Music] single file select select single file and i have an input type file class to form control no i have a button div class name row div class name call dash 10 i have a button here type button and upload row and div class name called 6 for equal spaces or label label just as a title for gallery upload multiple images and input input type here text for title for multiple images class name form control single self closing okay now in the second day i have to put this and just change the text for multiple select multiple files and just say attribute multiple type file and attribute multiple now go to browser c refresh the browser no because we have i have to add include here for upload for file upload screen this will automatically import on this and now i have to check on browser now this is a basic style for uploading we have to give the button btn class like class name btn btn danger and also copy and here i have to paste for single file btn btn ranger now that's looking nice okay this will automatically open and select the file okay this is also working for multiple four five selected okay enter text okay now if you want to place holder here then and text field enter title for your gallery images etc whatever you want to add here now first no on change events and so we have to set on change on file change single file change i have to add a function event single single file change this will take event so you you know we we are going to use hooks first of all imports the imports the hooks like a use state for state management and use effect for page load on data how to get data for payload now single file set single file and use state initial value will be empty a string no cost multiple file set multiple files you state this this will also be a empty string create function const single file change single file change this will take an event arrow function set single file event dot target dot files and this will be a only zero first file only one file this is a single file and now one click upload single file upload single file how to add and create a function upload single file oh sorry upload single file this will be asynchronous function for a signal request i will go through this function after just tell just a bit later no now also i have we have to add on change in this title event um for title add here state cost title set title use state empty string initially now set title event dot target dot value because this is a input string input field and also for a multiple file on change event multiple multiple file change event let's create almost multiple file change event set multiple files event dot target dot files only because we have to we have to get all the files and also on click for multiple upload upload multiple [Music] files close acsync function for handling async request first check to upload console dot log here single file and also console.log air multiple files go to brother check this values in the file first single file selected there's this and just no you can see here single file selected this will file name file size image jpeg etc now for multiple files selected this this this four selected by four selected file now upload and here are these list of four files one two three four length four file selected now let's start for tall and pm install axios and and react react dashes circular dash progress bar for checking this check for progress bar for progress on uploading file hit enter now for api pxs created folder data and file name we'll give the name epa.js first of all import axios from xuse and here define const api url string that that we have let's split this terminal and cd server server project and enter npm start or start store the ap server and here is the api url that i have created earlier and copy and paste here and include api slash here this will have base url and export export cost a single file upload first to the server this will also be async request try catch through error if any error otherwise await axios dot post api url plus here are routes for file single file upload and in the server project here and for simplified post request and for route is single file and i have to give the name like this parsing name in single file and here are data that we i had that we received and go to file uploads again first import api data slash api and a single file upload function so why output function no for single file upload i have to create first cost cost form data new form data and this variable this object for sending the file in form data and form data dot append first string file name that i have given here you have to put same name here and also here will be a form data dot append and single file that i have stored here okay and also a weight keyword on grab the function single file upload single file upload pause the form data only there is no need for console the file that's it for single file npm star knows let's check for single file upload select file just one file open and upload you see here in upload folder here we have one file for upload okay now let's grab the file in our main app.js section no div clause container fluid give class name row div class have to margin top everything anything you want call dash six just uh two yeah and from in this section um only had h3h4 class name text dash success font weight bold and single files list here class row first of all first we have to make a function here for getting the single file from api cost get single files async function also try catch any error throw error if any error and cost data await axios axios dot get apa url plus for getting the file single file road we have get single file api single quote get single files while we're using excuse this will give a response in data and inside data inside data variable so object destruct like this in modern javascript we have to and we have to we we cannot if we want to give without data or data so first so we just only distract the object and just data and return data only in app here first import api data slash api and get single file and also i also here import react from react and use state hook and use effect hook cost single files set single files you state you state this will be this will initially be an empty empty array and for cost multiple files set multiple files use state this will also be an initially an empty get single file [Music] list just we can give any any name async function for getting all single files from api try catch or any error console.log error await cost data like a files list or array any thing await get single files and set single files files list and on page upload page load loading we use use effect to get data and call that function while pages have been load and second will be and this will be a get single files list function here only single files files dot map because we want to map the array and here first file element or object and second will be index here we are row we have to repeat in two column two so div class name call dash six and this div div for image div class name margin bottom two and border will be zero and also padding 0 for image we have to add image img tag source we have to concatenate backtick http colon colon local host to api url 8080 slash here we give the file dot file path all right 200 i 200 alt attribute image and okay and also claus image cord dash image img dash stop mg dash responsive this is the these are all booster class now let's check here is our first image that we have uploaded here no if we want to call this function when an image uploaded and call this function to get all get the latest data so we have to pause in the file upload screen props just easy get single here and get single files list we want to call this function from a file upload screen no props from here follower screen so first of all we have to write here profs and when we upload a single file then props dot get single file this will call the function this will call this function when we upload a file and get the latest file latest images just like say now let's try upload another image open okay and this will only autumn um uploaded the server and server give the response back to the client here only no no for multiple file upload for a multiple file upload we have data multiple files in and title and from here let's say title and multiple file multiple in this variable add a function here api export cost multiple multiple files upload async request data try catch try catch throw error if any error this will throw error to pause and console or print the actor now wait excuse dot post api url [Music] for multiple for multiple uh pi upload uh route route we have multiple files this will post and this is a selector for multiple files also title here and data only just like this and here const form data new form data for file upload form data dot append first of all title and and this title field state that we have set already and also form data dot append files array of files list of files now we have to render in for in for loop i just only and multiple files dot length and just we have to add this here and also multiple files i just like this and import here for multiple file upload function await upload multiple multiple file upload that form data that's it for multiple file files upload the server with title now let's check enter new gallery for food and select food item first first two three four five that's five files upload to server now let's check to the api folder don't first we have two files only single file and then one two three four and five file also uploaded to the server now now let's show and these file in render this this images in the section images section is in gallery section first h4 class name text success text success font weight bold multiple [Music] multiple files list also here dave class name row now here because we we because we are adding a title with a multiple file so so when we check here and multiple file is a single file and also in multiple files here we have an object like this and array of files here in the object of any property like variable files here and title here and youtube whatever you want and now we have to get all these files like this export export const get multiple [Music] files async try cache through error and here cost data await axios dot get api url plus uh for multiple file upload get multiple file we have to add copy and paste here and string like this and we are to return data and also object destruct like this multiple file and get single file also also for multiple files get multiple files also function constant get multiple file guest get multiple files list a sync function here and try catch for any error cost files list await get multiple files just like say here and set multiple files in this file list just simple and easy way and also get multiple files list function here while when when now check this multiple file first of all console to check the data multiple files go to browser and here is our object for and we have we have a title here and files variable this is also an array of files here and these are all files that we have uploaded earlier and the single font single object and then an array no here here we have to add multiple files dot map map element or any object whatever you want to give this name this single bracket small bracket and here and also give the key for mapping otherwise this will give an console warning and error just like index or element dot id whenever we want to map an array we have to define a key unique key to give that array otherwise otherwise this will give an a warning error on the console h 5 r 6 class name text danger font weight bolt here we have to get the title for gallery element dot title this see element.title okay no here we have to add an adhd clause name draw hmm also element dot files is also array we have to map for images file index into pass here give class name in two column we have to call add called s6 and again only copy this a single file now let's here add because these are saved for multiple file renderer let's see here we have here our five files that we have uploaded and title here now for quality for this function we have to pause here get multiple attributes and call that function from the file upload screen get multiple files get multiple files list okay copy and here paste here props dot get multiple only now add some multiple files again and for now this time we have to i have i want to add only two files open and give them food items item just arrived now just check there upload and this will enter here food item title arrived and to file and uploaded and recall complete now let no we have to i have to bind uh on a progress bar here while uploading a file progress bar bar will be showing and visible okay for progress ball i have i have already i have already installed a package react circular progress bar circular progress bar and for style here we have to add react progress dash dist dash style dash css for style purpose for very percentage like cost single progress for single file progress set single progress initially this will be a zero now excuse give gave us the progress for while while we are uploading a file from axios first const single file file progress single file options that we have to that we have to pass we excuse on upload progress progress event here cost progress event two variable there given loaded file and total file size centage math dot floor first loaded divided by 1000 because this this loaded file size will be in bytes now we have to convert in kbs and multiply by first impression this this this submission will be slash total divided by 1000 to convert in kbs so this is a percentage and set set single progress two percentage now for single file but we have to pause this this is a second or second object like options like single file or single file options here single file options and and find the api section for single file upload options that we have paused and options here only now just like that or multiple progress set multiple [Music] progress use state initially will be zero percent and we copy and paste just only change the multiple options file options and set multiple progress okay pause the multiple file while you're uploading a multiple file here multiple file options and also in the app section options and also here options just simple and easy div class div class call dash 2 circular progress bar and here here we have to you have the first value value will be single progress single progress that we set here single progress and text that's showing and just like that single [Music] progress and percentage cat and for style this these are these are styles purpose style build style here i also have to include import build style here now let's check for a single file here it was zero percent and when while we upload a file just like say about 1.666 mb and while uploading this will be a hundred percent okay now file uploaded now again when on change we have we have you own change event and change i have to set single progress zero initially okay and change to add one more file 3.7 mb and just okay file upload it and i will change this another file on chain this will be or reset okay just know for multiple file just copy and paste here and here multiple progress and just in here like this okay and also here for multiple progress okay now all set and one final thing on multiple files set multiple progress to zero when we change okay latest files latest food food items now select and this time we want to select all the items here all these files for bulk uploading with progress bar only i have selected 717 files now upload okay and these are all files uploading here latest four items one two three fours five six 7 8 9 10 11 12 13 14 15 16 17 files all files are uploaded no for a single file let's go to zero okay and okay also uploaded now these are all working and progress was also working so that's it for file uploading with one stack technology like react on client set and node.js in this server side to upload a single file and multiple thanks for watching take care bye bye

Channel: Heart Of Programming

Views: 8,787

Keywords: react single file uploader component, mern stack, react multiple files uploader component, react, file upload, node js file upload, express server with multer middleware, node js express, node js multiple file upload, reactjs file upload to server, file upload with node and react, file upload with react js, image upload with nodejs, react node js, file uploading using node js, multer multiple file upload nodejs, multiple image upload in node js, node with multer, node js, multer

Id: hE14MZnmKBU

Length: 101min 46sec (6106 seconds)

Published: Thu Jan 14 2021