JQuery -File-Upload с использованием Signed_URL Google Storage, как вызвать функцию суперкласса data.submit () в ajax обратном вызове? - PullRequest
Новая
       39

JQuery -File-Upload с использованием Signed_URL Google Storage, как вызвать функцию суперкласса data.submit () в ajax обратном вызове?

1 голос
/ 03 апреля 2020

У меня есть элемент fileupload HTML в моем DOM, и в настоящее время он получает несколько файлов и вызывает функцию «add» для каждого файла. Для каждого файла подписанный URL-адрес получен из ajax вызова соответствующего API. После успешного ajax вызова api я хочу вызвать метод data.submit () родительской функции, которая является функцией в методе fileupload в качестве первого аргумента.

Как я могу получить доступ к этому сразу после "xhr.setRequestHeader ('Content-Type', file.type);" ?

Основное вдохновение исходит от этой ссылки: http://kevindhawkins.com/blog/django-javascript-uploading-to-google-cloud-storage/

$("#fileupload").fileupload({
dataType: 'json',
sequentialUploads: true,

add: function(e, data) {
    $.each(data.files, function(index, file) {
        // pack our data to get signature url
        var formData = new FormData();
        formData.append('filename', file.name);
        formData.append('type', file.type);
        formData.append('size', file.size);

        // Step 3: get our signature URL
        $.ajax({
            url:  '/api/getsignedurl/',
            type: 'POST',
            processData: false,
            contentType: false,
            dataType: 'json',
            headers: {
                'X-CSRFToken': Cookies.get('csrftoken'),
            },
            context: 'hello',
            data: formData,
        }).done(function (data) {
            // Step 5: got our url, push to GCS
            const xhr = new XMLHttpRequest();
            if ('withCredentials' in xhr) {
                xhr.open("PUT", data.signed_url, true);
            }
            else if (typeof XDomainRequest !== 'undefined') {
                xhr = new XDomainRequest();
                xhr.open("PUT", data.signed_url);
            }
            else {
                xhr = null;
            }

            xhr.onload = () => {
                const status = xhr.status;
                if (status === 200) {
                    //alert("File is uploaded");
                } else {
                }
            };

            xhr.onerror = () => {
            };

            xhr.setRequestHeader('Content-Type', file.type);
            //data.submit();

        });
    });
},

1 Ответ

0 голосов
/ 04 апреля 2020

Если $ this = $ (this) определено до $ .each l oop: 

submit: function(e, data) {
    var $this = $(this);
    $.each(data.files, function(index, file) { ...

Тогда для доступа к данным в родительской функции можно использовать следующее 

    this.primary_data.headers={'Content-Type': file.type};
    this.primary_data.jqXHR = $this.fileupload('send', this.primary_data);
...