Additional form fields with file upload

[jaivikram]

Hi

Thanks for writing this example with Django. It works out of the box, but how would you change the code if you need to add a 'description' field for each file that you upload.

I have changed the upload-template in the upload_tags.py file to render the additional text field named 'description':

        <tr class="template-upload{{if error}} ui-state-error{{/if}}">                    
            <!-- <td class="name">${name}</td> -->                                        
            <!-- <td class="size">${sizef}</td> -->                                       
            <td class="preview"></td>                                                     
            {{if error}}                                                                  
                <td class="error" colspan="2">Error:                                      
                    {{if error === 'maxFileSize'}}File is too big                         
                    {{else error === 'minFileSize'}}File is too small                     
                    {{else error === 'acceptFileTypes'}}Filetype not allowed              
                    {{else error === 'maxNumberOfFiles'}}Max number of files exceeded     
                    {{else}}${error}                                                      
                    {{/if}}                                                               
                </td>                                                                     
            {{else}}                                                                      
                <!-- <td class="progress"><div></div></td> -->                            
                <td class="start" style="display:none;" ><button>Start</button></td>      
                <td class="file_upload_desc"><input type="text" name="description"/></td>\

                <td class=""><select name="photo_type"><option>restaurant</option></selec\
t></td>                                                                                   
            {{/if}}                                                                       
            <td class="cancel"><button>Cancel</button></td>                               
        </tr>                                                                             

The field renders correctly with each file row but the POST data that reaches the server never contains the additional field.

I read the jquery-file-upload docs and found out about formData but could not figure out how to initialize it with different data for each row (file).

Any help will be appreciated.

Jai

[sigurdga]

Sorry I could not help you, and sorry for this very late response.

I have already tried to migrate my code over to mootools, to a non-finished library by a friend of mine, but that part is not finished yet. So my interest in extending or actively maintaining this module has fallen quite a bit.

[goog]

@jaivikram Hi,pal! I have the same problem , Any guidance would be greatly appreciated!

[jaivikram]

@goog this is what you need to do. Specifically the code in 'fileuploadsend'

   $('#fileupload').fileupload()
        .bind('fileuploadsend', function (e, data) {
                /* required info begins */
                var desc = data.context.find("input[name=desc]").val();
                var main_photo = data.context.find("input[name=main_photo]").is(':checked');

                //csrf handling is not needed - assuming that jquery ajax is setup with csrf handling.

                if(data.data) { //chrome, ff
                    data.data.append("desc", desc);
                    data.data.append("main_photo", main_photo);
                } else { //ie
                    //ie needs separate csrf handling
                    csrfmiddlewaretoken = $("input[name=csrfmiddlewaretoken]").val();

                    data.formData = [{desc:desc, name:"desc", value:desc},
                                     {csrfmiddlewaretoken:csrfmiddlewaretoken,
                                      name: "csrfmiddlewaretoken", value: csrfmiddlewaretoken},
                                     {main_photo:main_photo, name:"main_photo", 
                                      value:main_photo},
                                     ];
                }
                /* required info ends */
            })
        .bind('fileuploaddone', function (e, data) {
                //executed on upload finish of each photo
                if(data.result[0].points_added) { 
                    points_added += data.result[0].points_added; 
                }

            })
        .bind('fileuploadalways', function (e, data) {
                 //executed when upload is completed, whether successfully or unsuccessfully.
                //available vars are
                // data.result
                // data.textStatus;
                // data.jqXHR;
            })
        .bind('fileuploadstop', function (e) {
                 //executed when upload is completed successfully 
            })
        .bind('fileuploadfail', function (e, data) {
                //if file upload fails
                //alert(data.errorThrown);
            })
        .bind('fileuploadadd', function (e, data) {
               // when a file is added/dragged/selected to the uploader 
            });

[goog]

thanks very much !!! the result is here, desc[-1] is the current file description , good

[sigurdga]

Great to see that you two sorted this out by yourself. I haven't used this jquery-file-upload for quite some time myself.

[chriscamplin]

@jaivikram Hi, I know this was a long time ago but i am getting INTERNAL SERVER ERROR on file upload every time i add new input fields to the form with the name 'desc'.

model:
file = models.ImageField(upload_to="pictures")
slug = models.SlugField(max_length=50, blank=True)
desc = models.CharField(max_length=100)

View:
data = [{'desc': f.desc, 'url': settings.MEDIA_URL + "pictures/" + f.name.replace(" ", ""), 'thumbnail_url': settings.MEDIA_URL + "pictures/" + f.name.replace(" ", ""), 'delete_url': reverse('upload-delete', args=[self.object.id]), 'delete_type': "DELETE"}]

JS:

  $('#fileupload').fileupload()
    .bind('fileuploadsend', function (e, data) {
            /* required info begins */
            var desc = data.context.find("input[name=desc]").val();
            var main_photo = data.context.find("input[name=main_photo]").is(':checked');

            //csrf handling is not needed - assuming that jquery ajax is setup with csrf handling.

            if(data.data) { //chrome, ff
                data.data.append("desc", desc);
                data.data.append("main_photo", main_photo);
            } else { //ie
                //ie needs separate csrf handling
                csrfmiddlewaretoken = $("input[name=csrfmiddlewaretoken]").val();

                data.formData = [{desc:desc, name:"desc", value:desc},
                                 {csrfmiddlewaretoken:csrfmiddlewaretoken,
                                  name: "csrfmiddlewaretoken", value: csrfmiddlewaretoken},
                                 {main_photo:main_photo, name:"main_photo", 
                                  value:main_photo},
                                 ];
            }
            /* required info ends */
        })

If you have any idea why it's returning INTERNAL SERVER ERROR even though uploads are working,please let me know.

Thanks!