How to create a new Page in Laravel App
Hi,
I am using Metronic 8.1.7 Laravel App. How can I create a new page having a form and uploading file. I create a new entry in menu.php file, crated a blade file. I don't know where I need to define route. It looks we do not need to define it web.php.
Replies (3)
Hi Mamta,
Regarding securely handling file uploads in Laravel, one approach is to use the Laravel built-in Storage facade and the validate() method to validate the uploaded files. Here's a sample code that you can use as a reference:
HTML form:
<form action="{{ route("file.upload") }}" method="POST" enctype="multipart/form-data">
@csrf
<div class="fallback">
<input type="file" name="file" multiple>
</div>
<div class="dz-message" data-dz-message><span>Drop files here or click to upload.</span></div>
</form>Laravel controller:
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
class FileController extends Controller
{
public function upload(Request $request)
{
$request->validate([
"file" => "required|mimes:jpeg,jpg,png,pdf|max:2048", // Only allow files up to 2MB
]);
$file = $request->file("file");
// Block uploading of PHP files
if ($file->getClientOriginalExtension() == "php") {
return back()->withErrors(["file" => "Invalid file type."]);
}
// Generate a unique file name and store the file
$fileName = uniqid() . "." . $file->getClientOriginalExtension();
Storage::putFileAs("uploads", $file, $fileName);
// Redirect back with success message
return back()->with("success", "File uploaded successfully.");
}
}In this example, we first validate that the uploaded file meets our requirements (i.e., it is required, is a file, file's mime type (allowed types: jpeg, jpg, png, pdf), and is no larger than 2MB). Then, we check the file extension and block the uploading of PHP files.
We generate a unique file name using
uniqid() and the original file extension and store the file using Laravel's Storage facade.Finally, we redirect back to the previous page with a success message.
To add the CSRF token to Dropzone, you can use the following code:
// Get the CSRF token from the page
const csrfToken = document.querySelector("meta[name="csrf-token"]").getAttribute("content");
// Initialize Dropzone with the CSRF token in the headers
const myDropzone = new Dropzone("div#myDropzone", {
url: "/upload",
headers: {
"X-CSRF-Token": csrfToken
}
});This code retrieves the CSRF token from a meta tag in the page and passes it to Dropzone in the headers when initializing it.
Thanks
Hi Mamta,
Apologies for the delay in getting back to you. Just to clarify, the menu.php and pages.php config files are used to configure the display of pages and create a list for the side menu.
Regarding your form, in order to process the form and its associated file, you will need to create a route in web.php that handles the form submission and file upload.
Thanks
Thank you Faizal for your response. I am able to create a page and add dropzonejs.
Is there any sample which handle the upload files at server side, means Controller code. I can write the code but I concern for security. Is there any sample code which block dangerous file upload like any PHP file, some peoples can upload php files by changing extension php to jpg or pdf. Is metronic have some sample code for this?
One more thing how can I add csrf-token to dropzone ?
