Upload Image in Django

Hello guys, welcome to LearnVern.

In the last topic we saw Login user with server side validation, in which we saw how we can login our users using session management, and how through that particular user session details, we can display them on the browser.

Right? Clear?

Now today we will see how through Django, you can upload an image, right?

And how to display the image that has been already uploaded on your database, on the browser.

Right? Clear?

So our today's topic totally depends on image uploading.

Ok right?

So first of all, let us know what image uploading is.

Image uploading is a very easy task, you can easily Image uploading through Django.

In which you will use a built-in library named Pillow Library.

What is the name of the library? Pillow library.

With the help of the pillow library, you will upload the image here and store it on your server side.

Right? Clear?

So your image will be stored on the server side.

So here when you do image uploading, for the part of image uploading, in models, in models.py app you have to use the image field.

Which field do you have to use?

Imagefield.

Right?

With the help of an image field you can upload that particular image.

Without imagefield you cannot upload your images on the server.

Okay? Right?
Secondly, when you are getting images uploaded, in your form tag, enctype multipart form data should be written compulsorily.

Why so?

Because with the help of that particular multipart form data, you are uploading that particular file through that form.

Means if enctype multipart form data is not written in your file, you cannot upload your image through that form.

Why?

Because a new file is entering that form.

Show to support that particular file, the multipart form data is used.

Ok?

Has everyone understood?

Now moving forward, what is the first step?

After uploading the image when you want to display it, you need to paste these settings under settings.py.

Why do you have to do it?

Because with the help of this specific setting only, you can show your image, means fetch it and display it on your browser.

Without this setting you cannot show your image on the browser.

There are two things here.

One is the media root.

Media root means the server path where the files are stored in your PC.

And media URL which means that URL with the help of which you can access that file on your browser.

Ok? Right? Understood everyone?

Ok?

Now you will need to configure the settings in your project’s urls.py.

 Why?

Because when your debugging starts, the media URL which we saw in settings.py that is the previous slide, the media URL settings which is we input in settings.py, to access it.

When I show you all of these things practically you will understand it easily.

And you will be able to understand it more clearly.

Ok guys?

Let's move onto the practical part.

Then you will be able to understand it better.

Ok?

So I'll open my code here.

I have opened my code here, the VS code.

First of all you have to go to settings.py here.

Your App must be compulsorily installed here.

And your app should be included in urls.py.

Right?

And here, path and blank.

Then Include and App.urls.

I have explained all of this in the previous videos so I won’t repeat them again.

Those of you who don't know, watch the previous videos such as Django introduction, Django registration form.

Kindly watch all those videos first and then continue with this video.

Otherwise some problem can be created related to this

Okay?

Okay.

You have to go into an App and make a new file named urls.py.

Ok?

And then you have to copy this particular portion from this Project URLs, paste it here and then leave this blank.

Okay?

Right? Clear?

Now here, what we have to do is, first of all we have to make a template.

Ok?

So to make the template, which structure do we have to follow?

First off, we have to make a folder named template.

Oka?

And under that template folder, we have to make a new folder which is for the app name.

And we will make a New file here, where I will write index.HTML.

We will make a form in this particular file which will be in the center.

Okay?

We’ll give the form title under H1 as image Uploading Form.

First of all we have to create a form with post method.

Right?

Clear?

We have to do the image uploading.

So like I said, in the form tag, it is compulsory to add enctype Multipart Form-data.

Ok?

Why do we have to add?

Because through this form we are uploading a new file.

OK, here I'll take a table.

In table I will take a TR.

In TR, I’ll take a TD in which I’ll write Image Name.

I will take one more TD in which the upload button which we need of choose file, right?

Here whenever you have to upload a file, the input type should be file.

And you can give its input name here right?

We will take one more TR which will stand for the submit button.

Okay?

So here it should be input type, for button it should be submit.

And in the value, I will write upload.

Ok?

So our form is ready.

We will run and check it once.

