15-437 Files

Handling Files Thierry Sans

MIME Types

MIME types MIME (Multipurpose Internet Mail Extensions)  is also known
as the content type ➡ Deﬁne the format of a document exchanged on internet   (IETF standard) http://www.iana.org/assignments/media-types/index.html

Examples of MIME types • text/html • text/css • text/javascript
• image/jpeg - image/gif - image/svg - image/png (and so on) • application/pdf • application/json

Example of how images are retrieved <html>! <body>! <img src=images/bart.jpg/>!
</body>! </html> GET hello/bart/ http://localhost/HelloYou/ http://www.example.com//hello/bart/ GET images/bart.jpg MIME : text/html MIME : image/jpg

Client Side Uploading a ﬁle

Upload FORM <form enctype="multipart/form-data" action="{% url 'add' %}" method="post">! <input
id="upload" type="file" name="file"/>! <input type="text" name="name"/>! <input type="text" name="website"/>! </form>! <a id="publishButton">Publish</div> WebDirectory/templates/WebDirectory/index.html this form handles multiple formats of data the URL to submit the form uploading ﬁles must be done through a POST request

Submitting the form with Javascript $(document).ready(function(){! $("#publishButton").click(function(){! $("form").submit();! });! });
WebDirectory/static/WebDirectory/js/script.js

Using drag’n drop ... ... that’s your homework 4 :)

Server Side Saving and serving uploaded ﬁles

Saving uploaded ﬁles Controller def add(request):! ... Database img mime
path image/png path image/jpg The image path and the mime type are stored in the database POST add/ uploads The image is stored in the upload directory Image

Conﬁguring Django about where to upload ﬁles # Absolute filesystem
path to the directory that will hold user-uploaded files.! # Example: "/home/media/media.lawrence.com/media/"! MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads/') tsans/settings.py

The model class Entry(models.Model):! # image = models.CharField(max_length=200)! name =
models.CharField(max_length=200)! webpage = models.URLField(max_length=200)  ! class Image(models.Model):! ! entry = models.ForeignKey(Entry, unique=True)! image = models.ImageField(upload_to='WebDirectory')! mimeType = models.CharField(max_length=20) WebDirectory/models.py where to store uploaded files use FileField for generic files We need to record the MIME type (see serving uploaded file) entry foreign key

Migrating the WebDirectory database $ python manage.py makemigrations WebDirectory! $
python manage.py migrate

Controller - saving uploaded ﬁles from django.views.decorators.csrf import csrf_exempt! !
@csrf_exempt! def add(request):! e = Entry(name = request.POST['name'],\! webpage = request.POST['website'])! e.save()  ! i = Image(entry = e,\! image = request.FILES['file'],\! mimeType=request.FILES['file'].content_type)! i.save()  ! return HttpResponseRedirect(reverse('index'))! WebDirectory/views.py get the ﬁle from the HTTP request Not secure but we will talk about security later get the MIME type

Controller - serving uploaded files • How to serve these
uploaded files? • Should we serve them as static files?

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

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)

How to deﬁne getImage Controller def getimage(request,imageid):! ... GET getimage/345/
uploads Retrieve the image from the upload directory  (this is done automatically by Django) Database img mime path image/png path image/jpg Get the image path and mime type from the database based on its id Return a HTTP response of the corresponding mime type Image

Controller - serving uploaded ﬁles urlpatterns = patterns('',! url(r'^$', views.index,
name='index'),! url(r'^add/$', views.add, name='add'),! url(r'^getimage/(?P<image_id>\d+)/$',\! views.getImage,\! name='getImage'),! ) WebDirectory/urls.py

Controller - serving uploaded ﬁles def getImage(request,image_id):! i = Image.objects.get(id=image_id)!
return HttpResponse(i.image.read(), content_type=i.mimeType)! ! def index(request):! ! image_list = Image.objects.all()! return render(request,’WebDirectory/index.html’,\  {'image_list': image_list}) WebDirectory/views.py get the ﬁle from the database return an HTTP response of the corresponding MIME type

Updating the image URL in the template WebDirectory/templates/WebDirectory/index.html ...! <div
id="directory">! {% if image_list %}! {% for image in image_list %}! <div class="entry">! <div class="image"><img src="{% url 'getImage' image.id %}"/>! </div>! <div class=“name">{{image.entry.name}}</div>! <div class="website">! <a href=“{{image.entry.webpage}}”>  ! ! ! {{image.entry.name}}'s website  ! ! </a>! ...

15-437 Files

15-437 Files

ThierrySans

More Decks by ThierrySans

Other Decks in Education

Featured

Transcript

Handling Files Thierry Sans

MIME Types

MIME types MIME (Multipurpose Internet Mail Extensions)  is also known

Examples of MIME types • text/html • text/css • text/javascript

Example of how images are retrieved <html>! <body>! <img src=images/bart.jpg/>!

Client Side Uploading a ﬁle

Upload FORM <form enctype="multipart/form-data" action="{% url 'add' %}" method="post">! <input

Submitting the form with Javascript $(document).ready(function(){! $("#publishButton").click(function(){! $("form").submit();! });! });

Using drag’n drop ... ... that’s your homework 4 :)

Server Side Saving and serving uploaded ﬁles

Saving uploaded ﬁles Controller def add(request):! ... Database img mime

Conﬁguring Django about where to upload ﬁles # Absolute filesystem

The model class Entry(models.Model):! # image = models.CharField(max_length=200)! name =

Migrating the WebDirectory database $ python manage.py makemigrations WebDirectory! $

Controller - saving uploaded ﬁles from django.views.decorators.csrf import csrf_exempt! !

Controller - serving uploaded ﬁles • How to serve these

Why not serving uploaded ﬁles as static ﬁles? Because we

A good way to serve uploaded ﬁles Have a method

How to deﬁne getImage Controller def getimage(request,imageid):! ... GET getimage/345/

Controller - serving uploaded ﬁles urlpatterns = patterns('',! url(r'^$', views.index,

Controller - serving uploaded ﬁles def getImage(request,image_id):! i = Image.objects.get(id=image_id)!

Updating the image URL in the template WebDirectory/templates/WebDirectory/index.html ...! <div