File Upload in Django 1.8 (Part - 1)


In this tutorial we are going to build an application in which a user can upload file.

First create a project named file2local
Then create an application named resume within the project file2local

In my sample project the final directory structure looks like:

 
file2local
|-- db.sqlite3
|
|-- file2local
| |-- __init__.py
| |-- settings.py
| |-- urls.py
| `-- wsgi.py
|
|-- manage.py
|-- ownerpics
`-- resume
|-- admin.py
|-- forms.py
|-- __init__.py
|-- migrations
|-- models.py
|-- templates
| `-- upload_resume.html
|-- tests.py
`-- views.py


Now in file2local/resume/models.py write:

---------------------------------code---------------------------------------------------

from django.db import models

class Resume(models.Model):
    owner_name=models.CharField(max_length=40)
    owner_pic=models.ImageField(upload_to='ownerpics')



---------------------------------/code---------------------------------------------------

  
The 'ownerpics' is the directory where the uploaded files will be saved. If the directory does not exist, it gets automatically created in the project directory (see the directory structure above).

In file2local/resume/forms.py write: 

---------------------------------code---------------------------------------------------

from django import forms
from django.db import models
from .models import Resume


class ResumeForm(forms.ModelForm):
    class Meta:
        model=Resume
        fields='__all__'


---------------------------------/code---------------------------------------------------

In file2local/resume/views.py write: 

---------------------------------code---------------------------------------------------

from django.shortcuts import render
from .forms import ResumeForm
from django.http import HttpResponse, HttpResponseRedirect


def upload_resume(request):
    if request.method == 'POST':
        form = ResumeForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
            return HttpResponseRedirect('/upload')
    else:
        form = ResumeForm()
    return render(request, 'upload_resume.html', {'form':form}) 


---------------------------------/code--------------------------------------------------- 

In file2local/resume/templates/upload_resume.html write:

---------------------------------code---------------------------------------------------

<form method="post" action="" enctype="multipart/form-data">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="SUBMIT" name="formSubmit"/>
</form>


---------------------------------/code--------------------------------------------------- 

  In file2local/file2local/urls.py write:

 ---------------------------------code---------------------------------------------------

from django.conf.urls import include, url
from django.contrib import admin


urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
    url(r'^upload/$','resume.views.upload_resume', name='upload_resume'),
]

---------------------------------/code--------------------------------------------------- 

Now apply migrations and run the application. Don't forget to add 'resume' to INSTALLED_APPS in settings.py
 
If everything goes well you will see the upload form:


Fill up the form and submit:

 
On successful submission of the form, a row gets inserted into the database table and the uploaded image is saved in the 'ownerpics' directory.
 
 
Now, here comes an interesting part. Just repeat the above upload process with the same image file. On successful submission, the same image is again saved to the 'ownerpics' directory. But note one thing, Django automatically renames the file for you (obviously because you can't keep more than one file with the same name and extension in a directory).

In the table you have,

 
 
In the 'ownerpics' directory you have,

|-- ownerpics
|-- django.jpeg
`-- django_OtPgJZe.jpeg

So, we have just completed a simple file upload example in Django 1.8

No comments:

Post a Comment

document.write() overwrites the entire page

document.write is a function which basically outputs whatever is given to it. But sometimes, improper usage may overwrite the entire page d...