Django image not getting uploaded into my 'media/user_profile_picture' folder - django

Question

So , my website has a feature where user can upload an image of themselves for their profile picture when they register their account . The model for the same is as follows :
class Buyer(models.Model):
name = models.CharField(max_length=20)
last_name = models.CharField(max_length=20)
phone = models.BigIntegerField()
email = models.EmailField(max_length=20)
address = models.CharField(max_length=100)
city = models.CharField(max_length=30)
state = models.CharField(max_length=30)
pincode = models.IntegerField()
dp = models.ImageField(upload_to='user_profile_picture/', blank=True, null=True)
created_on = models.DateField(auto_now_add=True, blank=True, null=True)
created_by = models.OneToOneField(User, related_name='buyer', on_delete=models.CASCADE)
class Meta:
ordering = ['name']
def __str__(self):
return self.name
Now for this model , I have made the following views to extract the relevant data (including images) from the form inside the template when the submit button is pressed
#login_required
def buyer_profile_details(request):
if request.method == 'POST':
# creating the buyer object
firstname = request.POST.get('firstname')
lastname = request.POST.get('lastname')
phone = request.POST.get('phone')
email = request.POST.get('email')
city = request.POST.get('city')
state = request.POST.get('state')
address = request.POST.get('address')
pincode = request.POST.get('pincode')
# dp is the user submitted image which I want to get from the form
dp = request.POST.get('dp')
Buyer.objects.create(name=firstname, last_name=lastname, phone=phone, email=email, address=address,
city=city, state=state, pincode=pincode, dp=dp, created_by=request.user)
UserType.objects.create(user_type=2, created_by=request.user)
return redirect('my_profile')
return render(request, 'new_buyer_profile_details.html', {})
And finally this is the template containing the form that I made for getting the image
<form class="block-register" method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="form-row">
<div class="col form-group">
<label>First name</label>
<input type="text" class="form-control" placeholder="" id="firstname" name="firstname">
</div> <!-- form-group end.// -->
<div class="col form-group">
<label>Last name</label>
<input type="text" class="form-control" placeholder="" id="lastname" name="lastname">
</div> <!-- form-group end.// -->
</div> <!-- form-row end.// -->
<div class="form-row">
<div class="form-group col-md-6">
<label>Phone</label>
<input class="form-control" type="text" id="phone" name="phone">
</div> <!-- form-group end.// -->
<div class="form-group col-md-6">
<label>Email</label>
<input class="form-control" type="email" id="phone" name="email">
</div> <!-- form-group end.// -->
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>City</label>
<input class="form-control" type="text" id="city" name="city">
</div> <!-- form-group end.// -->
<div class="form-group col-md-6">
<label>State</label>
<input class="form-control" type="text" id="state" name="state">
</div> <!-- form-group end.// -->
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>Street</label>
<input class="form-control" type="text" id="address" name="address">
</div> <!-- form-group end.// -->
<div class="form-group col-md-6">
<label>Pincode</label>
<input class="form-control" type="number" id="pincode" name="pincode">
</div> <!-- form-group end.// -->
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>Display Picture</label>
<input type="file" id="dp" name="dp" accept="image/*">
</div> <!-- form-group end.// -->
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block"> Register </button>
</div> <!-- form-group// -->
<div class="form-group">
<label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" checked=""> <div class="custom-control-label"> I am agree with terms and contitions </div> </label>
</div> <!-- form-group end.// -->
</form>
When I press submit , all data other than the image is getting stored for some reason . Why is my image not getting submitted ? When I add the image directly from admin panel of django , it gets stored properly to the media/user_profile_picture folder .

Answer 1

You have written this line to get the file from the POST data:
dp = request.POST.get('dp')
But files are not present in request.POST they are present in request.FILES [Django docs] hence you want to change that line to:
dp = request.FILES.get('dp')
Note: It is better to use a Form class [Django docs]
(or a ModelForm [Django
docs])
when dealing with forms in Django as they will automatically clean and
validate the form for you.

Answer 2

In your settings.py file, you need to have the following specified to indicate where user-uploaded files will be stored:
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
See the documentation for more details: https://docs.djangoproject.com/en/3.2/ref/settings/