how to add value to data-form-data and multiple using jquery?

Question

I use Django and JQuery. Now I try to set up a form multi file input inside a bootstrap modal form using JQuery, but i struggle with data-form-data and multiple probs. I have checked every question but still I cannot find a solution.

$('<input>').attr({
                        type: 'file',
                        id:   'fileupload',
                        name: 'image',
                        class:'galler',
                        multiple,
                        style: "display: none;",
                        data-form-data: '{
                            "csrfmiddlewaretoken":"{{csrf_token}}",
                            "gallery_id", response.gallery_id
                        }'

                    }).appendTo('form#album-create-form');

This is my solution but I get an error message

(index):2713 Uncaught SyntaxError: Unexpected token '-'

Can you guide me with correct usage?

ps: all the view and ajax code

class BasicUploadView(View):

def post(self, request, *args, **kwargs):

    title = request.POST.get('title')
    gallery_form = GalleryModelForm( data=request.POST
    if gallery_form.is_valid():
        title = request.POST.get('title')
        galleryextended = GalleryExtended.objects.create(title=title, slug=gallery.slug, user_id=request.user.id)
        galleryextended.save()
        data = {'is_valid': True, 'title': galleryextended.title, 'gallery_id': galleryextended.id}
    else:
        data = {'is_valid': False}
    return JsonResponse(data)

$.ajax({
            type: 'POST',
            url: "{% url 'galleries:basic_upload' %}",
            data: 
                {
                    title: $('#galleryTitle').val(),
                    csrfToken: $('input[name=csrfmiddlewaretoken]').val(),
                },

            success: function (response) {
                console.log(response);
                $("#create-photo-album").modal('hide');
                openModal(response);

                function openModal(product_data){
                  let id = response.gallery_id;

                  $('<input>').attr({
                        type: 'file',
                        id:    'fileupload',
                        name: 'image',
                        class: 'galler',
                        multiple: 'multiple',
                        style: "display: none;",
                        'data-form-data': '{ "csrfmiddlewaretoken":"{{csrf_token}}","gallery_id": id }'

                    }).appendTo('form#album-create-form');


                  $("#update-photo-album").modal('show');
                };


            },
            error: function (response) {
                // alert the error if any error occured
                alert(response["responseJSON"]["error"]);
            }
    });

Rory McCrossan · Accepted Answer · 2020-03-23 19:21:02Z

1

Theres a few issues here.

The multiple property needs a value.
Hyphens (-) in the data attribute are not valid syntax in JS, you need to wrap the value which contains them in quotes.
class is a reserved keyword so it too needs to be in quotes.
The comma (,) after gallery_id in the data attribute JSON value needs to be a :.
The line breaks in the data attribute value are invalid given the string literal you're using. If you want to keep the line breaks in a string, use a template literal
The response.gallery_id value needs to be concatenated to the JSON you put in to the data attribute

With that said, try this:

$('<input>').attr({
  'type': 'file',
  'id': 'fileupload',
  'name': 'image',
  'class': 'galler',
  'multiple': 'multiple',
  'data-form-data': `{
    "csrfmiddlewaretoken": "{{csrf_token}}",
    "gallery_id": ${response.gallery_id}
  }`
}).hide().appendTo('form#album-create-form');

edited Mar 23, 2020 at 19:21

answered Mar 23, 2020 at 18:28

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

ytsejam Over a year ago

ok perfect, but gallery_id response.gallery_id value is not set now, how do I use the value of gallery_id? thanks for quick answer.

Rory McCrossan Over a year ago

I just edited with an update to that, you need to use : there not ,

ytsejam Over a year ago

yes i used :, but still it looks as "id" as a text. not the number

Rory McCrossan Over a year ago

I don't know what that's supposed to mean as you've given no indication of what the value of response.gallery_id actually is, nor how you intend to use it. All I can do is answer the question you posed, which is what this does.

ytsejam Over a year ago

ok I have added the json response and ajax I am using, If you have any idea how to place the value of gallery_id, can you take a look ?

|

Collectives™ on Stack Overflow

how to add value to data-form-data and multiple using jquery?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related