Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Files

493 views

Published on

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

Files

  1. 1. Handling Files Thierry Sans
  2. 2. MIME Types
  3. 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. 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. 5. Example of how images are retrieved http://www.example.com//hello/bart/ http://localhost/HelloYou/
  6. 6. Example of how images are retrieved GET hello/bart/ http://www.example.com//hello/bart/ http://localhost/HelloYou/
  7. 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. 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. 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. 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. 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. 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. 13. Client SideUploading a file
  14. 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. 15. Submitting the form with Javascript WebDirectory/static/js/script.js function publish(){ $("form").submit(); }
  16. 16. Using drag’n drop ...
  17. 17. Using drag’n drop ... ... that’s your homework :)
  18. 18. Server SideSaving and serving uploaded files
  19. 19. Saving uploaded files def add(request): ... Controller
  20. 20. Saving uploaded files def add(request): POST add/ ... Controller
  21. 21. Saving uploaded files uploads The image is stored in the upload directory def add(request): POST add/ ... Controller
  22. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 33. Controller - serving uploaded files• How to serve these uploaded files?• Should we serve them as static files?
  34. 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. 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. 36. How to define getImage def getimage(request,imageid): ... Controller
  37. 37. How to define getImage GET getimage/345/ def getimage(request,imageid): ... Controller
  38. 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. 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. 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. 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. 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. 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. 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

×