3

I am accepting an image from the user in a form in Django. How do I access the uploaded image to show it in the web browser?

This is what I have in settings.py

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

This is in my models.py

class Hotel(models.Model):
    name = models.CharField(max_length=50)
    image = models.ImageField(upload_to="images/")

Also, I have added the 

if settings.DEBUG:
    urlpatterns +=static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)

in urls.py

I tried to access the image as 

def image_view(request):
    if request.method=='POST':
        farm = hotelForm();
        form = hotelForm(request.POST,request.FILES)
        if form.is_valid():
            form.save()
            modelff = Hotel(name=request.POST['name'],image = request.FILES['image'])
            # print(modelff.image.url)

        return render(request,'djangoform.html',{"form":farm,"uploaded_data_url":modelff.image.url})

    else:
        form = hotelForm()
        return render(request,'djangoform.html',{"form":form})

And in my template, I accessed the image as <img src="{{uploaded_data_url}}">. But the image does not show up and the console shows image not found.

P.S. I have seen How to access media files in django How to access uploaded files in Django? https://docs.djangoproject.com/en/dev/howto/static-files/#serving-files-uploaded-by-a-user-during-development Django : accessing uploaded picture from ImageField But none of them seem to help me. I can't find how do I include the 'images/' in my path. My uploaded_data_url shows /media/Screenshot%202020-04-18%20at%206.39.24%20PM.png while I expect it to show /media/images/Screenshot%202020-04-18%20at%206.39.24%20PM.png

Where is the problem?

Also, if there can be something similar to How can I get uploaded text file in view through Django? (f.read() in this question) It would be great.

Edit: Since from an answer, it seems the question was not clear, I would like to clarify that the above was just what I tried and I don't really know if it is correct or not. Secondly, the whole purpose of doing this was to get image from user, process it, and display the original and final image to the user. So if there is any other method that you have to do this, please share that.

user185887
  • 643
  • 6
  • 18

1 Answers1

0

If the uploaded_data_url shows this /media/Screenshot%202020-04-18%20at%206.39.24%20PM.png then this means that the images were saved under the media dir. This is expected since your conf is MEDIA_URL = '/media/'.

If you want it as /media/images/Screenshot%202020-04-18%20at%206.39.24%20PM.png then change to this MEDIA_URL = '/media/images/'.

The problem with the above is that it will interfere with all other media files, so a simpler solution would be to replace the /media/ with /media/images/.

Adapt this in your views.py

url = str(modelff.image.url)
modUrl = url.replace("/media/","/media/images/")
return render(request,'djangoform.html',{"form":farm,"uploaded_data_url":modUrl l})
AzyCrw4282
  • 7,222
  • 5
  • 19
  • 35
  • 1
    but the bug is in `modelff` line I suppose. This was what I 'tried' . Since the `Hotel` model clearly specifies `upload_to=images/` it should upload there and indeed the images uploaded by form are at `media/images/filename_different_from_original_one`. – user185887 Apr 24 '20 at 23:05
  • I have also edited the question. Please have a look – user185887 Apr 24 '20 at 23:07
  • Do you have DEBUG = True in your settings.py? – AzyCrw4282 Apr 24 '20 at 23:19
  • Yes I have that – user185887 Apr 24 '20 at 23:22
  • I really can't tell where it could be going wrong. You sure you don't have pre-existing data in your database that's returning the wrong URL. Can you also see [this](https://stackoverflow.com/questions/35975220/django-display-imagefield-with-media-dir) and see if this helps. Have you also migrated your models? – AzyCrw4282 Apr 24 '20 at 23:27
  • Yeah. You use the django signals and in that `post_save` method to get the image. I will write the answer with code soon. – user185887 Apr 27 '20 at 23:26