append filename in hidden form input

Question

i am currently using drop zone to upload files, however, i would like drop zone to append a hidden form input to my main form after it has successfully uploaded the file, for the form to append the filename to my sql database. Therefore, here is the code that i am using:

<script>

Dropzone.options.imageuploaddrop = {

    paramName: "fileimage",
  maxFilesize: 10, // MB
   autoProcessQueue: false,
  uploadMultiple: false,
  maxFiles: 1,
  addRemoveLinks: true,
  clickable:true,
  acceptedFiles:".jpg,.png,.jpeg,.tif",
  dictInvalidFileType:"Invalid File Type. Only Jpg, Png and Tif are supported.",
  dictFileTooBig:"File too Big. Maximum 10 MB!",
  dictMaxFilesExceeded:"We only need one image.",

 init: function() {
    var myDropzone = this;
    $(function(){
setInterval(oneSecondFunction, 1);
});
function oneSecondFunction() {
 if (myDropzone.getAcceptedFiles().length === 0) {
                variable2=0;

            }else {
                variable2=1;
            }
}



document.getElementById("submit").addEventListener("click", function(e) {               
    // First change the button to actually tell Dropzone to process the queue.
 if (myDropzone.getQueuedFiles().length == 1) { 
      // Make sure that the form isn't actually being sent.
      e.preventDefault();
      e.stopPropagation();                    
      myDropzone.processQueue();  

 }
     });



    // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
    // of the sending event because uploadMultiple is set to true.
    this.on("sendingmultiple", function() {
      // Gets triggered when the form is actually being sent.
      // Hide the success button or the complete form.
    });
     this.on('success', function(file, response) {
    // If you return JSON as response (with the proper `Content-Type` header
    // it will be parsed properly. So lets say you returned:
    // `{ "fileName": "my-file-2234.jpg" }`

    // Create a hidden input to submit to the server:
    ***$("#ideaform").append($('<input type="hidden" ' +
                                      'name="files[]" ' +
                                      'value="' + response.fileName + '">'));***
    });


    this.on("errormultiple", function(files, response) {
      // Gets triggered when there was an error sending the files.
      // Maybe show form again, and notify user of error
    });
  }

}


</script>

As you can see I'm using the success event to append the extra file field, but it seems to me that the file name isn't being appended, although the hidden field is actually being added.

Can anyone suggest why?

Thanks!

Can you try adding the hidden field before you start sending? You've got it within onsuccess which I'd think is after it's been posted to server side code? — Papa
– Papa, Commented Dec 17, 2014 at 2:11
if the hidden input is being appended, then the bug is with retrieving the filename value. im not familiar with drop zone or with file uploads, but I would suggest trying to get the filename to display and go from there. perhaps response.fileName is the wrong method. Maybe it should be file.name for example... — lukeocom
– lukeocom, Commented Dec 17, 2014 at 2:42
@Papa, hi there, i would only like to append the field when the file upload is successful. thanks. — wishful thinking
– wishful thinking, Commented Dec 17, 2014 at 4:21

Mhluzi Bhaka · Accepted Answer · 2015-06-01 03:08:00Z

1

I had this issue and solved it as follows:

$("#ideaform").append($('<input type="hidden" ' +
'name="files[]" ' +
'value="' + response['filename'] + '">'));

You can change hidden to text to see the field appear on the page when testing.

Hope that helps someone else!

answered Jun 1, 2015 at 3:08

Mhluzi Bhaka

1,3923 gold badges22 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

append filename in hidden form input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related