Отправка параметра с помощью Dropzone 'ProcessQueue' - PullRequest
Новая
       6

Отправка параметра с помощью Dropzone 'ProcessQueue'

0 голосов
/ 25 июня 2018

Вот моя проблема.

В настоящее время я создаю приложение в Laravel и использую DropZone для загрузки изображения пользователем.Теперь на странице «Новый пользователь» у меня есть как пользовательские данные, так и Dropbox Dropbox, и они оба обрабатываются отдельно.

Сначала я собираюсь запустить метод «Создать пользователя», затем, есливсе в порядке, загрузите изображения.

Проблема заключается в том, что Dropzone не знает идентификатор нового пользователя, когда он готов к загрузке (поскольку ему необходимо назначить правильного пользователя в БД).

Мне как-то нужно иметь возможность передать новый идентификатор пользователя в метод dropQueue "processQueue", чтобы использовать новый идентификатор пользователя при загрузке изображения. Кто-нибудь знает, возможно ли это?

В идеальномworld Я мог бы передать новый идентификатор в функцию 'processQueue', например processQueue(newUserId), извлечь его и добавить в данные формы для отправки вместе с изображением.

Вот мой код

HTML 

<div id="user_profile" class="dropzone dropzone-box">
  <div class="dz-message needsclick">
     <h3>Select Image</h3>
     <hr>
     <p>Click here or drag and drop image</p>
  </div>
</div>

JS 

//Bind dropzone to user profile image
var userProfile = new Dropzone('#user_profile',{
    url: '/ajax/userProfileUpload',
    autoProcessQueue:false,
    maxFiles:1,
    addRemoveLinks:true,
    paramName: 'profile_pic', // The name that will be used to transfer the file
    init: function(){
        this.on("maxfilesexceeded", function(file) {
            userProfile.removeFile(file);
        });
        this.on("success", function(file, returnedData, myEvent) {
           console.log(returnedData);
        });     
    },
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
});

Отправьте запрос нового пользователя, когда закончите, отправьте изображения 

$.ajax({
    type: "POST",
    url: '/users',
    data: postData,
    success: function(data){
        userProfile.processQueue(/* pass user id from here */);
    },
    error: function(data){
        //Didnt work
    }
  });

1 Ответ

0 голосов
/ 26 июня 2018

Можно добавить пользовательский атрибут к объекту Dropzone, который содержит идентификатор, установить этот атрибут при успешном вызове ajax и затем получить доступ к нему в событии отправки, соответствующая часть будет: 

var userProfile = new Dropzone('#user_profile',{
    ...
    userId: '', // Attribute to hold the user id
    init: function(){

        let thisDropzone = this; // Closure
        ...
        this.on('sending', function(file, xhr, formData){
            formData.append('userId', thisDropzone.userId);
        });
    }
});

запрос AJAX: 

$.ajax({
    type: "POST",
    url: '/users',
    data: postData,
    success: function(data){
        userProfile.userId = 'yourId'; // set the id
        userProfile.processQueue(); // process queue
    },
    error: function(data){
        //Didnt work
    }
});
...