Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add ID to the preview div in Dropzone.js

I'm trying to add an id attribute to each file uploaded in Dropzone.js, So I can sort it later on.

This is my code:

Dropzone.options.pictureDropzone = {
  paramName: "file",
  addRemoveLinks: true,
  init: function() {
    this.on("success", function(file, response) {
        file.serverId = response.id;
        $(file.previewTemplate).find('.dz-preview').attr('id', "document-" + file.serverId);
    });
  }
};




The line

$(file.previewTemplate).find('.dz-preview').attr('id', "document-" + file.serverId);

Should add the id, but it does nothing. Tried it with prop() too.

If I choose a different element, it does work fine. for example, this works for .dz-details

$(file.previewTemplate).find('.dz-details').attr('id', "document-" + file.serverId);

But I cannot seem to find a way to add it to the dz-preview element.


The HTML structure looks like that:

<div class="dz-preview dz-processing dz-image-preview dz-success">
    <div class="dz-details"> ... </div>
    <div class="dz-progress"> ... </div>
    <div class="dz-success-mark"> ... </div>
</div>



Thank you for the help :)

like image 612
ktw16 Avatar asked Jan 04 '15 11:01

ktw16


People also ask

What is dropzone JS?

What is DropZone JS? DropzoneJS is an open source library that provides drag ’n’ drop file uploading library with image previews. It’s lightweight, doesn’t depend on any other library (like jQuery) and is highly customizable. How to get it?

How to submit Form to controller from dropzone?

Now, Click on Submit button, to submit form (you can add more more values), you will receive files in your controller, take a look at the below image, which shows that two files name "pdf.pdf" and "meditation.jpg" has been posted to C# Controller from Dropzone.

How to allow only one file to upload in dropzone JS?

If you want to allow user to upload one file at a time only, then you can use Dropzon JS "MaxFiles" attribute in Configuration as shown below Take a look at all answers here regarding question: How to allow only one file to upload in dropzone js?

How do I use dropzone in Laravel?

Dropzone is the most famous, free, open-source library that provides drag and drop file uploads with image previews. In this example, I will be using Laravel, but you can follow along using previous versions. First, upload multiple images with dropzone. Saving images with different file names to the database.


4 Answers

I know this is old but if anyone is still looking for the answer: -

      this.on("success", function(file, response) {
          file.previewElement.id = response.id;
      });
like image 64
codenathan Avatar answered Oct 23 '22 05:10

codenathan


this.on("success", function(file, response) {
    file.serverId = response.id;
    $(".dz-preview:last-child").attr('id', "document-" + file.serverId);
});
like image 26
Bryan Foong Avatar answered Oct 23 '22 06:10

Bryan Foong


Cast the previewElement into jQuery object and perform any action.

   this.on("success", function(file, response) {
      $(file.previewElement).attr("id", response.id);
  });
like image 5
Lovepreet Singh Avatar answered Oct 23 '22 04:10

Lovepreet Singh


I had similar problem but tried it through declaring a variable in javascript ,following is code :

$("#fileUpload${dropdown}").dropzone(
                {

                    url : "uploadAdditionalFile?name="+$("#fileUpload${dropdown} div:first-child").prop('id'),
                    addRemoveLinks : true,
                    maxFiles : 1,
                    init : function() {
                        var imageId = $("#fileUpload${dropdown} div:first-child").prop('id');
                        this.on("maxfilesexceeded",
                            function(file) {
                                    alert("Only one file can be uploaded at a time");
                                    this.removeFile(file);
                                        });
                                this.on("addedfile",
                                        function(file) {
                                            switch (file.type) {
                                            case 'application/pdf':
                                                this.emit("thumbnail",file,"/sbms/static/img/pdf.png");
                                                break;
                                            case 'application/msword':
                                                this.emit("thumbnail",file,"/sbms/static/img/word.png");
                                                break;
                                            }
                                        }
                                );
                                 this.on('removedfile', function(file){
                                     $.ajax({
                                            type : "GET",
                                            url : "removeAdditionalMediaPreviewForm?id="+imageId,
                                            dataType : "json",
                                            async : false,
                                            success : function(response) {
                                                if (response.status == 'SUCCESS') {
                                                    alert("File removed successfully.")
                                                }else {
                                                    alert("File not removed successfully.")
                                                }
                                            }
                                        });
                                }); 

                    },

                    success : function(file,response) {
                        var imgName = response;
                        file.previewElement.classList.add("dz-success");
                        console.log("Successfully uploaded :"+ imgName);
                    },
                    error : function(file,response, xhr) {
                        alert("Unable to upload file. Please check if it is a valid doc or pdf file.");
                        this.removeFile(file);
                    }
                });

imageId is a variable which stores the id and is used later on while file remove.

like image 1
jACOB Avatar answered Oct 23 '22 05:10

jACOB