3. MIME types
• MIME (Multipurpose Internet Mail Extensions) is also known
as the content type
➡ Define the format of a document exchanged on internet
(IETF standard) http://www.iana.org/assignments/media-types/index.html
5. Example of how images are retrieved
http://www.example.com//hello/bart/
http://localhost/HelloYou/
6. Example of how images are retrieved
GET hello/bart/
http://www.example.com//hello/bart/
http://localhost/HelloYou/
7. Example of how images are retrieved
GET hello/bart/
http://www.example.com//hello/bart/
http://localhost/HelloYou/
<html>
<body>
<img src=images/bart.jpg/>
</body>
</html>
8. Example of how images are retrieved
GET hello/bart/
http://www.example.com//hello/bart/
http://localhost/HelloYou/
MIME : text/html
<html>
<body>
<img src=images/bart.jpg/>
</body>
</html>
9. Example of how images are retrieved
GET hello/bart/
http://www.example.com//hello/bart/
http://localhost/HelloYou/
MIME : text/html
<html>
<body>
<img src=images/bart.jpg/>
</body>
</html>
GET images/bart.jpg
10. Example of how images are retrieved
GET hello/bart/
http://www.example.com//hello/bart/
http://localhost/HelloYou/
MIME : text/html
<html>
<body>
<img src=images/bart.jpg/>
</body>
</html>
GET images/bart.jpg
11. Example of how images are retrieved
GET hello/bart/
http://www.example.com//hello/bart/
http://localhost/HelloYou/
MIME : text/html
<html>
<body>
<img src=images/bart.jpg/>
</body>
</html>
GET images/bart.jpg
MIME : image/jpg
12. Example of how images are retrieved
GET hello/bart/
http://www.example.com//hello/bart/
http://localhost/HelloYou/
MIME : text/html
<html>
<body>
<img src=images/bart.jpg/>
</body>
</html>
GET images/bart.jpg
MIME : image/jpg
14. Upload FORM
this form handles multiple
formats of data
the URL to submit the form
uploading files must be done
through a POST request
<form enctype="multipart/form-data" action="add/" method="post">
<input id="upload" type="file" name="file"/>
<input type="text" name="name"/>
<input type="text" name="webpage"/>
</form>
<a href="#" onclick="submit();return false;">Submit</a>
WebDirectory/templates/WebDirectory/index.html
15. Submitting the form with Javascript
WebDirectory/static/js/script.js
function publish(){
$("form").submit();
}
21. Saving uploaded files
uploads
The image is stored in the upload directory
def add(request):
POST add/ ...
Controller
22. Saving uploaded files
uploads
The image is stored in the upload directory
def add(request):
POST add/ ...
img mime name url
path image/png Khaled http://
path image/jpg Kemal http://
Controller
Database
The image path and the mime type are stored in the database
23. Configuring Django
• Create a directory upload in your Django project
• Configure your project (edit settings.py)
settings.py
# Absolute filesystem path to the directory that will hold user-uploaded files.
# Example: "/home/media/media.lawrence.com/media/"
MEDIA_ROOT = os.path.join(PROJECT_PATH, 'uploads/')
24. The model
WebDirectory/models.py
class Entry(models.Model):
# image = models.CharField(max_length=200)
image = models.ImageField(upload_to='WebDirectory')
mimeType = models.CharField(max_length=20)
name = models.CharField(max_length=200)
webpage = models.URLField(max_length=200)
25. The model
use FileField for generic files
WebDirectory/models.py
class Entry(models.Model):
# image = models.CharField(max_length=200)
image = models.ImageField(upload_to='WebDirectory')
mimeType = models.CharField(max_length=20)
name = models.CharField(max_length=200)
webpage = models.URLField(max_length=200)
26. The model
use FileField for generic files
WebDirectory/models.py
class Entry(models.Model):
# image = models.CharField(max_length=200)
image = models.ImageField(upload_to='WebDirectory')
mimeType = models.CharField(max_length=20)
name = models.CharField(max_length=200)
webpage = models.URLField(max_length=200)
where to store
uploaded files
27. The model
use FileField for generic files
WebDirectory/models.py
class Entry(models.Model):
# image = models.CharField(max_length=200)
image = models.ImageField(upload_to='WebDirectory')
mimeType = models.CharField(max_length=20)
name = models.CharField(max_length=200)
webpage = models.URLField(max_length=200)
where to store
uploaded files
We need to record the MIME type
(see serving uploaded file)
28. Cleaning the WebDirectory database
• When the model (i.e. the database schema) changes
➡ The WebDirectory database must be reset
• remove the existing records
• recreate the tables
$ python manage.py reset WebDirectory
30. Controller - saving uploaded files
WebDirectory/views.py
from django.views.decorators.csrf import csrf_exempt
@csrf_exempt get the file from the HTTP request
def add(request):
e = Entry(image=request.FILES['file'],
mimeType=request.FILES['file'].content_type,
name=request.POST['name'],
webpage = request.POST['webpage'])
e.save()
return HttpResponseRedirect(reverse('WebDirectory.views.index',))
31. Controller - saving uploaded files
Not secure but we will
talk about security later
WebDirectory/views.py
from django.views.decorators.csrf import csrf_exempt
@csrf_exempt get the file from the HTTP request
def add(request):
e = Entry(image=request.FILES['file'],
mimeType=request.FILES['file'].content_type,
name=request.POST['name'],
webpage = request.POST['webpage'])
e.save()
return HttpResponseRedirect(reverse('WebDirectory.views.index',))
32. Controller - saving uploaded files
Not secure but we will
talk about security later
WebDirectory/views.py
from django.views.decorators.csrf import csrf_exempt
@csrf_exempt get the file from the HTTP request
def add(request):
e = Entry(image=request.FILES['file'],
mimeType=request.FILES['file'].content_type,
name=request.POST['name'],
webpage = request.POST['webpage']) get the MIME type
e.save()
return HttpResponseRedirect(reverse('WebDirectory.views.index',))
33. Controller - serving uploaded files
• How to serve these uploaded files?
• Should we serve them as static files?
34. Why not serving uploaded files as static files?
• Because we want to control
• who can access these files
• when to serve these files
• how to serve these files
35. A good way to serve uploaded files
• Have a method to control (controller) the file - getImage
• Reference the image using an identifier
• automatically generated hash code
• or database entry id (primary key in the database)
36. How to define getImage
def
getimage(request,imageid):
...
Controller
37. How to define getImage
GET getimage/345/
def
getimage(request,imageid):
...
Controller
38. How to define getImage
GET getimage/345/
def
getimage(request,imageid):
...
img mime name url
path image/png Khaled http://
path image/jpg Kemal http://
Controller
Database
Get the image path and mime type
from the database based on its id
39. How to define getImage
uploads
Retrieve the image from the upload directory
(this is done automatically by Django)
GET getimage/345/
def
getimage(request,imageid):
...
img mime name url
path image/png Khaled http://
path image/jpg Kemal http://
Controller
Database
Get the image path and mime type
from the database based on its id
40. How to define getImage
uploads
Retrieve the image from the upload directory
(this is done automatically by Django)
GET getimage/345/
def
getimage(request,imageid):
...
img mime name url
path image/png Khaled http://
Return a HTTP response of the path image/jpg Kemal http://
corresponding mime type Controller
Database
Get the image path and mime type
from the database based on its id
41. Updating the image URL in the template
WebDirectory/templates/WebDirectory/index.html
...
<div id="directory">
{% if entry_list %}
{% for entry in entry_list %}
<div class="entry">
<div class="image"><img src="getimage/{{entry.id}}/"/>
</div>
<div class="name">{{entry.name}}</div>
<div class="website">
<a href="{{entry.webpage}}">{{entry.name}}'s website</a>
...
43. Controller - serving uploaded files
get the file from the database
WebDirectory/views.py
def getImage(request,imageid):
e = Entry.objects.get(id=imageid)
return HttpResponse(e.image, mimetype=e.mimeType)
44. Controller - serving uploaded files
get the file from the database
WebDirectory/views.py
def getImage(request,imageid):
e = Entry.objects.get(id=imageid)
return HttpResponse(e.image, mimetype=e.mimeType)
return an HTTP response of
the corresponding MIME type
