django file upload issue

Question

I have tried to upload a picture using Django file field

and in my models.py file

class Students(models.Model):
    id = models.AutoField(primary_key=True)
    admin = models.OneToOneField(CustomUser, on_delete=models.CASCADE)
    gender = models.CharField(max_length=255)
    profile_picture = models.FileField()
    objects = models.Manager()

and in project's urls.py file

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('student_management_app.urls')),
]+static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)+static(settings.STATIC_URL,document_root=settings.STATIC_FILE_ROOT)

in my setting.py file I have specified the directories like this

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, "media")

STATIC_URL = '/static/'
STATIC_FILE_ROOT = os.path.join(BASE_DIR, "static")
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

and in the template page I tried to view the image that got uploaded to the media folder

<tbody>
                    {% for student in students %}
                    <tr>
                      <td>{{ student.admin.id }}</td>
                      <td><img src ="{{ student.profile_picture }}" style="width: 100px"></td>
                      <td>{{ student.admin.first_name }}</td>
                      <td>{{ student.admin.last_name }}</td>
                      <td>{{ student.gender }}</td>
                      <td>{{ student.address }}</td>
                      <td>{{ student.admin.email }}</td>
                      <td>{{ student.course_id.course_name}}</td>
                      <td>{{ student.session_start_year }}</td>
                      <td>{{ student.session_end_year }}</td>
                      <td>{{ student.admin.date_joined }}</td>
                      <td>{{ student.admin.last_login }}</td>
                      <td><a href="/EditStudent/{{ student.admin.id }}" class="btn btn-primary">Edit</a></td>
                      <td><a href="/DeleteStudent/{{ student.admin.id }}" class="btn btn-danger">Delete</a></td>
                    </tr>
                    {% endfor %}
                  </tbody>

the image is getting uploaded perfectly but I am not being able to serve them. right now the template looks like thisview them in the template the traceback is showing

11/Sep/2021 18:32:30] "GET /media/010040.jpg HTTP/1.1" 302 0
[11/Sep/2021 18:32:30] "GET /media/1580467939054_Anitha.jpg HTTP/1.1" 302 0
[11/Sep/2021 18:32:30] "GET /media/1580467939054_Anitha_mM61nlO.jpg HTTP/1.1" 302 0

**

app urls.py

**

from django.conf.urls import url
from django.urls import path
from . import views, AdminViews, StaffViews, StudentViews



urlpatterns = [
    
    path('demo', views.demo, name='demo'),
    path('DoLogin', views.DoLogin, name='DoLogin'),
    path('LoginPage', views.LoginPage, name='LoginPage'),
    path('GetUserDetails', views.GetUserDetails, name='GetUserDetails'),
    path('LogoutUser', views.LogoutUser, name='LogoutUser'),
    path('admin_home', views.admin_home, name='admin_home'),
    path('AddStaff', views.AddStaff, name='AddStaff'),
    path('AddStaffSave', views.AddStaffSave, name='AddStaffSave'),
    path('AddCourse', views.AddCourse, name ='AddCourse'),
    path('AddCourseSave', views.AddCourseSave, name='AddCourseSave'),
    path('AddSubject', views.AddSubject, name ='AddSubject'),
    path('AddSubjectSave', views.AddSubjectSave, name='AddSubjectSave'),
    path('AddStudent', views.AddStudent, name='AddStudent'),
    path('AddStudentSave', views.AddStudentSave, name='AddStudentSave'),
    path('ManageStaff', views.ManageStaff, name='ManageStaff'),
    path('ManageStudent', views.ManageStudent, name='ManageStudent'),
    path('ManageCourse', views.ManageCourse, name='ManageCourse'),
    path('ManageSubject', views.ManageSubject, name='ManageSubject'),
    path('EditStaff/<str:staff_id>', views.EditStaff, name='EditStaff'),
    path('EditStaffSave', views.EditStaffSave, name='EditStaffSave'),
    path('EditStudent/<str:student_id>', views.EditStudent, name='EditStudent'),
    path('EditStudentSave', views.EditStudentSave, name='EditStudentSave'),
    path('EditCourse/<str:course_id>', views.EditCourse, name='EditCourse'),
    path('EditCourseSave', views.EditCourseSave, name='EditCourseSave'),
    path('EditSubject/<str:subject_id>', views.EditSubject, name='EditSubject'),
    path('EditSubjectSave', views.EditSubjectSave, name='EditSubjectSave'),
    path('DeleteStaff/<str:staff_id>', views.DeleteStaff, name='DeleteStaff'),
    path('DeleteStudent/<str:student_id>', views.DeleteStudent, name='DeleteStudent'),
    path('DeleteCourse/<str:course_id>', views.DeleteCourse, name='DeleteCourse'),
    path('DeleteSubject/<str:subject_id>', views.DeleteSubject, name='DeleteSubject'),
    path('StaffHome', views.StaffHome, name='StaffHome'),
    path('StudentHome', views.StudentHome, name='StudentHome'),
]

when I inspected the template code in sources the image link is showing as the path is showing two media is this the problem

`<td><img src ="/media/media/1580467939054_Anitha_wjltRgu.jpg" style="width: 100px"></td>` 

can anyone help me???

Answer 1

You should work with the .url of the image, so:

<img src="{{ student.profile_picture.url }}">

In your template you edit/remove items with what looks like a GET request, in order to edit data, a POST, PUT, or PATCH request should be used, and removing a data entry should be done with a POST or DELETE request.

Answer 2

Try this :

<td><img src ="{{ student.profile_picture.url }}" style="width: 100px"></td>

Answer 3

There are many problems with your code:

1-In your model, use the field for image uploadig ImageField ( to use ImageField you need to have installed Pillow ):

profile_picture=models.ImageField(upload_to="images", null=True, blank=True)

2-you must use a form with following attributes:

 enctype="multipart/form-data"
   method="post"

Note:
in shell django we have following:

assume upload_to='images':

\>\>\>student.profile_picture
<ImageFieldFile: images/cat.jpg>

\>\>\>student.profile_picture.url
'http://yourDomain/media/images/cat.jpg'

\>\>\>student.profile_picture.path
'media/images/cat.jpg'

\>\>\>student.profile_picture.name
'images/cat.jpg'

also see following links:
Files in models
Serving files uploaded
Configuring settings