Your SlideShare is downloading. ×
Files
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Files

255
views

Published on

Published in: Technology, Art & Photos

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
255
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. Handling Files Thierry Sans
    • 2. MIME Types
    • 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
    • 4. 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
    • 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
    • 13. Client SideUploading a file
    • 14. Upload FORMthis form handles multipleformats 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(); }
    • 16. Using drag’n drop ...
    • 17. Using drag’n drop ... ... that’s your homework :)
    • 18. Server SideSaving and serving uploaded files
    • 19. Saving uploaded files def add(request): ... Controller
    • 20. Saving uploaded files def add(request): POST add/ ... Controller
    • 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 DatabaseThe 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 filesWe 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
    • 29. Controller - saving uploaded files WebDirectory/views.pyfrom django.views.decorators.csrf import csrf_exempt@csrf_exemptdef 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,))
    • 30. Controller - saving uploaded files WebDirectory/views.pyfrom django.views.decorators.csrf import csrf_exempt@csrf_exempt get the file from the HTTP requestdef 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 filesNot secure but we willtalk 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 filesNot secure but we willtalk 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>...
    • 42. Controller - serving uploaded files WebDirectory/views.pydef getImage(request,imageid): e = Entry.objects.get(id=imageid) return HttpResponse(e.image, mimetype=e.mimeType)
    • 43. Controller - serving uploaded files get the file from the database WebDirectory/views.pydef 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.pydef 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