is the any other way to upload image from frontend using upload section ? getting not displayed and upload from index.html page

Question

I have tried to upload the image from the index.html page and also created; modles.py, views.py, urls.py and soon but I have upload and it is successfully uploaded in the mentioned directory in models.py but failed to view that image in front showing cut pic image

views.py

from django.shortcuts import render
from django.http import HttpResponseRedirect
from .models import Upload
# Create your views here.

# Imaginary function to handle an uploaded file

def Home(request):
    if request.method == 'POST':
        photo = request.POST['doc']
        Upload.objects.create(document = photo)
        context ={
            
        }

    if request.method == "GET":
        photo = Upload.objects.all()
        context = {
            'phone': photo
        }
        
        
    return render(request, 'Home.drive.html', context)

models.py

from django.db import models

# Create your models here.
class Upload(models.Model):
    document = models.ImageField(upload_to='documents')

index.html

{% load static %}
<!DOCTYPE html>
{% block content %}
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>PB-2021</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/index.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap-5.css' %}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
  </head>
  <body>
    <nav style="font-size: 1em;
    list-style-type: none;
    display: block;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: sticky;
    top: 0;
    z-index: 1;">
      <input type="checkbox" id="check">
      <label for="check" class="checkbtn">
        <i class="fas fa-bars"></i>
      </label>
      <label class="logo">AMRIT SHAHI</label>
      <ul>
        <li><a class="active" href="{% url 'PBAPP:home' %}">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Pages</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>





<form method="POST" action="">
    {% csrf_token %}
<div style="float: right;">
  <label for="formFileLg" class="form-label">* File Upload</label>
  <input class="form-control form-control-lg" id="formFileLg" type="file" name="doc">
  <input type="submit" class="form-control form-control-lg" id="formFileLg" style="height: 10px; margin-top: 10px; background-color: #e9ecef;"/>
  <hr style="width: 100%;">
</div>
</form>
<hr>
{% for i in phone %}
<img src="{{i.document.url}}" alt="Girl in a jacket" width="200" height="200; display: flex;">


{% endfor %}






<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

        <footer class="bg-light text-center text-lg-start" style="width: 100%;">
          <!-- Copyright -->
          <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
            © 2021 Copyright:
            <a class="text-dark" href="https://theme.euesk.com">theme.euesk.com</a>
          </div>
          <!-- Copyright -->
        </footer>


<script src="{% static 'js/bootstrap-5.js' %}"></script>
  </body>
</html>

{% endblock %}

*Notes: help appreciated, my output is image icon only not the actual image

refer to this https://stackoverflow.com/a/8542030/15042684 for more informations. — Thierno Amadou Sow, Oct 02 '21 at 13:47
Does this answer your question? [Why is form enctype=multipart/form-data required when uploading a file?](https://stackoverflow.com/questions/1342506/why-is-form-enctype-multipart-form-data-required-when-uploading-a-file) — Abdul Aziz Barkat, Oct 02 '21 at 13:48
Please explain it clearly is that request.FILES == 'GET' in which line — AMRIT SHAHI, Oct 02 '21 at 13:53

Rabeul Hasan · Answer 1 · 2021-10-02T14:47:37.450

0

#Edit this thing first in the form

<form method="POST" action="" enctype="multipart/form-data">

# This thing in the views.py

def Home(request):
   photo = ""
   if request.method == 'POST':
       photo = request.FILES['doc']
       Upload.objects.create(document = photo)

   if request.method == "GET":
       photo = Upload.objects.all()

   context = {
      'phone': photo
   }

For any further issue, let me know.

edited Oct 02 '21 at 14:47

answered Oct 02 '21 at 14:18

Rabeul Hasan

69
6

please let me now why i am getting error as "local variable 'context' referenced before assignment" def Home(request): if request.method == 'POST': photo = request.FILES['doc'] Upload.objects.create(document = photo) if request.method == "GET": photo = Upload.objects.all() context = { 'phone': photo } return render(request, 'Home.drive.html', context) – AMRIT SHAHI Oct 02 '21 at 14:30
def Home(request): if request.method == 'POST': photo = request.POST['doc'] Upload.objects.create(document = photo) if request.method == "GET": photo = Upload.objects.all() context = { 'phone': photo } – Rabeul Hasan Oct 02 '21 at 14:34
is it request.POST['doc'] or request.FILES[''doc'], i am able to see image uisng request.FILES but once error message shows up in every upload the display and if i reaload it again dissaper error message and could see image but how to avoid error as "local variable 'context' referenced before assignment " – AMRIT SHAHI Oct 02 '21 at 14:41
I edited the code snippet, please follow it and let me know. You mentioned context variable in the render function but context variable is not read by the interpreter because you kept context variable in the if block which will be read by interpreter by condition. if condition is not met, your value of the context variable remains unknown to interpreter. That what is happening. – Rabeul Hasan Oct 02 '21 at 14:46

is the any other way to upload image from frontend using upload section ? getting not displayed and upload from index.html page

1 Answers1