It is possible for Django to upload file without FORMS?

Question

I'm currently working with a custom HTML template not using forms on my Django app to upload an image in a specific path.

app structure

src/
    media/
        app/
            img/
    app_name/
        templates/
            app_name/
                app_template.html
        __init__.py
        admin.py
        apps.py
        models.py
        tests.py
        urls.py
        views.py
    proj_name/
        __init__.py
        settings.py
        urls.py
        wsgi.py
    manage.py

settings.py

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

models.py

class Document(models.Model):
    doc_file = models.FileField(upload_to='app/img')

views.py

def app_save(request):
    if request.method == 'POST':
        newdoc = Document(doc_file=request.FILES.get('myfile'))
        newdoc.save()

app_template.html

<form id="myform" method="POST" action="{% url 'my_app:save' %}" 
      enctype="multipart/form-data">

    <input type="file" name="myfile">
    <input type="submit"> 
</form>

#Result After submitting the form I dont have any internal server error and no python traceback. But there was no image uploaded in the app/img path and in my database, I have a blank record inserted because of newdoc.save() query.

It is possible to work with file managing without forms?

#UPDATE

i added this on forms.py

class UploadFileForm(forms.Form):
    file = forms.FileField()

and updated my app_template.html to:

<form id="myform" method="POST" action="{% url 'my_app:save' %}" 
      enctype="multipart/form-data">

    {{ form.file }}
    <input type="submit"> 
</form>

then i would like to include the function of loading the app_template.html in views.py:

def index(request):
    form = UploadFileForm()
    return render(request, 'app_name/app_template.html', { 'form': form })

And also updated the app_save() function to:

 def app_save(request):
    form = UploadFileForm(request.POST, request.FILES)
    if request.method == 'POST':
        if form.is_valid():
            newdoc = Document(doc_file=request.FILES.get('file')) # note 'file' is the name of input file of a form.
            newdoc.save()

The problem now is

There is no error found in the application but there is no media/app/img path create with the uploaded image file. What went wrong? I think I missed something here.

oh yes sir it is `media/app/img`, i updated the app structure — Shift 'n Tab, Sep 08 '16 at 08:07
`upload_to` is always relative to `MEDIA_ROOT`. At least if you use `FileSystemStorage`. — Sergey Gornostaev, Sep 08 '16 at 08:13
Important clarification: don't you use javascript handler on form submit? — Sergey Gornostaev, Sep 09 '16 at 05:45
@SergeyGornostaev oh i used jquery `onsubmit` sir and pass the data to the server using `$.ajax` — Shift 'n Tab, Sep 09 '16 at 05:54
You can't upload files with `jQuery.ajax()`. Use [FormData](https://developer.mozilla.org/en/docs/Web/API/FormData). — Sergey Gornostaev, Sep 09 '16 at 06:15
I also found out that the form returns is not valid, thanks for pointing out i will return here if ill have any issue — Shift 'n Tab, Sep 09 '16 at 06:19

Sergey Gornostaev · Answer 1 · 2016-09-09T06:23:34.867

1

Your backend code is fine. The problem is with a frontend. You can't submit file input with jQuery.ajax like other fields. Use FormData:

$('#myform').submit(function(event) {
    if(window.FormData !== undefined) {
        event.preventDefault();

        var formData = new FormData(this);
        var xhr = new XMLHttpRequest();
        xhr.open('POST', $(this).attr('action'), true);
        xhr.setRequestHeader('X-REQUESTED-WITH', 'XMLHttpRequest')            
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4) {
                if(xhr.status == 200) {
                    result = JSON.parse(xhr.responseText);
                    // Code for success upload
                }
                else {
                    // Code for error
                }
            }
        };
        xhr.send(formData);
    }
});

edited Sep 09 '16 at 06:23

answered Sep 08 '16 at 07:54

Sergey Gornostaev

7,596
3
27
39

Thank you for helping but in your answer i got this error `AttributeError: 'NoneType' object has no attribute 'read'` which is pointing out to `file_data = uploaded_file.read()`. my django version is 1.10 – Shift 'n Tab Sep 08 '16 at 10:14
It means that `request.FILES.get('myfile')` returns `None`. – Sergey Gornostaev Sep 08 '16 at 10:18
but im sure it has value. – Shift 'n Tab Sep 08 '16 at 12:45
What is the output of `print request.FILES.keys()`? – Sergey Gornostaev Sep 08 '16 at 15:10
it print `dict_keys([])` maybe that is why its return none, but i already included `enctype="multipart/form-data"` on the form – Shift 'n Tab Sep 09 '16 at 05:34
What is the output of `form.cleaned_data['file']` after call `form.is_valid()`? – Sergey Gornostaev Sep 09 '16 at 05:39

score 0 · Answer 2 · answered Sep 08 '16 at 08:12

0

I don't understand why you don't want to use a modelform; it'll make things a lot easier.

However, if you really do want to do it without one, you'll need to take care of the actual uploading yourself. The documentation has a good example of what you'll need to do; basically you just take the file from request.FILES and save it to the location you want.

answered Sep 08 '16 at 08:12

Daniel Roseman

588,541
66
880
895

i updated my post sir but it doesn't seems to work. i think i missed something – Shift 'n Tab Sep 08 '16 at 09:58
Yes, you did. Either use a ModelForm, which takes care of saving, or write a function to handle the uploading, as I stated. – Daniel Roseman Sep 08 '16 at 10:18
I use a Form and a Model with FileField i found in your link – Shift 'n Tab Sep 08 '16 at 10:22
7

Why is this answer accept? It's not a solution and not an answer to the question "It is possible for Django to upload file without FORMS?" – Sergey Gornostaev Sep 17 '16 at 11:40

score 0 · Answer 3 · answered Mar 31 '20 at 09:08

There is ContentFile in django.core.files and it's so handy to use it to save your file as your model field. Suppose that you declared a field as FileField and you may need to create a file and save it attached to the field. Then you can do this as following.

from django.core.files.base import ContentFile
from django.db import models

class YourModel(models.Model):
    content = models.FileField(upload_to="any_path_or_callable")
    ...
    def save_file(self, content: str):
        temp_file = ContentFile(content)
        self.content.save(f'{self.pk}.txt', temp_file)

I hope this would help you.

Thank you

It is possible for Django to upload file without FORMS?

3 Answers3

Linked