I tried to create my own HAR parser on my existing laravel PHP project. Locally it’s working perfectly
har.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload HAR File</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/dropzone.min.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
}
h2 {
margin-bottom: 20px;
}
.dropzone {
width: 50%;
border: 2px dashed #007bff;
background-color: white;
padding: 20px;
border-radius: 10px;
}
.dz-message {
color: #007bff;
}
.dz-error-message {
color: red;
}
</style>
</head>
<body>
<h2>Upload HAR File</h2>
<form action="{{ route('har.upload') }}" method="POST" enctype="multipart/form-data" id="har-dropzone">
@csrf
<div class="dz-message">Drop HAR file here or click to upload.</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/min/dropzone.min.js"></script>
<script>
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#har-dropzone", {
url: "{{ route('har.upload') }}",
paramName: "file",
maxFiles: 1,
acceptedFiles: ".har",
headers: {
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
},
init: function() {
this.on("success", function(file, response) {
window.location.href = response.redirect_url;
});
this.on("error", function(file, message) {
if (!file.type.includes("har")) {
var errorMessage = document.createElement('div');
errorMessage.className = 'dz-error-message';
errorMessage.innerText = 'Invalid file type. Only HAR files are accepted.';
file.previewElement.appendChild(errorMessage);
setTimeout(function() {
location.reload();
}, 2000);
}
});
this.on("maxfilesexceeded", function(file) {
this.removeAllFiles();
this.addFile(file);
});
}
});
document.body.ondrop = function(e) {
e.preventDefault();
e.stopPropagation();
var files = e.dataTransfer.files;
if (files.length > 0 && files[0].type.includes("har")) {
myDropzone.addFile(files[0]);
} else {
alert('Invalid file type. Only HAR files are accepted.');
setTimeout(function() {
location.reload();
}, 2000);
}
};
document.body.ondragover = function(e) {
e.preventDefault();
e.stopPropagation();
};
</script>
</body>
</html><?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
class HarController extends Controller
{
public function har()
{
return view('layouts.general.har.har');
}
public function upload(Request $request)
{
$request->validate([
'file' => 'required|file|mimetypes:application/json,text/plain',
]);
$file = $request->file('file');
$validExtension = 'har';
$extension = strtolower($file->getClientOriginalExtension());
if ($extension !== $validExtension) {
return response()->json(['error' => 'Invalid file extension. Only HAR files are accepted.'], 400);
}
$data = file_get_contents($file->getRealPath());
$harData = json_decode($data, true);
if (json_last_error() !== JSON_ERROR_NONE) {
return response()->json(['error' => 'Invalid JSON file.'], 400);
}
session(['harData' => $harData]);
return response()->json(['redirect_url' => route('har.display')]);
}
public function display()
{
$harData = session('harData', []);
return view('layouts.general.har.har-display', ['harData' => $harData]);
}
}