So to run what we have to do first?

We will have to make a view.

So index file view.

Okay?

In which I kept the View’s name def Index Page.

Then request.

Then I did return render, in which I passed a request and I further passed App/index.HTML.

Ok?

So our view is made.

Now what do we make of it?

We will make Urls.

We will go to urls.py and in that what is the first thing that we will do?

We will import it.

From.import views.

Okay?

Right?

And we will take a path here.

Will leave this blank here.

We will call views. index page and write the name of the particular URL, Which is index.

Okay? Right?

Now what do we have to do?

We will start the server to check.

Python manage.py Runserver.

Our server has started.

And we will go here.

Then we will call our link 127.0.0.1 8000.

It somewhat looks like this.

It doesn’t look proper & our choose file button should be at the bottom on the side part.

Right?

So what we will do is, we will change it.

We will go here.

We will cut the input TD.

And make one more TD which is for Input type text and we will take the name image name.

Okay?

Because we had not made that column.

Now we will take one more TR in which we will paste this TD.

Now when we refresh it, it has come here perfectly.

Right?

Upload image here & image’s name here.

Click here and it will ask you to select an image.

Okay? So we have made this particular form which is image uploading form.

Right?

Now we want to store this form’s data on the server side, means on the database.

We will On our database, which is XAMPP.

Okay?

So this is our database.
We will Make a new database here, which is Django image.

Okay?

We will have to configure this database here.

Let’s go to settings.py, what do we have to do for database configuration?

We have to search Django…sorry, MySQL settings for Django.

You will find this link over here.

Okay?

When you go a little bit down in this link, you will get to see MySQL settings from which you have to copy this portion and replace it here.

We will write our database name here.

Our username is root.

Password will be blank.

And our port number is 3306.

So our database is configured too.

So here, just as we added MySQL settings in settings.py, what do we have to do?

We have to install a MySQL client, so pip install -- only - binary: all mysql client.

So it got installed.

Now we have to migrate it.

We will migrate it & the migration is done.

We will go here & refresh it to check.

So all of the Django tables are here.

Right? Clear?

Okay?

Now what we have to do is, we have to make a model.

Okay?

So for making models, we have to do inside models.py.

Here, we will make a class…

We will keep a class name, suppose Image Data.

Right?

We made a class named Image Data, in which we passed models.models.

I had explained both of these things to you when I explained Django CRUD operation.

Those of you who don’t know, do watch the previous Django CRUD operation video, okay, then you’ll get a perfect idea.

Now we need 2 fields here.

Which one? One is Image Name, right.

We need an Image Name.

We will take the name in models.character field.

And we will put its max length around 50.

Right?

What do we need next? We need an Image for Image Upload.

For that, we will take an Image field.

Models.

Now which field do we need for Image upload?

Imagefield.

And in this Image Field, you have to give a path as to where your image should be uploaded.

How will you give?

Write upload_to and here, we have to make a folder named Image in which all of my images will be there.

So just as your image will be uploaded & stored, it will automatically make an IMG folder in this particular folder.

Okay? Right?

Clear?

Understood how the whole thing works?

Now we will do ‘make migration’ once.

Why?

Because we have made a new model so we will need to do ‘make migration’.

So we did ‘make migration’.

Just as you do ‘make migration’, I had told you there is an inbuilt library available.

Which library is it? Pillow library.

See, it has even suggested to me that I need to follow this particular command to install the Pillow library.

If you even do it directly, such as pip install pillow, then you can directly install the pillow as well.

But why do we need pillow?

We need pillow because an image has multiple extensions such as .png, .gif, .jpg and many other extensions.

That is why we need to install Pillow.

And Pillow helps to get those extensions which help for the certain image.

Okay?

So as you press Enter, it will install Pillow, right?

And after installing Pillow, you will fire the make migration command and your model will be created.

And what do we have to do after that?

We have to migrate it.

So for migrating, python manage.py migrate.

We migrated it so it would have come into our database.

