javascript - Adding form fields to each file in Dropzone.js - Stack Overflow

admin管理员组

文章数量:1025616

I have been trying to get this to work for almost a week now. Finally I will ask for help. I am sure I am missing something simple.

I am using DropZone.js to allow upload of pictures to the web server. I need to add a textbox to each upload so that the user can enter additional information or "tags" to the images so that they can later be filtered by these tags. I can get an input to display with each image that is added but when I am trying to read the values in those textboxes during the "sending" event, all I ever get is the value of the first textbox. So if they are uploading 5 images, all of them will e through with the "tags" that were entered in the first textbox.

I appreciate any help that you can offer.

<div class="table table-striped" class="files" id="previews">
    <div id="template" class="file-row">
        <!-- This is used as the file preview template -->
        <div>
            <span class="preview">
                <img data-dz-thumbnail /></span>
        </div>
        <div>
            <p class="name" data-dz-name></p>
            <strong class="error text-danger" data-dz-errormessage></strong>
        </div>
        <div>
            <p class="tags" data-dz-tags></p>
            <input type="text" id="tags" name="tags" />
        </div>
        <div>
            <p class="size" data-dz-size></p>
            <div class="progress progress-striped 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>
            <button class="btn btn-primary start">
                <i class="glyphicon glyphicon-upload"></i>
                <span>Start</span>
            </button>
            <button data-dz-remove class="btn btn-warning cancel">
                <i class="glyphicon glyphicon-ban-circle"></i>
                <span>Cancel</span>
            </button>
            <button data-dz-remove class="btn btn-danger delete">
                <i class="glyphicon glyphicon-trash"></i>
                <span>Delete</span>
            </button>
        </div>
    </div>

</div>

And the javascript:

    <script>
    // Get the template HTML and remove it from the doument
    var previewNode = document.querySelector("#template");
    previewNode.id = "";
    var previewTemplate = previewNode.parentNode.innerHTML;
    previewNode.parentNode.removeChild(previewNode);

    var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
        url: "project.aspx", // Set the url
        thumbnailWidth: 80,
        thumbnailHeight: 80,
        parallelUploads: 20,
        previewTemplate: previewTemplate,
        autoQueue: false, // Make sure the files aren't queued until manually added
        previewsContainer: "#previews", // Define the container to display the previews
        clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
    });

    myDropzone.on("addedfile", function (file) {
        // Hookup the start button
        file.previewElement.querySelector(".start").onclick = function () { myDropzone.enqueueFile(file); };
    });

    // Update the total progress bar
    myDropzone.on("totaluploadprogress", function (progress) {
        document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
    });

    myDropzone.on("sending", function (file, xhr, formData) {
        formData.append("tags", document.getElementById('tags').value);
        // Show the total progress bar when upload starts
        document.querySelector("#total-progress").style.opacity = "1";
        // And disable the start button
        file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
    });

    // Hide the total progress bar when nothing's uploading anymore
    myDropzone.on("queueplete", function (progress) {
        document.querySelector("#total-progress").style.opacity = "0";
    });

    // Setup the buttons for all transfers
    // The "add files" button doesn't need to be setup because the config
    // `clickable` has already been specified.
    document.querySelector("#actions .start").onclick = function () {
        myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
    };
    document.querySelector("#actions .cancel").onclick = function () {
        myDropzone.removeAllFiles(true);
    };
</script>

This is all contained in an aspx page and posts back to itself. In the code behind I am trying to read the values of the form. But I only ever get back the value that was placed in the first textbox.

Thanks, Keith

I have been trying to get this to work for almost a week now. Finally I will ask for help. I am sure I am missing something simple.

I am using DropZone.js to allow upload of pictures to the web server. I need to add a textbox to each upload so that the user can enter additional information or "tags" to the images so that they can later be filtered by these tags. I can get an input to display with each image that is added but when I am trying to read the values in those textboxes during the "sending" event, all I ever get is the value of the first textbox. So if they are uploading 5 images, all of them will e through with the "tags" that were entered in the first textbox.

I appreciate any help that you can offer.

<div class="table table-striped" class="files" id="previews">
    <div id="template" class="file-row">
        <!-- This is used as the file preview template -->
        <div>
            <span class="preview">
                <img data-dz-thumbnail /></span>
        </div>
        <div>
            <p class="name" data-dz-name></p>
            <strong class="error text-danger" data-dz-errormessage></strong>
        </div>
        <div>
            <p class="tags" data-dz-tags></p>
            <input type="text" id="tags" name="tags" />
        </div>
        <div>
            <p class="size" data-dz-size></p>
            <div class="progress progress-striped 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>
            <button class="btn btn-primary start">
                <i class="glyphicon glyphicon-upload"></i>
                <span>Start</span>
            </button>
            <button data-dz-remove class="btn btn-warning cancel">
                <i class="glyphicon glyphicon-ban-circle"></i>
                <span>Cancel</span>
            </button>
            <button data-dz-remove class="btn btn-danger delete">
                <i class="glyphicon glyphicon-trash"></i>
                <span>Delete</span>
            </button>
        </div>
    </div>

