I am new to Django and deploying upload image function recently.
I developed simple HTML template and it worked, but somehow, I could not find the uploaded images.
Below are my code.
settings.py (relevant lines)
MEDIA_ROOT = '/Users/jenny/Envs/django_test/static/'
MEDIA_URL = '/media/'
models.py
from django.db import models
from time import time
def get_upload_file_name(instance, filename):
return "uploaded_files/%s_%s" % (str(time()).replace('.','_'), filename)
# Create your models here.
class UploadImage(models.Model):
thumbnail = models.FileField(upload_to=get_upload_file_name)
def __unicode__(self):
return self.thumbnail
forms.py
from django import forms
from .models import UploadImage
class UploadImageForm(forms.ModelForm):
class Meta:
model = UploadImage
fields = ('thumbnail',)
views.py
def uploadtest(request):
return render_to_response("uploadtest.html",context_instance=RequestContext(request))
def uploadtest1(request):
if request.POST:
form = UploadImageForm(request.POST, request.FILES)
if form.is_valid():
form.save()
return HttpResponseRedirect('/uploadtest1/',context_instance=RequestContext(request))
else:
form = UploadImageForm()
return render_to_response ('uploadtest1.html',context_instance=RequestContext(request))
uploadtest.html
<form action="{% url "uploadtest1" %}" method="post" enctype="multipart/form-data">{% csrf_token %}
<p>
<input id="id_image" type="file" class="" name="image">
</p>
<input type="submit" value="Submit" />
</form>
uploadtest1.html
<p> uploaded! </p>
Would you please help me point out the problem? And how do I change the code to make it work?
I solved the problem and now the code is running well on my launched website.
forms.py
from django import forms
class DocumentForm(forms.Form):
docfile = forms.FileField(label='Select a file')
models.py
from django.db import models
# Create your models here.
class Document(models.Model):
#docfile = models.FileField(upload_to='documents/%Y/%m/%d')
docfile = models.FileField(upload_to='documents/')
views.py
from django.shortcuts import render_to_response
from django.template import RequestContext
from django.http import HttpResponseRedirect
from django.core.urlresolvers import reverse
from uploadfile.models import Document
from uploadfile.forms import DocumentForm
def imageupload(request):
# Handle file upload
if request.method == 'POST':
form = DocumentForm(request.POST, request.FILES)
if form.is_valid():
newdoc = Document(docfile = request.FILES['docfile'])
newdoc.save()
# Redirect to the document list after POST
return HttpResponseRedirect(reverse('uploadfile.views.list'))
else:
form = DocumentForm() # A empty, unbound form
# Load documents for the list page
doc_list = []
documents = Document.objects.all()
for document in documents:
doc_list.append(document.docfile.name)
print doc_list[-1]
# Render list page with the documents and the form
return render_to_response('imageupload.html',
{'documents': documents,'form': form},
context_instance=RequestContext(request))
def imageuploadresult(request):
#here I used PyImgur package to upload image and get public url. Use sbi to get the Google BestGuess. What I return to this page is the uploaded image and google best guess. I will skip this part of code.
return render_to_response(
'imageuploadresult.html',
{'query': q, 'imagepath':path2},
context_instance=RequestContext(request))
imageupload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title> Image Upload of **** System</title>
<!-- Bootstrap core CSS -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/static/css/dashboard.css" rel="stylesheet">
<!-- Custome CSS -->
<link href="/static/css/dataurl2.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="/static/js/ie8-responsive-file-warning.js"> </script><![endif]-->
<script src="/static/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<!--script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script-->
<!--script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> </script-->
<script src="/static/js/html5shiv.min.js"></script>
<script src="/static/js/respond.min.js"></script>
<!--script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script-->
<![endif]-->
</head>
<body>
<!--div class="loader"></div-->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="#navbar" aria-expanded="false" aria- controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href='/navigation/'>AKEOS</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li><a href="">Reports</a></li>
<li><a href="">Export</a></li-->
</ul>
<ul class="nav nav-sidebar">
<li class="active"><a href='/imageupload/'> Upload an Image <span class="sr-only">(current)</span></a></li>
<li><a href="#">Analytics</a></li>
<li><a href="#">Export</a></li-->
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main list-group">
<h1></h1>
<h2></h2>
<h3 class="custome-bar">
<h1></h1>
<h2></h2>
<form action="{% url "imageuploadresult" %}" method="post" enctype="multipart/form-data">
{% csrf_token %}
<p>{{ form.non_field_errors }}</p>
<p>{{ form.docfile.label_tag }} {{ form.docfile.help_text }}</p>
<p>
{{ form.docfile.errors }}
{{ form.docfile }}
</p>
<p><input type="submit" value="Upload" style="font- size:10pt;color:white;background-color:#339933;border:2px solid #339933;padding:3px" /></p>
</form>
</h3>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/docs.min.js"></script>
<script src="/static/js/pace.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/static/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
imageuploadresult.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title> Image Upload of **** System</title>
<!-- Bootstrap core CSS -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/static/css/dashboard.css" rel="stylesheet">
<!-- Custome CSS -->
<link href="/static/css/dataurl2.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="/static/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="/static/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<!--script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script-->
<!--script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script-->
<script src="/static/js/html5shiv.min.js"></script>
<script src="/static/js/respond.min.js"></script>
<!--script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script-->
<![endif]-->
</head>
<body>
<!--div class="loader"></div-->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href='/navigation/'>AKEOS</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<!--li><a href="/search/">You searched for:<strong> {{query}} </strong></a></li-->
<li><a href="#">Dashboard</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
</ul>
<ul class="nav nav-sidebar">
<!--li><a href="">Analytics</a></li>
<li><a href="">Reports</a></li>
<li><a href="">Export</a></li-->
</ul>
<ul class="nav nav-sidebar">
<li class="active"><a href='/imageupload/'> Upload an Image <span class="sr-only">(current)</span></a></li>
<!--li><a href="#">Reports</a></li>
<li><a href="#">Analytics</a></li>
<li><a href="#">Export</a></li-->
</ul>
</div>
<!--div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"-->
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main list-group">
<h3 class="custome-bar">
<h3>The Best Guess is:<strong> {{query}} </strong>
<form action="/main-page/" method="get">
<h5> To start over again, click the sidebars; to continue, click the button "Search" </h5>
<h5>
<input type="submit" name = "Submit" value="Search" >
</h5>
<h3></h3>
</form>
</h3>
<!--a class="btn btn-large btn-info" href="/main-page/">Search</a-->
<p><img src={{imagepath}} class='img-responsive' /></p>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/docs.min.js"></script>
<script src="/static/js/pace.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/static/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
create table in MySQL
table name : upload file_document
table columns : ID, docfile
Now you can get it work on your website!
Have a nice day!