Laravel Ajax Image CRUD 1: Upload Image with data using jQuery Ajax in laravel 8 with Validation

hey guys welcome back so guys in this video we are going to learn about laravel 8 jquery ajax image crud application guys so we will be inserting the images and editing updating and deleting and fetching all the records of this images using jquery ajax that is without the page reload so there will be no fresh refresh or re page reload okay so let's let's get started so first let's install a laravel application so guys i have already installed it this is my fresh laravel application and just get started with connecting your database so i have connected my database and now let's create a table okay so let me show my database first so this is my database and inside this i want create a table with the name employee so let's let's create our three things that is model controller and a table so first start your terminal and will create first a table so php artisan make colon migration create underscore employee table okay it should be plural not singular hit enter so my created migration so let's go to our database migration and at the last you will find employee table okay so employees and in under this we are going to create three fields so one will be the string input that is varchar where we will take employee name and next we will take one phone number and then one more thing one is image okay so let's keep all this in a string save guys and now let's migrate this table into a database so let me just show you my database right now you can see there is no employee table right now give a command php artisan migrate hit enter so migrating and migrated guys perfect so let's see that refresh first okay so here is our employee table cool so yep guys now let's create a model and a controller and get started to build the card application so first let's create a model php artisan make colon model where employee hit enter model created successfully let's go to app model where employee dot php and create a protected dollar table is equal to we are defining okay spelling mistake protected and the table name copy from here paste it protected dollar your fillable that is nothing but your table column fields so you can copy name phone and image so let's still name copy paste phone and one is image save it now you can close the table and your model and now guys last thing the controller php artisan make colon controller where i want an employee controller okay hit enter employee controller created let's go to http controller where employee controller okay now let's create a route so first let's go to routes web dot php let's create a simple route colon coolant get function where we will tell slash employee the controller which we have created that is employee controller okay so the class is imported column clone class add the index function you are going to call so when you call this url you are going to index function let's copy this guys and if you don't find this import the class of this okay so it's already imported let's copy this index function go to your employee controller create a public function with the name index where return view where i want to call inside the employee employee folder an index blade file so let's copy this employee and create one folder inside our resource views inside views folder i want to create the employee folder and insert this employee a index named blade file okay perfect so now this let's extend our layouts so extends that is layouts.app and start your section that is the content and the section so over here guys we need to give the design so we are using bootstrap five so let me just go to this path and i have imported the cdn link guys if you don't find you can just copy it from here get bootstrap.com where go on docs you can find that css and bundle link okay so you need to just copy and paste that so this is the css and this is a bundle so before that i'm copying a jquery cdn link okay so you can just google that jquery cdn link you will get that and copy and paste it that's it guys and this is a script yield which we will be using further so let's get started to design the form container row column md12 where card header h4 level image crud okay laravel jacks image crud where you'll tell employee data card body table okay let me just arrange this so over here you are going to start with the table design so right now we are not designing the table so let's just start with the inserting of form so just use a tag give a hash add employee okay give a class button primary button small float end save and now guys let's see the output so go to your web routes copy this path and get back to your laravel perfect so you are getting this output guys and now when you click on this we need a form pop-up model so for that let's use bootstrap 5 where you can type model and search for that so you can get a demo over here so let's copy this so i'm just copying this code copy and paste that into your index blade file add this a tag and this example model we will name it as model as add employee okay now get back copy the model so this model copy and paste above the form and the name which you have given that copy this and paste it over here paste that's it let's change the title add employee and your form starts here and ends here okay so now let me just minimize it back refresh and click on it you can see the form cool guys so now let's create our form of the input fields and the file let's start with that so first guys before this body model body open the form and close over here now you're not going to give any action just give method which will be post and we are sending files so we need to type enc type multi-part form data okay and let's create one id for this form which will be add employee form will mention it will be more clear because it's in a form tag so let's make it more clear and over here your input fields so form group 3 label name input dot form control and the name you have to give name okay so whatever that name we give copy paste paste paste more clear guys next is phone name attribute as phone and this is your image this input type file will be image file and this name attribute will give us image okay save button and this button type will be submit okay done and now let's let's see the output first refresh code so name phone and your image let's get back and now guys let's start the code of jquery ajax so let's get below over here let's start the section of scripts okay let's end that so this script is nothing but the the file which we have extended over here okay so this script you have to copy and paste it over here so yes guys now let's start with the script tag and start your jquery code so jq dock where let's select jq on event so jq on where document loads and the event will be on submit so on what submit you will go you'll be checking that that is nothing but the id so let's copy that id this is the form okay so form id you're going to copy okay let me just minimize this this my hash and that id to prevent the page reload and all you can just give prevent default event dot prevent default and after this let's create one variable with the let which will tell form data that's written small form data is equal to new form data okay function and inside this function what we are going to check that the form id because we will be using multiple forms right in the same page so for that sec we are going to declare that over here inside this so dollar open and close bracket single quotes hash and paste this because it's an id and of that we are going to take the first value that is zero okay perfect and now guys you can start with the ajax request so jq jacks where you are going to tell the first method type is equal to post and the url which i want to tell as let's give same employee only okay so we'll post with this and now data will be our form data so this form data will take all your input fields file everything okay so with this help of form data we are going to take all the data let's paste data type you can send in json or else not required so just remove that but you need to send some content types which we have to make it false so content type colon false and then your process data so proc ess data colon false so once if it is everything is working fine you will get the response over here so you will get the response either error or success so let's let's build that so let's copy this employee and go to your web dot php and create a post method with the same url called employee okay and create the controller so we are going to use the same controller let's define that this will make it to store okay copy and go to your employee controller and create a function with the name store so let's type function where store function and we are going to accept a request that means your input field data okay and over here so first up we will validate all our input fields so which input feeds this all these input fields so validation let's validator is equal to where validator colon colon make function where dollar request of all the input okay give comma open and close bracket square bracket where inside this you are going to call your input fields so my input fields are name so let's copy this name paste over here and then tell over here it's required and maximum 191 copy and paste next will be a not just give comma this will be your phone and same condition and for the image over here image this image field copy this image and paste required and it's an image and then m i m e s where you can tell j p e g where p n g j p g okay so this p j p e g okay where you can mention that max size also so max colon two zero four eight okay and yep guys so let's copy this validator variable and check with the if condition so if this validator fails if als fails if it pass passes means else you will execute the code so before that let's return a response function with the json format where you are going to tell status which will be the 400 and errors just copy the variable validator and this will only give you all the errors so we'll tell messages function okay save it and once it's correct means you'll be in this condition so write a code to store that employee is equal to where my employee model so you need to import that so i have imported it now just add new let's copy this and call your database field names so that database fields are nothing but name phone and image okay so same way and what are the requests so this request the request which you are getting from the input field okay so it will search for this input will search for the name attribute so it's not to worry let's call that name so the name over here copy and paste this is your database name and this is your input field name okay and same way for image also so image is a different format to store that so let's use if condition over here where we will check that dollar request of has file okay file function where you will tell that image so let's get back this copy this name attribute of image and if the image is present then it is going to become inside where dollar file is equal to dollar request of your file we are getting that image okay and let's remove the extension from this so let's create one variable called extension is equal to where dollar file of get client original extension so after this let's create a file name is equal to where i'm going to use time function dot i'll concatenate with the dot extension and then your extension whatever jpg png jpg whatever comes okay so time dot jpg like that it will concatenate and now guys after doing this we want to save this file and save the data also so first let's move the file okay let's copy this dollar file with the help of move function you are going to move the data so we're inside uploads folder slash employee okay forward slash and give comma not dot and then your file name so i want to store in this path with the file name okay and as usual guys you need to copy this paste and call your database name copy image paste it and then your file name whatever you have created new one so let's copy this file name and send it cool so now guys you need to copy your employee variable and use a save function to save the data and after that let's copy this paste your status will be 200 which means its messages successful give employee image data added successfully okay that's it guys so now let's get back to our index blade file let's go to our ajax over here and over here you need to give that condition what in case of success or error so let's use if condition if where this response dot status is double equal to where we will tell as 400 so first we will check the error so this status 400 okay and then loop that errors so you can just use jq each where you will tell response oops response dot errors so the errors which you copied from here just now and this will be a key and this will be your values okay you can tell error value copy and then you can loop that so let's loop in one div tag with the help of append function where you will tell li open and like close where single quote plus plus error values where you'll close that you know save error list so let's copy this and create a div tag so before that let's empty this first if you create like if anything is available you need to empty that so dollar html where we'll pass it null okay so let's add one more thing so i just remove class of display display none okay copy this go back on the form okay on my add form create a ul tag class name not last your class name and then your id as save error list and the class will be alert alert warning where d none you have to add okay save now guys let's get back to our jquery so first let's check this the error thing let's get back refresh now click we are not inserting any data so obviously we will get an error let's click on save so nothing happened let's inspect ncu inspect okay so it's showing an error called 419 so that means csrf token is been asked you can just go to your network and just see that crf token mismatch so guys you need to laravel.com documentation search for ajax you'll get this okay so let's copy this and paste back just over here and now let's test it again refresh let's clear everything click click on save we get the error called validator error so let's import the class of that let's get back to our employee controller our validator import it so eliminate support packets validator okay so just import this class guys save now let's refresh once again and let's try it again let's clear all save perfect so you can see guys the name field is required phone image field is required okay so now let's get back what in case data goes correct so you need to write else if over here copy the same code response dot status dot which will be 200 okay so that 200 status this one so this status 200 comes means that time you need to show the message guys so before that you need to empty this first copy and instead of remove class make it to add class all set this dot reset function so this will empty all your input fields after inserting the data and after inserting the data i want to close this model let's get back copy the model name go to the top this is the employee add employee model let's get back dollar open and close it's id so mention hash dot model function where i'm going to tell hide okay after hiding we want to show the message so let's use alert where you can tell what the response dot message so let's copy this paste it done guys let's now let's test it refresh once again clear all the networks let's add guys now so before that let's check that folder first inside your public we don't have any folder let's create that guys so uploads folder and employee folder let's go to our public folder inside the public folder add uploads folder inside that upload folder you need to create a employee folder employee folder okay inside this our images will come let's get back and yep let's insert with prakash where some random digit phone number and open let's select with this mobile one open and now guys let's click to save so save let's see we have got employee added successfully but let's see our database first refresh perfect so the data is added image also is added let's see that image is inserted or not let's get back inside uploads employee and you have seen that image also is added over here whatever we have selected perfect but the model did not close why let's see that so it did not enter over here let's get back to our console you can see that this dot reset is not a function the error we have seen that over here okay not an issue guys you can just comment that out we don't require if you want to empty all the fields just give simple code for that we can write as dollar your form id name okay so the form id the form id is this copy this id and search for all the input fields and just clear the data you can just give a simple method dot find function where you will tell input and all its value just make it to null okay save and now get let's execute once more so [Music] let's save let's tell um prakash random digit phone number select with the image so i'm going to select with second mobile open and now guys let's click to save perfect employee data image added successfully okay and you can see that model is closed guys and our input field will be empty now okay so you can check out your table perfect so image is also added data is added guys let's check the image so you can find that second image also has come cool so guys we have successfully completed how to insert the data using jquery ajax without the page reload in laravel eight so let's let's see next video how to fetch the data using jquery attacks so guys thank you for watching this video please subscribe like and share

Channel: Funda Of Web IT

Views: 2,676

Keywords: fundaofwebit, how to upload image using ajax in laravel, insert image in laravel ajax, insert image in ajax laravel, upload image in jquery ajax laravel, image upload using ajax in laravel 8, laravel 8 ajax image crud, laravel ajax crud with image upload, ajax file upload in laravel, save image in laravel using ajax, ajax image upload in laravel, jquery image upload in laravel, laravel 8 ajax image upload, laravel ajax crud, laravel 8 ajax crud wih image, laravel ajax crud tutrial

Id: 4uxonSu57nQ

Length: 30min 33sec (1833 seconds)

Published: Fri Jul 02 2021