React JS - How to upload file with progress percent step by step

hello everyone in this video tutorial we will be discussing how to upload a file with progress percent step by step using react.js uploading files is a common feature in web development and displaying the progress of the upload is crucial to give users an indication of how much longer they have to wait with the power of react.js we can create a smooth and seamless user experience by showing progress as the file uploads whether you are a beginner or an experienced developer this tutorial will guide you through the process of implementing this feature into your react.js project so let's dive in and learn how to upload a file with progress percent step by step with react.js okay to start I will create a further upload file progress bar this folder will contain client and server I will create a laravel project for the back end and reacts for the client OK project is done now I will handle the server side first I will open with Visual Studio code the purpose of this function is to upload a file submitted as part of the request the function first validates that a file has been submitted and that it has one of the allowed file types jpg jpeg PNG PDF HTML or mfur if the validation fails an error response is returned to the client if the validation passes the function retrieves the file from the request object and generates a unique file name by appending the current timestamp to the original file name it then stores the file in the public disk under the uploads directory with the generated file name finally the function returns a Json response to the client indicating that the file was uploaded successfully and includes the generated file name as part of the response the HP Artisan storage link is a laravel Artisan command that creates a symbolic link between the public directory of your application and the storage slash app slash public directory okay I finished writing the server code for file storage next I will do the client-side processing first I will write a template in app.js you can follow it this code is a react component that defines a file upload box it uses react hooks to manage the component's state including an array of selected files files an array of uploaded files uploaded files and a Boolean value to determine whether or not to display a progress bar show progress it also creates a ref object file input ref to reference the file input element in the components jsx when a user selects one or more files to upload the set files function is called to update the file state with the selected files when the user clicks a button to upload the selected files the axios library is used to send a post request to a server with the selected files as data the handle file input click function uses a ref to a file input element file input ref to programmatically trigger a click event on the file input element when the handle file input click function is called the code is checking if the variable show progress is true and if so it will render a loading area with a list of files being uploaded the list is generated based on an array of files using the map method for each file a list item element is created with a file icon file name and the uploading progress displayed as a percentage the uploading progress is represented visually using a loading bar that is updated in real time as the file upload progresses the width of the loading bar is determined by the file loading value which is a number between 0 and 100 that represents the percentage of the file that has been uploaded so far the map function is used to iterate over the array of uploaded files and create a new array of list items with the file details the key attribute is used to assign a unique identifier to each list item to help react identify which items have changed added or removed inside the list item there is a container div with the class name content upload that contains an icon and the file details the icon is a fun awesome icon of a file and the details include the file name and size which are accessed using the name and size properties of each file object this is a JavaScript function called upload file that handles the uploading of a file to a server using the axios library it takes an event object as its parameter which represents the input change event when a file is selected first it checks if a file has been selected and if not returns without doing anything then it creates a form datum object and appends the selected file to it it then sets the file state using the set files function the file state is an array of objects where each object contains the name of the file and the percentage of the file that has been uploaded so far the set show progress function is called to show a progress bar during the file upload next it makes an HTTP post request using the axios library to upload the file to a server at the URL the unupload progress callback function is passed as a configuration option to the request this function is called periodically during the upload to update the progress of the file being uploaded within the unupload progress callback function the set files function is called again to update the percentage of the file that has been uploaded so far when the file has finished uploading i e the loaded and total parameters are equal the set uploaded files function is called to add the uploaded file to the uploaded file state and the set files and set show progress functions are called to reset the state and hide the progress bar respectively okay I have done the project the uploaded files have been sent to the server and saved in public thank you for watching goodbye and see you in the next tutorials

Channel: HHV Technology

Views: 11,489

Keywords: upload file with progress reactjs, file upload with progress bar reactjs, upload files in react, react upload example, react file upload example, react file upload button example, react upload file with progress, react upload file progress bar, react upload progress, react upload progress bar, show progress bar while uploading file in react, javascript upload file with progress bar, file upload with react, file upload with progress bar in react js

Id: u31mCmwBFS8

Length: 18min 35sec (1115 seconds)

Published: Thu May 04 2023