How to return new filename to Dropzone after upload is complete as hidden form input?

Question

I am currently using Dropzone to allow users upload some files into the system I'm developing and have linked the Dropzone to a div within my form,

But once the upload is complete, I would like the filename of the newly uploaded file to be returned to the Dropzone as a hidden form input so that I can save the filename in the database.

Below is the code Im using:

$(document).ready(function(){
    var myDropzone = new Dropzone("div#my-awesome-dropzone", {  
        url: "?content=plg_dropzone&folder=php&file=uploadhandler&alert=yes",
        addRemoveLinks : true,
        acceptedFiles : "application/pdf",
        maxFilesize: 5, // MB
        maxFiles: 5
    });
});

Assistance on this will be greatly appreciated. I've searched on the net and not gotten a solution.

Thanks

Answer 1

Thanks to @edwin Krause giving the first hint for me on this. But because I needed to do another search on it to actually replace the source of the preview I add my finding here for others not knowing exactly how to do it.

success: function( file, response ) {
    file.previewElement.querySelector("img").src = response;
}

My PHP script is echoing the name of the cropped image which has been uploaded as plain HTML if you returning JSON your success callback could look like this

success: function( file, response ) {
    obj = JSON.parse(response);
    file.previewElement.querySelector("img").src = obj.src;
}

Or version of the code which works in Dropzone.js 5.7.2 (July 23rd 2020) is:

success: function( file, response ) {
    file.previewElement.querySelector("img").src = response.src;
}

Notice: obj.src or response.src - src has to match your json property of course.

You could even replace the whole file.previewElement with your server response

Answer 2

I believe using the success callback and a JSON response from the server is the best way to do it? This works great for me, Hope that helps (fileupload_flag I'm using to prevent form submission before upload is completed)

My Dropzone config:

Dropzone.options.myAvatarDropzone = {
    maxFilesize: 3, // MB
    maxFiles: 1,
    addRemoveLinks: true,
    init: function() {
        this.on("addedfile", function(file) { fileupload_flag = 1; });
        this.on("complete", function(file) { fileupload_flag = 0; });
    },
    accept: function(file, done) 
   {
        var re = /(?:\.([^.]+))?$/;
        var ext = re.exec(file.name)[1];
        ext = ext.toUpperCase();
        if ( ext == "JPG" || ext == "JPEG" || ext == "PNG" ||  ext == "GIF" ||  ext == "BMP") 
        {
            done();
        }else { 
            done("Please select only supported picture files."); 
        }
    },
    success: function( file, response ){
         obj = JSON.parse(response);
         alert(obj.filename); // <---- here is your filename
    }
};

My server response:

$upload_success = $file->move($pubpath.$foldername, $filename);

    $success_message = array( 'success' => 200,
                        'filename' => $pubpath.$foldername.'/'.$filename,
                        );

    if( $upload_success ) {
        return json_encode($success_message);
    } else {
        return Response::json('error', 400);
    }