Django Tutorial for Beginners - 33 - Upload Files Video Lecture - Django

already houses welcome back and in this
video I am going to show you guys how to
handle file uploads so what I want to do
is instead of making the user go through
the entire Internet and find the proper
album logo cover picture and then copy
the URL and paste it in what I want to
do is I just want to have them click a
button browser computer for the image
and upload it to our server pretty much
how you add any image to a website like
you're just like uploading a picture to
Facebook or whatever so before you get
started what I want you guys to do is go
in your admin panel and delete all of
your albums and also all your songs and
the reason for that is because we're
actually going to change the entire
structure of our database so we're only
going to be making a minor change but if
all the old albums have this and all the
new ones have a file field then it's
going to be confusing so just go ahead
and delete all your albums and you'll be
good so after that instead of this field
being a character field which
essentially just means text what you
need to make it is a file field pretty
cool
so now that we actually change the
structure of our database we need to pop
open terminal and you remember the two
commands that you use that's Python
manage that py make migrations music and
Python manage that py migrate there you
go now I actually have these changes
already but if you don't then go ahead
and make them in restart your server and
the reason that I have those already is
because I was actually filming this
tutorial and then I noticed that I don't
know for like the last two months a
bunch of water has been coming through
my basement and I didn't really think
anything of it because the snows kind of
melting in my ground is always damp
around here so I'm like whatever but
it's been really annoying me the sound
in the background so I walked outside
and I saw that the water spigot was on
my outside spigot so water has just been
running outside onto the ground for the
last two months so yeah can't wait to
get my water bill that should be fun all
right where was I go ahead and restart
your server
or you just did that and now actually if
you go to admin and go to L bones and
just click Add album you can see that
you now have a choose file button
instead of the just these inputs right
here so that is proper pop open our code
again art so before we can just add this
form to a web page so the user can
upload files we need to specify a couple
things most importantly whenever the
user uploads an image where the heck are
we going to store it so where do we
specify that well in your music or
excuse me
website directory go ahead and click
settings and scroll all the way to the
bottom right here now we actually need
to add two global variables
the first one is media root and what
this is is just the file path of the
directory that we're going to pull all
of the files in so this is actually OS
dot path dot join and we actually want
to join this base directory right here
and this just resembles whatever
directory this is so we're going to take
that and we're going to join it with
another one called media now the last
one that you need to write is basically
this but instead of static URL you just
name a media URL and of course instead
of static URI media right there so
essentially whenever the user uploads an
image is going to create a new directory
and it's going to name it media and
you're essentially going to have three
files or three directories website music
in media and all of their files are
going to go in media and if you guys are
wondering Ari why do you need both of
these well this one is the actual
directory on your computer that's going
to store those files and this one
actually references the relative URL and
this is what your browser's use for
accessing the files over HTTP so this is
just for kind of your server and this is
for users in the browsers so after this
what we need to do is we need to hop
over
to website URLs again this isn't music
URLs its website URLs and we need to do
a couple things
the first thing we need to do is
specifically import these settings
because we tweaked some things on it so
I'll just say from jingo com import
settings and also from Django tough
Eurostat ik1 import static alright so
what we're basically saying is hey
whenever we're just testing this out go
ahead and just use this URL to store all
the files in now what I'm going to do is
I'm actually going to make an if
statement and write settings
dot debug in debug mode whenever this is
true it pretty much means development
mode so if you look at your settings
let me look all right so it says re
right now you are making this program in
debug mode this is good that helps us
find all the bugs and whatnot but
whenever we actually put this on the
live server we actually want to change
this to false which means production
mode and not developer mode so whenever
your website is in actual production
mode you probably don't want to store
all the images in the same directory
right here whenever your websites really
big you actually store all of your media
on another server or somewhere else on
your own server but anyways what is
saying alright whenever we're just in
developer mode just go ahead and use the
URL we just told you to so in order to
do that we're actually just going to
append the items right here because if
we just stuck them in there they're
going to be there all the time
so plus equals static and again those
are settings and I'll do the static URL
first so static URL documents why are
you popping up document root equals
Settings static URL and now we can just
do the same thing for that immediate URL
static media URL all right so again this
just pretty much says all right whenever
we're in developer mode just use these
and we can change it later in production
but there you go
so from here we have one tiny tiny tiny
change that we have to make let me close
out all these alright so that is what
one do I want to first I will hop over
to our home page and let me look at
where the album logo is so basically
wherever you had your picture before and
mine was just right here right now this
isn't just a piece of text anymore it's
actually an image object since remember
those character fields we pop this open
so basically character fields are just a
little bit of text but right now we are
referencing the image object so we
actually don't want to do that because
that's the actual like byte data itself
what we want to do is we want to take
that image object and we actually want
to refer to its URL this is going to
give us the file path of wherever that
image is stored so now we can use that
file path in because of course your
image source needs to be a file path and
not just a bunch of byte data and where
else did we have that album logo on the
details page so left right I think it
wasn't left all right right here again
this is just the URL of the file
wherever it is stored on your server so
that's all you need to do so now
whenever you refresh add album checked
out I can just name the artist uh
baloney I am pretty sure that is not how
you spell baloney but whatever and the
album title is cheese sandwiches
and you have to spell it just like that
or it's not going to work in the genre
is will just say rap this is of course a
rap album and let me just pick a photo
so how about this one
food boom roasted so now I'm going to
submit that and we are getting a bad
file path in I actually already know
what I did or wrong so on website in the
URL is this actually needs to be yep
route reference the wrong thing I am so
embarrassed so hopefully now whenever
you're refresh alright so check that out
so there you go and of course this works
in if you want to verify hop over to
your main page and let me zoom out so
you guys can see alright so there you go
so that is how you let users upload
files and one other thing I want to
point out look how it generated this
media directory right here so all of
your user uploaded files are going to go
right in
there look how beautiful those
cheeseburgers are oh man getting kind of
hungry now so again pretty simple just a
few files to change and boom broasted
users can now upload files