I have a user profile screen which shows a user's information along with a profile picture. There I have a link called "Change Photo" which triggers a file input to upload a new image. Then I have a JS code to submit the form soon after the file input takes the image. But once the form is submitted, at my controller, when I dump my request, the filebag is empty.
This is my .twig file
{% extends('base.html.twig') %}
{% block title %}Welcome- Open Rpoad Tolling!{% endblock %}
{% block stylesheets %}
<style>
body{
background: -webkit-linear-gradient(left, #3931af, #00c6ff);
}
.emp-profile{
padding: 3%;
margin-top: 3%;
margin-bottom: 3%;
border-radius: 0.5rem;
background: #fff;
}
.profile-img{
text-align: center;
}
.profile-img img{
width: 70%;
height: 100%;
}
.profile-img .file {
position: relative;
overflow: hidden;
margin-top: -20%;
width: 70%;
border: none;
border-radius: 0;
font-size: 15px;
background: #212529b8;
}
.profile-img .file input {
position: absolute;
opacity: 0;
right: 0;
top: 0;
}
.profile-head h5{
color: #333;
}
.profile-head h6{
color: #0062cc;
}
.profile-edit-btn{
border: none;
border-radius: 1.5rem;
width: 70%;
padding: 2%;
font-weight: 600;
color: #6c757d;
cursor: pointer;
}
.profile-edit-btn:hover{
color: #FFF;
background: rgb(240, 173, 78, 0.75);
/*border: 2px solid rgba(240, 173, 78, 0.75);*/
}
.proile-rating{
font-size: 12px;
color: #818182;
margin-top: 5%;
}
.proile-rating span{
color: #495057;
font-size: 15px;
font-weight: 600;
}
.profile-head .nav-tabs{
margin-bottom:5%;
}
.profile-head .nav-tabs .nav-link{
font-weight:600;
border: none;
}
.profile-head .nav-tabs .nav-link.active{
border: none;
border-bottom:2px solid #0062cc;
}
.profile-work{
padding: 14%;
margin-top: -15%;
}
.profile-work p{
font-size: 12px;
color: #818182;
font-weight: 600;
margin-top: 10%;
}
.profile-work a{
text-decoration: none;
color: #495057;
font-weight: 600;
font-size: 14px;
}
.profile-work ul{
list-style: none;
}
.profile-tab label{
font-weight: 600;
}
.profile-tab p{
font-weight: 600;
color: #0062cc;
}
</style>
{% endblock %}
{% block body %}
<div class="container emp-profile">
<form action="{{ path('changeImage') }}" name="changeProfilePhoto" id="changeImageForm" method="post" enctype="multipart/form-data" >
<div class="row">
<div class="col-md-4">
<div class="profile-img">
<img src="{{ photoSrc }}" alt=""/>
<div class="file btn btn-lg btn-primary" id="fileUploadButton">
Change Photo
</div>
</div>
</div>
<div class="col-md-6">
<div class="profile-head">
<h5>
{{ user.firstName }} {{ user.lastName }}
</h5>
<h6>
Web Developer and Designer
</h6>
<p class="proile-rating">RANKINGS : <span>8/10</span></p>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">About</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Timeline</a>
</li>
</ul>
</div>
</div>
<div class="col-md-2">
<button type="button" onclick="window.location.href = '{{ editProfile }}';" class="profile-edit-btn" name="btnAddMore" >Edit Profile</button>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="profile-work">
<p>WORK LINK</p>
<a href="">Website Link</a><br/>
<a href="">Bootsnipp Profile</a><br/>
<a href="">Bootply Profile</a>
<p>SKILLS</p>
<a href="">Web Designer</a><br/>
<a href="">Web Developer</a><br/>
<a href="">WordPress</a><br/>
<a href="">WooCommerce</a><br/>
<a href="">PHP, .Net</a><br/>
</div>
</div>
<div class="col-md-8">
<div class="tab-content profile-tab" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="row">
<div class="col-md-6">
<label>User Id</label>
</div>
<div class="col-md-6">
<p>Kshiti123</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Name</label>
</div>
<div class="col-md-6">
<p>Kshiti Ghelani</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Email</label>
</div>
<div class="col-md-6">
<p>kshitighelani@gmail.com</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Phone</label>
</div>
<div class="col-md-6">
<p>123 456 7890</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Profession</label>
</div>
<div class="col-md-6">
<p>Web Developer and Designer</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="row">
<div class="col-md-6">
<label>Experience</label>
</div>
<div class="col-md-6">
<p>Expert</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Hourly Rate</label>
</div>
<div class="col-md-6">
<p>10$/hr</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Total Projects</label>
</div>
<div class="col-md-6">
<p>230</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>English Level</label>
</div>
<div class="col-md-6">
<p>Expert</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Availability</label>
</div>
<div class="col-md-6">
<p>6 months</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<label>Your Bio</label><br/>
<p>Your detail description</p>
</div>
</div>
</div>
</div>
</div>
</div>
<input type="file" id="changeImageButton" name="file"/>
</form>
</div>
<script>
const changeImgButton = document.getElementById('changeImageButton');
const fileUploadButton = document.getElementById('fileUploadButton');
const formHome = document.getElementById('changeImageForm');
changeImgButton.addEventListener("change",function () {
formHome.submit();
});fileUploadButton.addEventListener("click",function () {
changeImgButton.click();
});
</script>
{% endblock %}
// This is my controller
/**
* @Route("/changeImage", name="changeImage")
* @param Request $request
*/
public function changeImage(Request $request){
$file = $request->files->get('file');
dump($request);die;
if($file){
$fileName = md5(uniqid()).'.'.$file->guessExtension();
$file->move(
$this->getParameter('uploads_dir'), $fileName
);
}
}
