как добавить значение к data-form-data и использовать несколько jquery?

Question

Я использую Django и JQuery. Теперь я пытаюсь настроить многофайловый ввод формы внутри bootstrap modal form, используя JQuery, но я борюсь с data-form-data и multiple probs. Я проверил каждый вопрос, но все еще не могу найти решение.

$('<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');

Это мое решение, но я получаю сообщение об ошибке

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

Можете ли вы указать мне правильное использование?

пс: все представление и ajax код

класс BasicUploadView (представление):

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"]);
            }
    });

Answer 1

Здесь есть несколько вопросов.

• Свойству multiple необходимо значение.
• Дефисы (-) в атрибуте данных не являются допустимым синтаксисом в JS, вам нужно заключить значение, которое содержит их в кавычки.
• class - зарезервированное ключевое слово, поэтому оно также должно быть в кавычках.
• Запятая (,) после gallery_id в атрибуте данных JSON значение должно быть :.
• Разрывы строк в значении атрибута данных недопустимы, учитывая строковый литерал, который вы используете. Если вы хотите сохранить разрывы строк в строке, используйте литерал шаблона
• . Значение response.gallery_id необходимо объединить с JSON, который вы вставили в атрибут данных

С учетом сказанного попробуйте следующее:

$('<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');