CODEWITHSUNDEEP
javascriptphpjquerydropzone.js
Akhil Sahu
Akhil Sahu

Reputation: 67

Change the name of filename before upload dropzone

I want to change name of the filename when file is drop on dropzone.

Dropzone.autoDiscover = false;

  var myDropzone = new Dropzone("#pop");
  myDropzone.on("addedfile", function(file) {


  });

  myDropzone.on("removedfile",function(file){
  	$.ajax({
				url: "delete.php",
				type: "POST",
				data: { 'name': file.name}
				});
 });

myDropzone.on("sending", function(file, xhr, formData) {
			console.log(file);
	 console.log(xhr);console.log(formData);
  	file.uniqueName = new Date().getTime() +"_" + file.name;
		formData.append("unicname",  file.uniqueName);
    $("#pop").append("<input type='hidden' name='hidname' id='hidname' value="+file.uniqueName+">");
    xhr.response('unival='+file.uniqueName);
    console.log(xhr);console.log(formData);
    
      console.log(file);
  });

Dropzone.options.myDropzone = {
 	
 	   paramName: "file",
  uploadMultiple: true,
    init: function() {
    	 
    	
        thisDropzone = this;
   <!-- 4 -->
        
        $.getJSON('upload.php', function(data) {
 			
            <!-- 5 -->
            $.each(data, function(key,value){
                 
                var mockFile = { name: value.name, size: value.size };
                
                myDropzone.options.addedfile.call(myDropzone, mockFile);
 
                myDropzone.options.thumbnail.call(myDropzone, mockFile, "upload/"+value.name);
                 
            });
             
        });
    },

   success: function(file, response){
                
            }

   
};

Have already tried the following code but does not work.The values do not append to form data.The changes to variable file are not accessible on dropzone.js from anywhere you definetely can't. Dropzone.js

myDropzone.on("sending", function(file, xhr, formData) {
			console.log(file);
	 console.log(xhr);console.log(formData);
  	file.uniqueName = new Date().getTime() +"_" + file.name;
		formData.append("unicname",  file.uniqueName);
    $("#pop").append("<input type='hidden' name='hidname' id='hidname' value="+file.uniqueName+">");
    xhr.response('unival='+file.uniqueName);
    console.log(xhr);console.log(formData);
    
      console.log(file);
  });

None of solution does seem to work. Basically i want to save file to specific filename specified to server.

Upvotes: 2

Views: 4218

Answers (2)

Bowen Li
Bowen Li

Reputation: 397

you also need following css to go with js codes to achieve your result:

.dz-preview .dz-filename{display:none}
.dz-preview.dz-success .dz-filename{display:block}

Upvotes: 0

Bowen Li
Bowen Li

Reputation: 397

Technically, you can change the thumbnail fileName after uploading the file, also I think the dropzone should be separated from your data form, once you upload the file ,the server will return a file name. and you can set a hidden input value with this filename in the data form, then finally submit the data form. the codes are like:

<div id="pop">

</div>
<form id="data-form">
    <input type="hidden" name="fileName">
    <input type="submit" name="submit" value="submit">
</form>
<script>
    var dropzone = new Dropzone("#pop");
    dropzone.on("success",function(file,response){
        var fileName = response.data.fileName //server return fileName
        $('input[name="fileName"]').val(fileName);
        var dataUrl = response.data.fileUrl;
        file.name = fileName //change thumbnail file name
        this.emit("thumbnail",file,dataUrl);//draw thumbnail
    });

</script>

Upvotes: 1

Related Questions