Ever wondered how to add those eye-catching images to your Laravel application? Images play an important role in captivating your users, but managing uploads can feel daunting. Don’t worry, enthusiastic developers! This guide simplifies the process, equipping you with the knowledge to handle image uploads in your Laravel projects
A. File.blade.php
<body>
<!-- upload form start -->
<div class="card">
<div id="notification" style="padding:10px; color:white"></div><br/>
<div class="container" style="padding:20px">
<h3>Upload Partner Logo</h3><br/>
<div>
<input type="file" name="partner_logo" id="partner_logo" class="form-control"
onchange="previewImage(event);" /><br/>
<span id="msg" style="color:red"></span>
</div>
<button type="button" class="btn btn-success" id="submitbtn">Submit</button><br/><br/>
<div class="preview">
<img id="preview-selected-image" />
</div>
</div>
<br/>
</div>
<style>
.image-preview-container {
width: 300px;
margin: 0 auto;
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 3rem;
border-radius: 20px;
}
.image-preview-container img {
width: 300px;
height:100px;
display: none;
margin-bottom: 30px;
}
.image-preview-container input {
display: none;
}
</style>
<!-- code for display image before uploading -->
<script>
const previewImage = (event) => {
const imageFiles = event.target.files;
const imageFilesLength = imageFiles.length;
if (imageFilesLength > 0) {
const imageSrc = URL.createObjectURL(imageFiles[0]);
const imagePreviewElement = document.querySelector("#preview-selected-image");
imagePreviewElement.src = imageSrc;
imagePreviewElement.style.display = "block";
imagePreviewElement.style.width = "300px";
imagePreviewElement.style.height = "100px";
imagePreviewElement.style.border = "1px solid #ccc";
}
};
</script>
<!-- code for insert data -->
<script type="text/javascript">
$(document).ready(function(){
$(document).on('click','#submitbtn',function(){
var property = document.getElementById('partner_logo').files[0];
var image_name = property.name;
var image_extension = image_name.split('.').pop().toLowerCase();
var form_data = new FormData();
form_data.append("partner_logo",property);
$.ajax({
url:'partner_submit.php',
method:'POST',
data:form_data,
contentType:false,
cache:false,
processData:false,
beforeSend:function(){
$('#submitbtn').html('Loading...');
$('#submitbtn').css('background', '#ccc');
$('#submitbtn').css('border', 'none');
$('#submitbtn').css('pointer-events', 'none');
},
success:function(data){
if(data == 504){
$('#preview-selected-image').hide();
$('#notification').show();
$('#notification').text('Invalid Image Format');
$('#notification').css('background', 'red');
}
else{
$('#preview-selected-image').hide();
$('#notification').show();
$('#notification').text('Successfully Saved !');
$('#notification').css('background', 'green');
$('#submitbtn').css('background', 'green');
$('#submitbtn').css('border', '1px solid green');
$('#submitbtn').css('pointer-events', 'auto');
$('#submitbtn').html('Submit');
$('#logo_load').html(data);
ajaloadlogo();
}
}
});
});
});
</script>
<!-- code for fetch data -->
<script type="text/javascript">
$(document).ready(function(){
function ajaloadlogo(){
$.ajax({
url:'fetch_partner_logo.php',
type:'POST',
success:function(data){
$('#logo_load').html(data);
}
});
}
ajaloadlogo();
});
</script>
<tbody id="logo_load">
</tbody>
</body>
B. UploadFIleController.php
function store(Request $req){ $incorporate_document = $req->file('incorporate_document'); // your base64 encoded $incorporate_document_name = time().'_pk.'.$req->file('incorporate_document')->getClientOriginalExtension(); $incorporate_document_file_store = $req->file('incorporate_document')->move(public_path('userimages'), $incorporate_document_name); $imageurl_corporate_url = URL::to('/userimages/')."/".$incorporate_document_name; }
