CODEWITHSUNDEEP
javascriptjquerydropzone.js
2mas
2mas

Reputation: 127

Multiple upload with Dropzone and inividual input fields

Created a form which upload multiple files without problems. Trying now to in corporate input fields to each file before uploaded. I've followed an example from Dropzone which does this without a <form>. Now i struggle to pass the <input> field along with the image to the upload-url.

Below is a snippet of my code.

HTML

<div>
    <span class="btn btn-danger btn-block fileinput-button"><span class="fa fa-ticket"></span> Add cards</span>
    <span class="fileupload-process">
        <div id="total-progress" class="progress progress-small active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
            <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
        </div>
    </span>
</div>

<div class="files" id="previews">
    <div id="template" class="file-row">
        <div class="file-cell">
            <span class="preview"><img data-dz-thumbnail /></span>
            <div class="progress progress-small active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
            </div>
        </div>
        <div class="file-cell">
            <p class="name" data-dz-name></p>
            <button class="start"><span>Start</span></button>
            <button data-dz-remove class="cancel"><span>Cancel</span></button>
            <button data-dz-remove class="delete"><span>Clear</span></button>
            <div>
                <input type="text" class="form-control cardInput cardName" placeholder="Card name" name="cardName" />
            </div>
        </div>
    </div>
</div>

JS

var previewNode = document.querySelector( '#template' );
previewNode.id = '';
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild( previewNode );

var myDropzone = new Dropzone( document.body, {
    url: 'scripts/cardnew.php',
    thumbnailWidth: 150,
    thumbnailHeight: 204,
    parallelUploads: 20,
    previewTemplate: previewTemplate,
    autoQueue: false,
    previewsContainer: '#previews',
    clickable: '.fileinput-button',
    addRemoveLinks: false
} );

myDropzone.on( 'addedfile', function( file ) {
    file.previewElement.querySelector( '.start' ).onclick = function() { myDropzone.enqueueFile( file ); };
} );
myDropzone.on( 'totaluploadprogress', function( progress ) {
    document.querySelector( '#total-progress .progress-bar' ).style.width = progress + '%';
} );
myDropzone.on( 'sending', function( file ) {
    document.querySelector( '#total-progress' ).style.opacity = '1';
    file.previewElement.querySelector( '.start' ).setAttribute( 'disabled', 'disabled' );
} );
myDropzone.on( 'queuecomplete', function( progress ) {
    document.querySelector( '#total-progress' ).style.opacity = '0';
} );

Upvotes: 1

Views: 3700

Answers (1)

Tom Catullo
Tom Catullo

Reputation: 329

Dropzone.js's website suggests that you can submit any data in addition to the file by registering for the sending event and using a callback function with three parameters: file, xhr, and formData. Inside this callback function, you may then append additional custom fields to the formData to be submitted as POST data along with the file. Note that this implementation will require you to use an HTML <form>.

In your case, since you're trying to send a separate input field with each image when a button is clicked, you can achieve this by appending a new input field to the file container div on your page each time the addfile event is triggered, assigning each input field an id of myinput_<filename>, where <filename> is the name of the file with which the newly-appended input field is associated. Then, when the user clicks the button to upload all of the files at once, you can insert into the callback function for your sending listener a line to add the associated file's input field value into the formData like this:

formData.append("somefield", document.getElementById("myinput_" + file.name));

Since the Dropzone.js documentation for sending says that the event is triggered before each file is sent, then each file will be processed individually in this way.

Ultimately, your solution could have a snippet that looks something like this:

myDropzone.on("addedfile", function(file) {
    document.getElementById("#file_container_div").innerHTML += '<input type="text" id="myinput_' + file.name + '" value="">';
    // Your other code goes here...
});

myDropzone.on("sending", function(file, xhr, formData) {
    formData.append("somefield", document.getElementById("myinput_" + file.name));
    // Your other code goes here...
});

Of course, the solution you ultimately choose to implement will need to be customized a bit to fit your needs, but this should be enough to express the concept.

Upvotes: 2

Related Questions