Let’s check it once.

Refreshing it.

Our image data table has come where there is an ID, there is an image name and there is an image field.

Right? Clear?

Understood until now?

Now after this, what will we do?

We have to insert that form data in our image.

So how will you insert that form’s data?

It will be inserted as we normally insert in our database.

How?

Here in Views.py, we will make a new View.

I’ll write the View name Upload Image View, okay?

I made a View named Upload Image whose View I wrote Request.

Now what is the first thing that we have to check?

We have to check whether our form’s data is coming from Post method or not.

Okay?

We have to check if it is coming from Post method data or not.

So how will we check?

If request.method is == post.

Right? We have to check this only.

Without the Post method, your data should not be uploaded.

Okay?

Now, how many fields do we have in our form?

2 fields.

1st is image name & 2nd, Image File.

Okay?

We will take an image name variable, in which we will write request.post & write its name here.

Image name. What have we written here?

We have written imgname here so here too, we will be writing imgname only.

Okay?

And then, I took a pics variable & request.

What will come next? Post?

No guys. Post won’t come here.

You are getting a file uploaded, so here, instead of post, it will be files.

Whenever you are getting a file uploaded in Django, okay?

PDF file, Word file, Document file, image file or any other file, if you are getting that uploaded, you have to use request.files only.

You will not use request.post here.

Okay?

And here, that particular input’s name.

What did we give?

We have given Image so we will write image there.

Ok?

So what do we have to do now?

We have to upload so I’ll take a variable named new img.

Okay we have to upload a new image, right?

So first of all, we will have to bring models here.

So we will import models here.

Models import * okay?

And then our model name image data.objects.create.

Right? Clear?

And now, what do we have to do?

We have to create, which means we have to upload the data.

So image name. Our image name was this.

And = image name.

And then, image = pics.

Right?

And then, what do we have to do?

We have to return to render, we have to render it on the Show Page.

Which means that our new page should open up which is show.html.

Okay?

Here we made a new View here & now we will make its URL.

Let’s go to urls.py.

Path & here I gave a link named upload here.

And then gave a name views.image, sorry upload image, our View’s name, upload image, name image upload.

Okay?

Now we have to copy this name.

And where do we have to paste it?

In form’s Action.

We will paste it through %% url.

And as soon as it gets uploaded, where do we have to send it?

We have to send it to show page.

For that, we need to make a show page as well.

Show.html.

Right?

And here in the H1 tag, I’ll write show page here.

Okay? Clear?

Okay?

So that we can know that our image has been uploaded.

Okay?

Let’s run it.

We will run our server here.

Runserver. So our server is running.

Let’s go here.

We will refresh our form once.

Just as I get an image named image 1 uploaded, right?

So to upload an image, you’ll have to click on choose file.

I selected image 1, and Upload.

Okay.

So the error that we got, you might have seen this particular error for the first time.

Why did we get it?

I had kept a particular error in the form.

Why? Because I wanted to show you all this error.

Why did we get it?

Because we made a mistake, which is that we didn’t write our CSRF token.

You have to keep this one thing in mind that whenever you are working with form, you should compulsorily have your CSRF token.

Right?

If you don’t write a CSRF token, then this error will be shown.

And your data won’t ever get saved.

Okay? Right?

So how will we solve it?

We’ll go here, in index.html, in form, what do we have to write here?

CSRF token.

Okay?

You have to write CSRF token.

We will close it once & run it again.

Image 1. We selected image 1.

And then we uploaded so here we got the show page.

Now we will go to our database and check whether our image has been uploaded or not.

See guys, our image has been uploaded.

Right?

So this is how you can upload your image.

Right?

Clear?

So this is how you can upload image along with any other media files in the same way.

There are no other changes, you only have to follow the same steps to upload any other media files.

Okay?

Right?

So the image has been uploaded & now we have to show it.

Right?

If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

So when we meet in the next topic, we will learn about how to show on image browser.

Meet you in the next video.