</div>

And the javascript:

    <script>
    // Get the template HTML and remove it from the doument
    var previewNode = document.querySelector("#template");
    previewNode.id = "";
    var previewTemplate = previewNode.parentNode.innerHTML;
    previewNode.parentNode.removeChild(previewNode);

    var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
        url: "project.aspx", // Set the url
        thumbnailWidth: 80,
        thumbnailHeight: 80,
        parallelUploads: 20,
        previewTemplate: previewTemplate,
        autoQueue: false, // Make sure the files aren't queued until manually added
        previewsContainer: "#previews", // Define the container to display the previews
        clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
    });

    myDropzone.on("addedfile", function (file) {
        // Hookup the start button
        file.previewElement.querySelector(".start").onclick = function () { myDropzone.enqueueFile(file); };
    });

    // Update the total progress bar
    myDropzone.on("totaluploadprogress", function (progress) {
        document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
    });

    myDropzone.on("sending", function (file, xhr, formData) {
        formData.append("tags", document.getElementById('tags').value);
        // Show the total progress bar when upload starts
        document.querySelector("#total-progress").style.opacity = "1";
        // And disable the start button
        file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
    });

    // Hide the total progress bar when nothing's uploading anymore
    myDropzone.on("queueplete", function (progress) {
        document.querySelector("#total-progress").style.opacity = "0";
    });

    // Setup the buttons for all transfers
    // The "add files" button doesn't need to be setup because the config
    // `clickable` has already been specified.
    document.querySelector("#actions .start").onclick = function () {
        myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
    };
    document.querySelector("#actions .cancel").onclick = function () {
        myDropzone.removeAllFiles(true);
    };
</script>

This is all contained in an aspx page and posts back to itself. In the code behind I am trying to read the values of the form. But I only ever get back the value that was placed in the first textbox.

Thanks, Keith

• javascript
• jquery
• html
• asp
• dropzone.js

Share Improve this question Follow asked Apr 10, 2015 at 21:48 Keith YohnKeith Yohn 6511 silver badge88 bronze badges 2

• any luck in this solution? Im trying to implement it using react-dropzone-ponent – caffeinescript Commented Jan 29, 2016 at 3:47
• Any luck with the solution? – Pedro Commented Sep 24, 2016 at 14:32

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You will get your data with this

var tag= file.previewElement.querySelector('input[name="tags"]').value
formData.append("tags", tag);

it's work for me but my input does not have an id

<p class="tags" data-dz-tags></p>
<input type="text" name="tags" />

I have been trying to get this to work for almost a week now. Finally I will ask for help. I am sure I am missing something simple.

I am using DropZone.js to allow upload of pictures to the web server. I need to add a textbox to each upload so that the user can enter additional information or "tags" to the images so that they can later be filtered by these tags. I can get an input to display with each image that is added but when I am trying to read the values in those textboxes during the "sending" event, all I ever get is the value of the first textbox. So if they are uploading 5 images, all of them will e through with the "tags" that were entered in the first textbox.

I appreciate any help that you can offer.

<div class="table table-striped" class="files" id="previews">
    <div id="template" class="file-row">
        <!-- This is used as the file preview template -->
        <div>
            <span class="preview">
                <img data-dz-thumbnail /></span>
        </div>
        <div>
            <p class="name" data-dz-name></p>
            <strong class="error text-danger" data-dz-errormessage></strong>
        </div>
        <div>
            <p class="tags" data-dz-tags></p>
            <input type="text" id="tags" name="tags" />
        </div>
        <div>
            <p class="size" data-dz-size></p>
            <div class="progress progress-striped 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>
            <button class="btn btn-primary start">
                <i class="glyphicon glyphicon-upload"></i>
                <span>Start</span>
            </button>
            <button data-dz-remove class="btn btn-warning cancel">
                <i class="glyphicon glyphicon-ban-circle"></i>
                <span>Cancel</span>
            </button>
            <button data-dz-remove class="btn btn-danger delete">
                <i class="glyphicon glyphicon-trash"></i>
                <span>Delete</span>
            </button>
        </div>
    </div>

</div>

And the javascript:

    <script>
    // Get the template HTML and remove it from the doument
    var previewNode = document.querySelector("#template");
    previewNode.id = "";
    var previewTemplate = previewNode.parentNode.innerHTML;
    previewNode.parentNode.removeChild(previewNode);

    var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
        url: "project.aspx", // Set the url
        thumbnailWidth: 80,
        thumbnailHeight: 80,
        parallelUploads: 20,
        previewTemplate: previewTemplate,
        autoQueue: false, // Make sure the files aren't queued until manually added
        previewsContainer: "#previews", // Define the container to display the previews
        clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
    });

    myDropzone.on("addedfile", function (file) {
        // Hookup the start button
        file.previewElement.querySelector(".start").onclick = function () { myDropzone.enqueueFile(file); };
    });

    // Update the total progress bar
    myDropzone.on("totaluploadprogress", function (progress) {
        document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
    });

    myDropzone.on("sending", function (file, xhr, formData) {
        formData.append("tags", document.getElementById('tags').value);
        // Show the total progress bar when upload starts
        document.querySelector("#total-progress").style.opacity = "1";
        // And disable the start button
        file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
    });

    // Hide the total progress bar when nothing's uploading anymore
    myDropzone.on("queueplete", function (progress) {
        document.querySelector("#total-progress").style.opacity = "0";
    });

    // Setup the buttons for all transfers
    // The "add files" button doesn't need to be setup because the config
    // `clickable` has already been specified.
    document.querySelector("#actions .start").onclick = function () {
        myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
    };
    document.querySelector("#actions .cancel").onclick = function () {
        myDropzone.removeAllFiles(true);
    };
