So, let\u2019s get started.<\/p>\n
File Upload in Django – Working<\/h3>\n
File uploading is just like any input from the user. For example –<\/strong> On Facebook, when you update your profile picture. You select a file from your device and the file is then uploaded to the Facebook server. The server stores the file and is then served when anyone visits your profile.<\/p>\n You can say the file is the same as static content on your website. Now let\u2019s learn how to upload file in Django.<\/p>\n File uploading and handling have many approaches in Django. We will use models to implement file upload in Django. We are using model forms in this example.<\/p>\n Before any file upload application, these settings are necessary. Open project\u2019s settings.py file<\/strong> and add these lines below the STATIC FILES<\/strong> settings.<\/p>\n Code:<\/strong><\/p>\n Code Display:<\/strong><\/p>\n Understanding the Settings<\/strong><\/p>\n MEDIA_ROOT<\/strong> is an empty string by default. It takes in the absolute file path of a directory. We have used the same join functions in Django\u00a0<\/strong>static files tutorial<\/strong><\/em> that\u00a0we have passed in the file path of media directory. This directory will store all the files a user uploads in Django.<\/p>\n Although you can directly give the path as a string in MEDIA_ROOT. It has its own problems. That approach will raise errors when you upload the file in the production environment. Always try to use dynamic URLs which are relative to the project directory. Like we used join method in the above setting.<\/p>\n MEDIA_URL<\/strong> works the same way as STATIC_URL. This URL is used by Django instead of serving files with an absolute path. When Django will serve an uploaded file media it will be automatically added to the URL.<\/p>\n Remember MEDIA_ROOT & MEDIA_URL can have totally different values. The directory name is not required to be same. You can name MEDIA_URL anything.<\/p>\n Note:<\/strong><\/p>\n MEDIA_URL & STATIC_URL should always have different values. Also, this goes for MEDIA_ROOT & STATIC_ROOT settings too. It was common in the past to use media root to all server static files. With the experiences of developers, this approach has some serious security implications.<\/p>\n It is mandatory to have different values for media settings and static settings.<\/p>\n Now, make a directory named media<\/strong> at the project level.<\/p>\n Media directory exists at the same level as manage.py <\/strong>file.<\/p>\n Now, we will make an application which can store a user\u2019s profile in Django. This profile will have some basic information and a profile picture. We will also make a form to upload the picture. We will learn some important concepts of doing same in Django.<\/p>\n Now, from your terminal, execute the command to make a new application.<\/p>\n Code:<\/strong><\/p>\n Command Display:<\/strong><\/p>\n Now, install the new application in settings.py<\/strong> file.<\/p>\n Now, paste this code in profile_maker\/models.py<\/strong> file.<\/p>\n Code:<\/strong><\/p>\n Code Display:<\/strong><\/p>\n Understanding the Code:<\/strong><\/p>\n We have made a simple model for a user profile. It has fields like fname, lname, technologies, email, display_picture.\u00a0<\/em>We have also defined an __str__ function<\/strong>. This function will return the value of fname when we reference the object. The important field is display_picture<\/strong> field.<\/p>\n display_picture is a File Field.<\/strong> It should have been an image field. We use a file field to store files on the server. It will create a File object which has many built-in attributes and methods. When a user uploads a file in the file field, we are storing file object in database and store file in MEDIA_ROOT<\/strong>.<\/p>\n A file object is mainly to associate a file with an object or profile. We will learn more about file object in the upcoming section.<\/p>\n Make a new forms.py file in your application. Inside profile_maker\/forms.py<\/strong> file, paste this code:<\/p>\n Code:<\/strong><\/p>\n Code Display:<\/strong><\/p>\n Understanding the code:<\/strong><\/p>\n Here we are using things called model forms. These forms are special and are very handy.<\/p>\n The basic concept of model forms is that they derive their structure from models. Yes, that\u2019s right, we don\u2019t have to define a form and connect it with models. We can do that directly via model forms.<\/p>\n Models forms are a subclass of forms. When we make a form using ModelForm<\/strong> class, we use META<\/strong> class. In META, there are two attributes required, they are:<\/p>\n That\u2019s all the information on model forms, we require for this tutorial.<\/p>\n So basically, we will get a form with the fields defined in fields attribute of Form. It\u2019s a very common practice to use model forms but is not necessary.<\/p>\n Now, in profile_maker\/views.py<\/strong> file, paste this.<\/p>\n Code:<\/strong><\/p>\n Code Display:<\/strong><\/p>\n Then our function definition starts.<\/p>\n In this function, we have defined a form object. It will render a form. Then we are using form validation to clean our form data. This function returns True or False. If the form has valid data, we can store the data locally. Then we are extracting the file type uploaded by the user.<\/p>\n Since we are using file field, we have multiple attributes. The file URL contains the filetype after the \u2018.\u2019. We have used a basic string function split()<\/strong> for this purpose.<\/p>\n The split() will split the string into parts where \u2018.\u2019<\/strong> is present. You can get more on this in basic Python functions<\/strong><\/em>. In the next line, we are making it a lower type string. Then we are performing a check whether the file is an image file or not. We can skip this part if we use the image field.<\/p>\n So, if the file is not an image file, it will render error.html.<\/strong><\/p>\n Otherwise, it will render details.html<\/strong>, showing the details we just filled. If the form is rendered for the first time, it will render create.html<\/strong>. Now, we understood the view function. Let\u2019s make our templates.<\/p>\n Now, again make a templates folder. The directory pattern will be profile_maker\/templates\/profile_maker<\/strong>. Remember to make two directories. First is templates and then the profile_maker directory inside it.<\/p>\n Now, make a new file in profile_maker\/templates\/profile_maker<\/strong> named create.html.<\/strong><\/p>\n Paste this code in create.html.<\/p>\n Code:<\/strong><\/p>\n Code Display:<\/strong><\/p>\n It\u2019s a simple template rendering the form. We have also used some bootstrap. You can check out our Django\u00a0bootstrap tutorial<\/strong><\/em> for the same. The important part is the form attribute enctype<\/strong>. This attribute allows us to send the files with our data.<\/p>\n When any file is uploaded in Django it becomes a part of the request object. More specifically, it can be accessed with the request.FILES object<\/strong>. It is a dictionary and has a key for each file uploaded. You can access data from the uploaded file via this dictionary.<\/p>\n Although, we have an image file and we have not used any API to access its data. Now, make a new file named details.html<\/strong> in the same directory. Paste this code in it.<\/p>\n Code:<\/strong><\/p>\n Code Display:<\/strong><\/p>\n This template is used to display the image we just uploaded. We are using the {{ user_pr.display_picture.url }}<\/strong> in image src. Then make another file in the same directory. Its name is error.html<\/strong>. Paste this code in it.<\/p>\n Code:<\/strong><\/p>\n Code Display:<\/strong><\/p>\n It will be rendered when the user uploaded a non-image file. It is defined in the view function.<\/p>\n We have made all the files. Open your main urls.py file. In this file, paste this code:<\/p>\n Code Display:<\/strong><\/p>\n Then make a new file in profile_maker\/<\/strong> directory named urls.py<\/strong>. Paste this code in that profile_,maker\/urls.py<\/strong> file.<\/p>\n Code:<\/strong><\/p>\n Code Display:<\/strong><\/p>\n Concentrate on the if section. We are using these settings only when the project is in debug mode. Then we have added these patterns to the urlpatterns variable<\/strong>. These patterns are referred when a media file is requested. These settings are important when serving the file uploaded by the user.<\/p>\n Although, these are only used when you are developing a website. The server settings are different for servers.<\/p>\n Now, we are ready to test our app. Search in URL bar: localhost:8000\/upload<\/em><\/p>\n When you submit the form.<\/p>\n This is the details page. Since there was no error, we get this output. You can also see that file in the media folder.<\/p>\nConfiguring Settings<\/h3>\n
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')\r\nMEDIA_URL = 'media\/'\r\n\r\n<\/pre>\n
![\"Configuring](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/Configuring-Settings.png\")
<\/a><\/p>\n1. MEDIA_ROOT<\/h4>\n
2. MEDIA_URL<\/h4>\n
Make a Directory named Media<\/h4>\n
<\/a><\/p>\nA User Profile Application<\/h3>\n
1. Make a New Application<\/h4>\n
> python manage.py startapp profile_maker<\/pre>\n
<\/a><\/p>\n<\/a><\/p>\n2. Make Models<\/h4>\n
from django.db import models\r\n\r\n\r\nclass User_Profile(models.Model):\r\n fname = models.CharField(max_length=200)\r\n lname = models.CharField(max_length = 200)\r\n technologies = models.CharField(max_length=500)\r\n email = models.EmailField(default = None)\r\n display_picture = models.FileField()\r\n\r\n def __str__(self):\r\n return self.fname<\/pre>\n
<\/a><\/p>\n3. Make Forms<\/h4>\n
from django import forms\r\nfrom .models import User_Profile\r\n\r\n#DataFlair #File_Upload\r\nclass Profile_Form(forms.ModelForm):\r\n\r\n class Meta:\r\n model = User_Profile\r\n fields = [\r\n 'fname',\r\n 'lname',\r\n 'technologies',\r\n 'email',\r\n 'display_picture'\r\n ]<\/pre>\n
<\/a><\/p>\nModel forms<\/h4>\n
\n
4. Make\u00a0Views<\/h4>\n
from django.shortcuts import render\r\nfrom .forms import Profile_Form\r\nfrom .models import User_Profile\r\n\r\nIMAGE_FILE_TYPES = ['png', 'jpg', 'jpeg']\r\n\r\ndef create_profile(request):\r\n form = Profile_Form()\r\n if request.method == 'POST':\r\n form = Profile_Form(request.POST, request.FILES)\r\n if form.is_valid():\r\n user_pr = form.save(commit=False)\r\n user_pr.display_picture = request.FILES['display_picture']\r\n file_type = user_pr.display_picture.url.split('.')[-1]\r\n file_type = file_type.lower()\r\n if file_type not in IMAGE_FILE_TYPES:\r\nreturn render(request, 'profile_maker\/error.html')\r\n user_pr.save()\r\n return render(request, 'profile_maker\/details.html', {'user_pr': user_pr})\r\n context = {\"form\": form,}\r\n return render(request, 'profile_maker\/create.html', context)<\/pre>\n<\/a>
\nThe views are simple to understand. We have imported the models and forms in this view file. Then we have defined a list IMAGE_FILE_TYPES<\/strong>. We use it to check the type of file.<\/p>\n5. Create Templates<\/h4>\n
<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <title>Make Profile<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\" integrity=\"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz\/K68vbdEjh4u\" crossorigin=\"anonymous\">\r\n <\/head>\r\n <body>\r\n\r\n <center>\r\n <div class=\"jumbotron\">\r\n <h1 class=\"display-4\">DataFlair Django File Uploading<\/h1>\r\n {% block replace %}\r\n <p class=\"lead\">To make a user profile and upload the files fill this form<\/p>\r\n <hr class=\"my-4\">\r\n <form method=\"POST\" enctype=\"multipart\/form-data\">\r\n <!-- Very Important csrf Token -->\r\n {% csrf_token %}\r\n <table>\r\n {{ form.as_table }}\r\n <\/table>\r\n <input type=\"submit\" class=\"btn btn-primary btn-lg\" name=\"register\">\r\n <\/div>\r\n <\/center>\r\n {% endblock %}\r\n <\/body>\r\n<\/html><\/pre>\n<\/a><\/p>\nrequest.FILES dictionary<\/h4>\n
{% extends 'profile_maker\/create.html' %}\r\n{% block replace %}\r\n<CENTER>\r\n<div class=\"jumbotron\">\r\n <h1 class=\"display-4\">Welcome to DataFlair<br>Hello {{ user_pr.fname }}<\/h1>\r\n <p class=\"lead\">its an awesome profile picture<\/p>\r\n <hr class=\"my-4\">\r\n <img src=\"{{ user_pr.display_picture.url }}\" class=\"image_responsive\" height=\"100px\" width=\"100px\">\r\n <p>\r\n {{ user_pr.display_picture.url }}<BR>\r\n You have learned some awesome technologies like {{ user_pr.technologies }}<\/p>\r\n<\/div>\r\n<\/CENTER>\r\n{% endblock %}<\/pre>\n<\/a><\/p>\n{% extends 'profile_maker\/create.html' %}\r\n{% block replace %}\r\n<CENTER>\r\n <h1 style = 'border: 5px red solid;'> hello, you have uploaded the wrong file type.<\/h1>\r\n<\/CENTER>\r\n{% endblock %}\r\n\r\n<\/pre>\n<\/a><\/p>\n6. Configure URLs<\/h4>\n
from django.contrib import admin\r\nfrom django.urls import path, include\r\n\r\nurlpatterns = [\r\n path('admin\/', admin.site.urls),\r\n path('upload\/', include('profile_maker.urls')),\r\n]<\/pre>\n<\/a><\/p>\nfrom django.urls import path\r\nfrom . import views\r\nfrom myproject import settings\r\nfrom django.conf.urls.static import static\r\n\r\nurlpatterns = [\r\n path('', views.create_profile, name = 'create'),\r\n]\r\n\r\nif settings.DEBUG:\r\n urlpatterns += static(settings.STATIC_URL, document_root = settings.STATIC_ROOT)\r\n urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)<\/pre>\n<\/a><\/p>\n7. Test the Application<\/h4>\n
<\/a><\/p>\n<\/a><\/p>\n