Dropzone.js How do I get an ID from the DB before a file is finished uploading?

user_3642354 0
Viewed 188

I have a situation that I have tried to solve in various ways and it has not worked for me.

What I need is that when starting the upload of a video, I can create an ID in the database and return it to the Dropzone sending event to send it along with the other form fields. I need the ID because while the video is uploading, I have to show a preview of what was saved in the database and the user can modify the name of the video.

To create the ID in the DB I have this Ajax function:

    function create() {
        var result;
        $.ajax({
            type: 'post',
            url: urlroot + 'Videos/id',
            data: {},
            success: function (response) {
                myCallback(response);
            }
        });
        return result;
    }

    function myCallback(response) {
        return response;
    }

And this is the sending event from Dropzone:

    this.on("sending", function (file, xhr, formData) {
        var idv = create();
        formData.append("id", idv);
        formData.append("artistas", jQuery("#artistas").val());
        formData.append("artistas", jQuery("#artistas").val());
    });

The problem is that the $ ajax response does not arrive before the sending event is executed, so my "idv" enters the PHP script as "undefined". I understand that it is because of the asynchronous call. I tried to somehow delay the execution of sending (with promises or setTimeOut) but it doesn't work.

I also tried to create directly in the upload PHP script, the ID in the DB and return it with "return" or with "echo", but the answer can only be received in the "success" event and I need you to be able to modify the name of the video while uploading to the server.

I also tried to access in the "sending" event the data of the file or XHR object and with console.log it shows me the .responseText, but when I want to access directly it tells me that it is empty:

    console.log(file.xhr.responseText);
    console.log(xhr.responseText);

I don't know what else to try, I need that ID to modify the data in the database while the file is being uploaded since the name of the video can be repeated. Maybe I should change my focus, if someone enlightens me it would be greatly appreciated.

I am attentive to your comments, and sorry about my English.

dropzone.js php
1 Answers

You may use session_id() to do the trick.

<?php 
session_start();
$newkey=session_id();

echo $newkey;

//e.g. ml1n8oc46ma6kqndpok38mk661

?>

Step 1

When the user visits your site --- even before they trigger the file uploads thru Dropzone, this ID could be created by the system so you get a unique key.

Step 2

When you upload the files, make sure that the you store this unique key in the db table, together with the file name, into a new record (or for multiple file uploads, into new records). Make sure that your db table has an auto_increment key

Step 3

Now you can have the session_id linking with your actual video record in your db, please use ajax to return all the records auto_incremented IDs and then you can put them in table form into a DIV, and then so you can amend the video file name simply by

rename("/uploaded/video1.mp4","/uploaded/vidoe1_newname.mp4");

Of course I believe you also need to update your db table after the file rename so that the db data will match your renamed filename.

Something like:

$stmt = $this->mysqli->prepare("UPDATE uploadedfile SET filename=? WHERE id=? and session_id=?");
$currentkey=session_id();
$stmt->bind_param('sis', $newfilename, $id, $currentkey);

// $id is the auto_incremented id returned from previous ajax 

$stmt->execute();

To sum up:

  1. upload the multiple files to the server
  2. save the file uploaded data to the server , linking with the session_id
  3. use ajax to call a PHP to retrieve the ID from all the uploaded records (e.g. select * from uploadedfile where session_id=?), then you get the auto-increment IDs of the records where you can further work on. (say use the ajax return and put it into a DIV in table form and then the user can click to select which photo to rename and so on)
user_118549860
Related