How I can get images names to store them in database that dropzone upload?

[ranaanees]

Hello,

I have to store uploaded images names in database. I am posting images and other form fields on submit button. I have two URLs.
One to upload images for dropzone.
Second to process complete form values.
Images upload successful but I am unable to access images names on my second url where i am handling all from posted values when form is submitted.

How I can get images names to store them in database that dropzone upload?

Should I use Session to stores images names?

I am using Laravel 2.

Here is my code..

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#my-dropzone", {
    url: '/uplod',
    paramName: "file", // The name that will be used to transfer the file
    acceptedFiles: "image/*",
    enqueueForUpload: true,
    forceFallback: false,
    dictDefaultMessage: "Drop files here to upload",
    autoProcessQueue: false,
    uploadMultiple: false,
    maxFiles: 5, // Maximum Number of Files
    maxFilesize: 2, // MB
    addRemoveLinks: true,

    // The setting up of the dropzone
    init: function() {
      var myDropzone = this;
      // First change the button to actually tell Dropzone to process the queue.
      $("#btnSubmit").click(function(e) {

        $("#boatAddForm").submit(function( event ) {
            if($('#boatAddForm').parsley('validate'))
            {
              e.preventDefault();
              e.stopPropagation();
              myDropzone.processQueue();
              $("#boatAddForm")[0].submit();
              return true;
            }  else {
              return false;
            }

          });

      });
    },

});

[ranaanees]

Correction: I am using Laravel 4

[ranaanees]

Help Please...

[enyo]

The easiest would be, to add hidden input fields to your main form with the file names added. then you can just process them on the server.
Let the server send back the filename under which the file is stored, and get it in the success event.

[ranaanees]

@enyo thanks. Can you please show us in an example as you described with hidden fields, I am not getting where and how to do it. Its issue of many. An example will help us.
Thanks Again.

[enyo]

In the init setup you would do something like this:

init: function() {
  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:
    $("#boatAddForm").append($('<input type="hidden" ' +
                                      'name="files[]" ' +
                                      'value="' + response.fileName + '">'));
  }

  this.on('queuecomplete', function() {
    // Invoked when all files finished uploading
    // Now just submit the form. It will send the filenames along since
    // they are added as hidden input fields.
  });
}

Of course you still need to add the part of your code that added the submit event.

[ranaanees]

@enyo thanks. This is really helpful. One more thing.

How to maintain the order of uploaded images. i.e. Small size images uploads quickly and store in different order in database due to files[] array.
I want they should save in database as selected.

Thanks Aagain...

[enyo]

Set parallelUploads to 1

[ArulAR]

@enyo thanks for brief explanation.. i have little doubt how to return value from uplod file (url: '/uplod')

[taufikakbarh]

@enyo but, how I get the full path?

[enyo]

You don't. The browser doesn't provide full paths. It's a security measure

[ghost]

Full path of File is Linux Path that will generate by Hand.

php move file and give path where you want to it to throw then give DB only uploads dir

like uploads/1.jpg