javascript - Sending Parameter with Dropzone 'ProcessQueue' event - Stack Overflow

admin管理员组

文章数量:1400424

Heres my issue.

I'm currently building an application in Laravel and using DropZone for a user upload image. Now on a 'new user' page, I have both the user details and a dropzone dropbox, and these are both being processed separately.

I'm going to run the 'create user' method first, then if that goes ok, upload the images.

The issue es with Dropzone not knowing the new user Id when its ready to upload (as it needs to assign to the correct user in the DB).

I somehow need to be able to pass the new user Id back to the dropzone 'processQueue' method, to use the new user id in the image upload, does anyone know if this is possible?

In a perfect world I would be able to pass the new id into the 'processQueue' function like processQueue(newUserId) and fetch it and add it into the form data to send with the image.

Here is my code so far

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')
    },
});

Send new user request, when done, send images

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

Heres my issue.

I'm currently building an application in Laravel and using DropZone for a user upload image. Now on a 'new user' page, I have both the user details and a dropzone dropbox, and these are both being processed separately.

I'm going to run the 'create user' method first, then if that goes ok, upload the images.

The issue es with Dropzone not knowing the new user Id when its ready to upload (as it needs to assign to the correct user in the DB).

I somehow need to be able to pass the new user Id back to the dropzone 'processQueue' method, to use the new user id in the image upload, does anyone know if this is possible?

In a perfect world I would be able to pass the new id into the 'processQueue' function like processQueue(newUserId) and fetch it and add it into the form data to send with the image.

Here is my code so far

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')
    },
});

Send new user request, when done, send images

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

• javascript
• php
• laravel
• dropzone.js

Share Improve this question Follow edited Jun 25, 2018 at 20:35 Aram Grigoryan 73411 gold badge66 silver badges2424 bronze badges asked Jun 25, 2018 at 20:33 S_RS_R 1,99855 gold badges3333 silver badges6969 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

An option can be to add a custom attribute to the Dropzone object that holds the id, set this attribute when the ajax call succeeds and then access it on the sending event, the relevant part would be:

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 request:

$.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
    }
});

本文标签： javascriptSending Parameter with Dropzone 39ProcessQueue39 eventStack Overflow