Hi all,
Trucking right along with my project, but ran into a form issue today that I can’t seem to fix. It has to do with using request.FILES. When I load either of these two forms, it looks like a submit/validation is happening without the user submitting the form. Screenshot for image update shows page on initial load and also shows how caption data is not there (and it should be).
@login_required(login_url=reverse_lazy('login'))
def image_add(request):
form = ImageForm(request.POST or None, request.FILES)
form.fields["collection"].queryset = Collection.objects.filter(user=request.user.id)
template = 'collections_app/image_add.html'
context = {'form': form}
if form.is_valid():
image = form.save(commit=False)
image.user_id = request.user.id
image.save()
form.save()
return redirect('/user/content')
return render(request, template, context)
@login_required(login_url=reverse_lazy('login'))
def image_update(request, pk):
image = CollectionImage.objects.get(pk=pk)
form = ImageForm(request.POST or None, request.FILES, instance=image)
form.fields["collection"].queryset = Collection.objects.filter(user=request.user.id)
template = 'collections_app/image_update.html'
context = {'form': form}
if form.is_valid():
form.save()
return redirect('/user/content')
return render(request, template, context)
Your views aren’t making a distinction between a GET (when the form is being initially loaded) and the POST (when the form has been submitted).
Hi Ken, I’m not sure how to go about fixing it. Can you give me a hint?
Absolutely - In the request object passed to the view, there’s an attribute named method which can be used to determine whether it’s an initial “GET” of the form, or if the form is being submitted (“POST”).
See:
Ken, back and almost crying.
So I feel I almost have my form for submitting and editing images working, YET I’m getting two browse buttons. What on earth. And to add to the mystery, it’s not in the HTML source! Something is overriding the my “Add” submit button.
View:
@login_required(login_url=reverse_lazy('login'))
def image_update(request, pk):
image = CollectionImage.objects.get(pk=pk)
if request.method == 'POST':
form = ImageForm(request.POST or None, request.FILES, instance=image)
form.fields["collection"].queryset = Collection.objects.filter(user=request.user.id)
if form.is_valid():
form.save()
return redirect('/user/content')
else:
form = ImageForm(instance=image)
form.fields["collection"].queryset = Collection.objects.filter(user=request.user.id)
template = 'collections_app/image_update.html'
context = {'form': form,
'image': image}
return render(request, template, context)
HTML:
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="/static/css/main.css" />
<title>Artist Files Revealed: International Directory of Artist Files</title>
</head>
<body>
<div class="flex-container-main">
<div style="flex: .05 .5 260px"> <a href="/"><img src="/static/graphics/Artist-Files-Revealed-logo-blue.svg"></a>
<ul class="navigation"> <li><a class="navigation" href="/">Home</a></li> <li><a class="navigation" href="/collections/browse">Browse Directory</a></li>
</ul>
<ul class="navigation"> <li><a href="/collections/new">New Listings</a></li> <li><a href="/collections/random/">Random Collection</a></li> <li><a href="/collections/browse/consortia">Consortial Collections</a></li> </ul>
<ul class="navigation"> <li><a href="/collectors/browse/dealers">Dealer Directory</a></li> </ul>
<ul class="navigation"> <li><a href="/what-are-artist-files">What Are Artist Files?</a></li> </ul>
<ul class="navigation-counts"> <li><strong>13</strong> collections in the directory</li> <li>Add yours below!</li> </ul>
<ul class="navigation-login">
<li><strong>Hi Sam!</strong></li> <li><a href="/user/content">Create / Edit / Delete</a></li> <li><a href="/logout/">Log Out</a></li>
</ul>
</div>
<div style="flex: 2 1 1500px">
<div id="entry-dates-database"> <label class="fresh">We're fresh! Directory last updated</label><strong class="date">July 16, 2020</strong></div>
<h1 class="title">Artist Files Revealed: International Directory of Artist Files Collections</h1>
<h2 class="home">A Resource from the Art Libraries Society of North America, Artist Files Special Interest Group</h2>
<div class="flex-container-content">
<div>
<h1 class="home">Add Collection Image</h1>
<input type="hidden" name="csrfmiddlewaretoken" value="2gusz3JiOYtTvlG2N0A7l6CugnTsCyMDXnVKh9YEekdPXWOYScPTnJuHFRtOmy2e">
<form action="" method="post" enctype="multipart/form-data" novalidate>
<table>
<tr class="required"><th><label class="required" for="id *image">Image File:</label></th><td><input type="file" name="image" accept="image/*" required id="id* image"><br><span class="helptext">Upload image showing example material from files and/or storage systems in use.<br />It seems reasonable to limit yourself to ten images per collection. Only five random images how in your collection detail view.</br />Show us the fun stuff!</span></td></tr>
<tr class="required"><th><label class="required" for="id *caption">Caption:</label></th><td><input type="text" name="caption" maxlength="50" required id="id* caption"><br><span class="helptext">Provide a short yet descriptive caption describing the image. <br />Be very economical. 50 character limit, but shorter is better.</span></td></tr>
<tr class="required"><th><label class="required" for="id *collection">Related Collection:</label></th><td>*
*<select name="collection" id="id* collection">
<option value="8">Charles M. Russell Research Collection</option>
<option value="9">Frederic Remington Research Collection</option>
<option value="2">General Artist Files Collection</option>
<option value="10">George Bellows Lifetime Exhibition Research Collection</option>
<option value="7">George Bellows Research Collection</option>
</select></td></tr>
<tr> <td> </td> <td><input type="file" value="Add"></td> </tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>
Fixed, and a well-deserved duh to me. Changed form to “input type=“submit”” Somewhere I read to use type=“file” for file uploads. Not so.
1 Like
