Easy way to Upload the File/Image in Laravel using AJAX jQuery with example

upload file in laravel

Hello everyone, welcome back to this article, you find How to upload any file/image in Laravel using AJAX. As Laravel is one of the best MVC PHP frameworks, it makes the task easy in the majority of projects such as authentication, caches, routers, sessions, etc.

Check doc here.

If we are talking about AJAX, then it will reduce the traffic between client and server, which leads to an increase in the performance, and speed of your Laravel web application. We are using AJAX to upload the file for better performance of the web application.

Without refreshing the page, the file will be uploaded that’s the power of AJAX. Here we have used FormData() an object in AJAX to upload files/images in Laravel with a display of success and error messages on the web page.

Read the full article, so that in the end you will be able to apply this method to your projects. Let’s start step by step.

1️⃣ Write some HTML code for input and upload button
Upload file
2️⃣ Add the jQuery code for AJAX call

Using event handlers we can upload the file by using FormData()to add the file data to any name.

Now in the next step, we will create one router with the method POST, so that we can pass the request to the controller.

Let’s proceed to the next steps…

3️⃣ Create one router of method post in the Route file
4️⃣ The Final step i.e. To pass the request in the Controller Method

In this step, we are going to upload the file at a particular location (on the server or local) bypassing the request through the router. Let’s see the code.

After uploaded successfully

Tada… finally you have uploaded the file. After getting the response JSON, it will go back to the success function (in step2) and show the success label (as shown in the snapshot), if by chance upload is failed then you check also the error that you are getting.

I hope you enjoyed the article and if you found this useful. then share this with your friends or on social media.

If you have any queries, please do ask in the comments section or anything that you want through mail contact.


Also read,

[7] Advanced and Useful Linux – Ubuntu Commands How to revert or undo last commit in Git? Explain For, While, Do-While Loops in JS and more Setup AWS CLI on MAC, Windows, and Linux Introduction to Comparison and Logical Operators in JS Difference between AWS, AZURE, and GCP Cloud Conditional Statement in JS – with examples