Django if ImageField is left blank or is equal to none return last image uploaded

Question

I'm trying to create an image gallery where people are able to upload multiple images. There are 8 fields for uploading images. The problem that I have is that when a user uploads less that 8 images. If one of the imageFields are left blank this causes the gallery to have a blank in that specific field.

Currently when I return the images I have it filtered to show the latest images that were uploaded. Example:

gallery = Content.objects.filter(user=request.user).order_by("-id")[0]

I wanted to know if anyone could help me find a way that when I use:

content.image1 = request.FILES.get('image1_upload', None)

That if None is returned I could have Django use the last image that was submitted rather than the None it returns. I feel it would be something along the lines of:

if 'image1_upload' in request.FILES:
    content.image1 = request.FILES('image1_upload')
elif None:
    content.image1 = Content.objects.get("the last uploaded image")

I appreciate any help! Below is my code"

Views.py:

@login_required
def register(request):
    if request.POST:
        content = Content()
        content.user = request.user
        content.image1 = request.FILES.get('image1_upload', None)
        content.image2 = request.FILES.get('image2_upload', None)
        content.image3 = request.FILES.get('image3_upload', None)
        content.image4 = request.FILES.get('image4_upload', None)
        content.image5 = request.FILES.get('image5_upload', None)
        content.image6 = request.FILES.get('image6_upload', None)
        content.image7 = request.FILES.get('image7_upload', None)
        content.image8 = request.FILES.get('image8_upload', None)
        content.terms = request.POST.get('terms')
        content.date = timezone.now()
        content.save()

    return redirect('/portal/register')
try:
    gallery = Content.objects.filter(user=request.user).order_by("-id")[0]
    print gallery
    return render(request, 'portal/register.html', {'gallery': gallery})
except ObjectDoesNotExist:
    print 'Does Not Exist!'
    return render(request, 'portal/register.html')

Models:

def content_file_name(instance, filename):
    return '/'.join(['content', instance.user.username, filename])


class Content(models.Model):
    user = models.OneToOneField(User, unique=True)
    image1 = models.ImageField(upload_to=content_file_name, null=True, blank=True)
    image2 = models.ImageField(upload_to=content_file_name, null=True, blank=True)
    image3 = models.ImageField(upload_to=content_file_name, null=True, blank=True)
    image4 = models.ImageField(upload_to=content_file_name, null=True, blank=True)
    image5 = models.ImageField(upload_to=content_file_name, null=True, blank=True)
    image6 = models.ImageField(upload_to=content_file_name, null=True, blank=True)
    image7 = models.ImageField(upload_to=content_file_name, null=True, blank=True)
    image8 = models.ImageField(upload_to=content_file_name, null=True, blank=True)
    terms = models.ImageField(upload_to=content_file_name, null=True, blank=True)

HTML:

{% extends 'portal/base.html' %}

{% load staticfiles %}
{% block head_block %}
<script language="javascript" type="text/javascript" src="{% static 'js/input.js' %}"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>

