Modal Forms generate empty request.FILES


(João Miguel Nóbrega) #1

Dear All,

I’m just starting with django, and I’m working on a simple book database, in which I would like to include the book covers images.

To make it look better, I’m trying to use floating modal forms, with boostrap and django crispy forms. However, when I try to get the form data, both with create and update forms, the returned request.FILES variable is empty.

Just in case, I tried to create basic create and update forms (named create1 and update1) and everything works properly.

The image below illustrate the both working and non-working views.

In case it is useful, the full code of the project is available in: https://www.dropbox.com/s/0ms52s2re8n0lni/BookForm-SBC.zip?dl=0.

I believe it is a basic mistake, but I still didn’t manage to identify the solution anywhere?

Notice all the forms definition contain the info ‘enctype=“multipart/form-data”’, as recommended in many places.

Can anyone give me an advise on how to proceed?

Best wishes,

Miguel


(Shekhar Nunia) #2

Can you explain what’s this save_all because I’m seeing it first time. And I recommend you to watch Vitor video on file upload, in that you will going to get the complete idea of how you can achieve this and he also used the same book idea in that, so you can relate it easily


(João Miguel Nóbrega) #3

Hi Shekhar,

Thank you for you quick feedback and recommendations.

The “save_all” routine is used to process both new and edited records. But notice the problem occurs before running that routine, right after the form post on the places I identified.

I’ve seen Vitor’s videos/tutorials on file uploads. In fact it was there I learned how to create the basic forms, which are working properly. However, as I mentioned in the previous message, when I do it with modal forms (which I believe are not documented in Vitor’s tutorials) an empty request.FILES is returned, an, thus, ti doesn’t store the files nor add the respective file data. Something I didn’t mention in my initial post, is that the remaining data of the book record (title and number of pages) is stored properly in the database, with both approaches, just the files are not uploaded/stored.

Cheers,

Miguel


(Vitor Freitas) #4

Hi @mnobrega!

The Python and HTML seems to be okay, the problem seems to be on the JavaScript

The problem is that the first example you are submitting the form using Ajax, and the second one is working because it is just a regular form being posted by the browser.

One possible solution is to use FormData:

var formData = new FormData();

// Add all regular fields to the formData
$("form").serializeArray().forEach(function (element) {
    formData.append(element["name"], element["value"]);
});

// Append the file field to the formData
formData.append("cover", $("#id_cover")[0].files[0]);

$.ajax({
    url: '/books/create/',
    data: formData,

    // important settings:
    cache: false,
    contentType: false,
    processData: false,
    success: function (data) {
        // your success callback
    }
});

Note: Here I’m considering you field name is cover.

Some older browsers might not support FormData, so it depends on the target group of your app

For better compatibility I suggest using the jQuery File Upload, I have a tutorial on it:

Other possible solutions to your problem in this StackOverflow thread: https://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously/8758614#8758614


(João Miguel Nóbrega) #5

Dear Vitor,

Thank you very much for your time and recommendations. Unfortunately, I still didn’t have the time to test you suggestion, but I’ll give you the feedback as soon as I do it.

Bests,

Miguel