CODEWITHSUNDEEP
javascriptphpdropzone.js
CodeOrElse
CodeOrElse

Reputation: 328

Implementing DropZone.js properly, best practise?

I am trying to figure out how to implement DropZone.js properly using PHP.

My setup is that I have a main form with a bunch of fields, and then the dropzone form on the side. Every time a file is added upload.php is called which moves the file from the temp folder to its final destination. When the main form is finally submitted I add the fields to the database along with the names of the files that I have added to the folder.

But if a file is added and then subsequently deleted in the dropzone UI, the "removedfile" event is fired. But that's javascript. And javascript can't delete files, so I can't delete the file from the final destination that I moved it to. So how can I keep track of what files are meant to be used when saving the main form? I thought about using the "completed" and "removedfile" events to call functions that creates/removes hidden fields dynamically which contains the file names. But I might be going off the main path a bit too far. What should I do? My php and javascript experience is quite limited and I'm not sure how to approach this situation.

Edit: So in short, the upload.php page moves the uploaded files to the right folder, but when the user clicks to remove a file nothing is done to delete it, it's just deleted in the UI but it's left on disk, so how will the server know which are "real" and which are just leftovers that should've been removed?

Upvotes: 0

Views: 234

Answers (1)

CodeOrElse
CodeOrElse

Reputation: 328

I solved it the way I thought originally. With a bit of jQuery and adding/removing hidden input fields:

function onCompletedFile(file)
{
    console.log("Completed file:");
    console.log(file);

    $('#mainform').append('<input type="hidden" name="images[]" value="' + file.name + '" id="' + file.upload.uuid + '"/>');
}

function onRemovedFile(file)
{
    console.log("Removed file:");
    console.log(file);

    $('#' + file.upload.uuid).remove();
}

and then in the dropzone options:

this.on("complete", function(file) { onCompletedFile(file); });
this.on("removedfile", function(file) { onRemovedFile(file); });

and on the page I submit my main form to I can just iterate through it like so:

foreach( $_POST['images'] as $value )

.. and get the names of the files that are uploaded and actually meant to be used.

Upvotes: 0

Related Questions