{% endblock %}
{% block body_block %}
<div class="container">
        <form role="form" method="post" action="." id="js-upload-form" enctype="multipart/form-data">
                            {% csrf_token %}
        <div class="row">

            <div class="col-lg-12">
                <h1 class="page-header">{{ user.username }}</h1>
            </div>

            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                    {% if gallery.image1 %}
                    <img class="img-responsive" id="image1" src="/media/{{ gallery.image1 }}" alt="">
                    {% else %}
                    <img class="img-responsive" id="image1" src="/media/images/placeholder.png" alt="">
                    {% endif %}
                </a>
                <input type="file" name="image1_upload" id="image1_upload" multiple>
            </div>

            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                    {% if gallery.image2 %}
                    <img class="img-responsive" id="image2" src="/media/{{ gallery.image2 }}" alt="">
                    {% else %}
                    <img class="img-responsive" id="image2" src="/media/images/placeholder.png" alt="">
                    {% endif %}
                </a>
                <input type="file" name="image2_upload" id="image2_upload" multiple>
            </div>


            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                    {% if gallery.image3 %}
                    <img class="img-responsive" id="image3" src="/media/{{ gallery.image3 }}" alt="">
                    {% else %}
                    <img class="img-responsive" id="image3" src="/media/images/placeholder.png" alt="">
                    {% endif %}
                </a>
                <input type="file" name="image3_upload" id="image3_upload" multiple>
            </div>

            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                    {% if gallery.image4 %}
                    <img class="img-responsive" id="image4" src="/media/{{ gallery.image4 }}" alt="">
                    {% else %}
                    <img class="img-responsive" id="image4" src="/media/images/placeholder.png" alt="">
                    {% endif %}
                </a>
                <input type="file" name="image4_upload" id="image4_upload" multiple>
            </div>

            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                    {% if gallery.image5 %}
                    <img class="img-responsive" id="image5" src="/media/{{ gallery.image5 }}" alt="">
                    {% else %}
                    <img class="img-responsive" id="image5" src="/media/images/placeholder.png" alt="">
                    {% endif %}
                </a>
                <input type="file" name="image5_upload" id="image5_upload" multiple>
            </div>

            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                    {% if gallery.image6 %}
                    <img class="img-responsive" id="image6" src="/media/{{ gallery.image6 }}" alt="">
                    {% else %}
                    <img class="img-responsive" id="image6" src="/media/images/placeholder.png" alt="">
                    {% endif %}
                </a>
                <input type="file" name="image6_upload" id="image6_upload" multiple>
            </div>

            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                    {% if gallery.image7 %}
                    <img class="img-responsive" id="image7" src="/media/{{ gallery.image7 }}" alt="">
                    {% else %}
                    <img class="img-responsive" id="image7" src="/media/images/placeholder.png" alt="">
                    {% endif %}
                </a>
                <input type="file" name="image7_upload" id="image7_upload" multiple>
            </div>

            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                    {% if gallery.image8 %}
                    <img class="img-responsive" id="image8" src="/media/{{ gallery.image8 }}" alt="">
                    {% else %}
                    <img class="img-responsive" id="image8" src="/media/images/placeholder.png" alt="">
                    {% endif %}
                </a>
                <input type="file" name="image8_upload" id="image8_upload" multiple>
            </div>
        </div>
        <br>
             <!--<div class="form-group">-->
                 <!--<textarea name="terms" id="terms" class="form-control input-sm" placeholder="Terms" value="{{ content.terms }}"></textarea>-->
             <!--</div>-->
            <div class="form-group">
                <input type="text" name="terms" id="terms" class="form-control input-sm" placeholder="terms" value="{{ gallery.terms }}">
            </div>
        <br>
            <input type="submit" value="Register" id="js-upload-submit" class="btn btn-info btn-block">
        </form>
    <br>
    <!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  iPad View
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">

            <div class="col-lg-12">
                <h1 class="page-header">{{ user.Username }}</h1>
            </div>

            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                     {% if gallery.image1 %}
                    <img class="img-responsive" id="image1" src="/media/{{ gallery.image1 }}" alt="">
                    {% else %}
                    <img class="img-responsive" id="image1" src="/media/images/placeholder.png" alt="">
                    {% endif %}
                </a>
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                     {% if gallery.image2 %}
                    <img class="img-responsive" id="image2" src="/media/{{ gallery.image2 }}" alt="">
                    {% else %}
                    <img class="img-responsive" id="image2" src="/media/images/placeholder.png" alt="">
                    {% endif %}
                </a>
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                    {% if gallery.image3 %}
                    <img class="img-responsive" id="image3" src="/media/{{ gallery.image3 }}" alt="">
                    {% else %}
                    <img class="img-responsive" id="image3" src="/media/images/placeholder.png" alt="">
                    {% endif %}
                </a>
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                    {% if gallery.image4 %}
                    <img class="img-responsive" id="image4" src="/media/{{ gallery.image4 }}" alt="">
                    {% else %}
                    <img class="img-responsive" id="image4" src="/media/images/placeholder.png" alt="">
                    {% endif %}
                </a>
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                    {% if gallery.image5 %}
                    <img class="img-responsive" id="image5" src="/media/{{ gallery.image5 }}" alt="">
                    {% else %}
                    <img class="img-responsive" id="image5" src="/media/images/placeholder.png" alt="">
                    {% endif %}
                </a>
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                    {% if gallery.image6 %}
                    <img class="img-responsive" id="image6" src="/media/{{ gallery.image6 }}" alt="">
                    {% else %}
                    <img class="img-responsive" id="image6" src="/media/images/placeholder.png" alt="">
                    {% endif %}
                </a>
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                    {% if gallery.image7 %}
                    <img class="img-responsive" id="image7" src="/media/{{ gallery.image7 }}" alt="">
                    {% else %}
                    <img class="img-responsive" id="image7" src="/media/images/placeholder.png" alt="">
                    {% endif %}
                </a>
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                    {% if gallery.image8 %}
                    <img class="img-responsive" id="image8" src="/media/{{ gallery.image8 }}" alt="">
                    {% else %}
                    <img class="img-responsive" id="image8" src="/media/images/placeholder.png" alt="">
                    {% endif %}
                </a>
            </div>

        </div>
          <p>
                {{ gallery.terms }}
            </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
    <script language="javascript" type="text/javascript" src="{% static 'js/preview.js' %}"></script>
{% endblock %}
<!--http://jsfiddle.net/Mqvgx/-->

I think your problem is a different one than you think. Have you heard of loops? They can help you to avoid writing the same code eight times all the time, and they can also help you avoid having the problem you describe in the first place. — Sven Marnach, Aug 20 '15 at 20:02
Yes, I have definitely heard of loops. Am I able to just save the multiple images to an imageField and then call it in order? Would you have an example? — Ryan113, Aug 20 '15 at 20:16
You can create an `Image` model which has a foreign key to the `Content` instance it belongs to. Then you can have an arbitrary number of `Image`s per `Content` instance. Access a `Content` instance's `Image`s using `content_instance.image_set` (default name, can be changed via `related_name`) — Dane Hillard, Aug 20 '15 at 20:34

score 0 · Answer 1 · edited May 23 '17 at 11:51

Why would you want to do what you're doing? So if you wanted 500 images to be uploaded, you would add 500 fields to your model, then add 500 lines of code to your views to catch all the fields? Come on, there's a better approach. Let the programming language do the heavy lifting.

What you need is, as per Dane's comment above, is to create an Image model that ForeignKey to your Content model, then you could do something like this in your view:

{% for i in content.image_set.all %}
    {# then iterate over i to grab all the images into your image tag #}
{% endfor %}

Link to help you going (I'll recommend you pay close attention to what's happening in there):

Read about Model relationships from the Django Docs
InlineFormsetFactory is a great handy function to help you with submitting a form with related models. See a working example on stackoverflow
The above snippet, as used in a real application

With all due respect, your approach is a disaster, and won't scale a bit.

I appreciate your help. I'm definitely going to look into these. I set it to 8 images because I wanted to use 8 images specifically. I have more studying to do... Still new at this. Thank you for the direction! — Ryan113, Aug 20 '15 at 21:38

Django if ImageField is left blank or is equal to none return last image uploaded

1 Answers1