</script>

This is all contained in an aspx page and posts back to itself. In the code behind I am trying to read the values of the form. But I only ever get back the value that was placed in the first textbox.

Thanks, Keith

I have been trying to get this to work for almost a week now. Finally I will ask for help. I am sure I am missing something simple.

I am using DropZone.js to allow upload of pictures to the web server. I need to add a textbox to each upload so that the user can enter additional information or "tags" to the images so that they can later be filtered by these tags. I can get an input to display with each image that is added but when I am trying to read the values in those textboxes during the "sending" event, all I ever get is the value of the first textbox. So if they are uploading 5 images, all of them will e through with the "tags" that were entered in the first textbox.

I appreciate any help that you can offer.

<div class="table table-striped" class="files" id="previews">
    <div id="template" class="file-row">
        <!-- This is used as the file preview template -->
        <div>
            <span class="preview">
                <img data-dz-thumbnail /></span>
        </div>
        <div>
            <p class="name" data-dz-name></p>
            <strong class="error text-danger" data-dz-errormessage></strong>
        </div>
        <div>
            <p class="tags" data-dz-tags></p>
            <input type="text" id="tags" name="tags" />
        </div>
        <div>
            <p class="size" data-dz-size></p>
            <div class="progress progress-striped 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>
            <button class="btn btn-primary start">
                <i class="glyphicon glyphicon-upload"></i>
                <span>Start</span>
            </button>
            <button data-dz-remove class="btn btn-warning cancel">
                <i class="glyphicon glyphicon-ban-circle"></i>
                <span>Cancel</span>
            </button>
            <button data-dz-remove class="btn btn-danger delete">
                <i class="glyphicon glyphicon-trash"></i>
                <span>Delete</span>
            </button>
        </div>
    </div>

</div>

And the javascript:

    <script>
    // Get the template HTML and remove it from the doument
    var previewNode = document.querySelector("#template");
    previewNode.id = "";
    var previewTemplate = previewNode.parentNode.innerHTML;
    previewNode.parentNode.removeChild(previewNode);

    var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
        url: "project.aspx", // Set the url
        thumbnailWidth: 80,
        thumbnailHeight: 80,
        parallelUploads: 20,
        previewTemplate: previewTemplate,
        autoQueue: false, // Make sure the files aren't queued until manually added
        previewsContainer: "#previews", // Define the container to display the previews
        clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
    });

    myDropzone.on("addedfile", function (file) {
        // Hookup the start button
        file.previewElement.querySelector(".start").onclick = function () { myDropzone.enqueueFile(file); };
    });

    // Update the total progress bar
    myDropzone.on("totaluploadprogress", function (progress) {
        document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
    });

    myDropzone.on("sending", function (file, xhr, formData) {
        formData.append("tags", document.getElementById('tags').value);
        // Show the total progress bar when upload starts
        document.querySelector("#total-progress").style.opacity = "1";
        // And disable the start button
        file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
    });

    // Hide the total progress bar when nothing's uploading anymore
    myDropzone.on("queueplete", function (progress) {
        document.querySelector("#total-progress").style.opacity = "0";
    });

    // Setup the buttons for all transfers
    // The "add files" button doesn't need to be setup because the config
    // `clickable` has already been specified.
    document.querySelector("#actions .start").onclick = function () {
        myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
    };
    document.querySelector("#actions .cancel").onclick = function () {
        myDropzone.removeAllFiles(true);
    };
</script>

This is all contained in an aspx page and posts back to itself. In the code behind I am trying to read the values of the form. But I only ever get back the value that was placed in the first textbox.

Thanks, Keith

• javascript
• jquery
• html
• asp
• dropzone.js

Share Improve this question Follow asked Apr 10, 2015 at 21:48 Keith YohnKeith Yohn 6511 silver badge88 bronze badges 2

• any luck in this solution? Im trying to implement it using react-dropzone-ponent – caffeinescript Commented Jan 29, 2016 at 3:47
• Any luck with the solution? – Pedro Commented Sep 24, 2016 at 14:32

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You will get your data with this

var tag= file.previewElement.querySelector('input[name="tags"]').value
formData.append("tags", tag);

it's work for me but my input does not have an id

<p class="tags" data-dz-tags></p>
<input type="text" name="tags" />

本文标签： javascriptAdding form fields to each file in DropzonejsStack Overflow