Simplevault files download and send to php server side

Suite and Optimus Suite 6
#1

Hi
I want to use simplevault to manage the sending of files on my form, I am using php on the server side:

const form = new dhx.Form("form", {
  css: "dhx_widget--bg_white dhx_widget--bordered",
  padding: "20",
  rows: [
    {
      type: "input",
      label: "Identifiant",
      labelPosition: "left",
      icon: "dxi dxi-magnify",
      labelWidth: "130px",
      required: true,
      placeholder: "Identifiant du client",
      id: "identifiant",
      name: "identifiant"
    },
    {
      type: "input",
      label: "Nom du client",
      labelPosition: "left",
      icon: "dxi dxi-magnify",
	  placeholder: "Nom du client",
      labelWidth: "130px",
      required: true,
      id: "nom",
      name: "nom"
    },
    {
      type: "simpleVault",
      required: true,
      label: "Fichiers",
      labelPosition: "left",
      labelWidth: "130px",
      id: "simplevault",
      name: "simplevault"
    },
    {
      align: "end",
      cols: [
        {
          gravity: false,
          type: "button",
          submit: false,
          value: "Envoyer",
          size: "medium",
          view: "flat",
          color: "primary",
          id: "button",
          name: "button"
        }
      ]
    }
  ]
});
			
form.events.on("ButtonClick", function(id,e){
	form.send("ged.php", "POST");
});

In the server side, the simplevault is null

identifiant: "H123HG"
nom: "Ammehd Ammehd"
simplevault: [{}, {}, {}]
0: {}
1: {}
2: {}

Can you help me please .

Make the datepicker input editable
#2

Can someone help me please ?

I have a pressing need.

#3

Hello.

Pleas,e try to add the “target” property to your simpleVault item, indicating, where you need to store the uploading files.
Something like:

   {
      type: "simpleVault",
      required: true,
      label: "Fichiers",
      labelPosition: "left",
      labelWidth: "130px",
      id: "simplevault",
      name: "simplevault",
      target:"file_storage.php"
    },

In this case you will an additional request to the “file_storage.php” with the uploading files:
https://snippet.dhtmlx.com/g0lv3kq5

#4

Thank you sematik

const form = new dhx.Form("form", {
  css: "dhx_widget--bg_white dhx_widget--bordered",
  padding: "20",
  rows: [
    {
      type: "input",
      label: "Identifiant",
      labelPosition: "left",
      icon: "dxi dxi-magnify",
      labelWidth: "130px",
      required: true,
      placeholder: "Identifiant du client",
      id: "identifiant",
      name: "identifiant"
    },
    {
      type: "input",
      label: "Nom du client",
      labelPosition: "left",
      icon: "dxi dxi-magnify",
	  placeholder: "Nom du client",
      labelWidth: "130px",
      required: true,
      id: "nom",
      name: "nom"
    },
    {
      type: "simpleVault",
      required: true,
      label: "Fichiers",
      labelPosition: "left",
      labelWidth: "130px",
      id: "simplevault",
      name: "simplevault",
	  target:"ged.php",
    },
    {
      align: "end",
      cols: [
        {
          gravity: false,
          type: "button",
          submit: false,
          value: "Envoyer",
          size: "medium",
          view: "flat",
          color: "primary",
          id: "button",
          name: "button"
        }
      ]
    }
  ]
});
			
form.events.on("ButtonClick", function(id,e){
	form.send("ged.php", "POST");
});

I tried, but nothing has changed.

Is simpleVault integrated by default on dhtmlxsuite ?

I have been really stuck for 2 weeks, I don’t know whether to change the framework.

#5

Please, refer to snippet from the previous reply.
Try to store your files separately from the form in the separate url, where the files storage will be. So during the form sending there will be an additional request for the simpleVault item.

#6

I can’t seem to implement this, can you help me a little?

#7

The key concept to grasp is that the SimpleVault control sends/receives data separately from the rest of the form.

You need a PHP script that is going to handle the file upload separately from the form data. Technically you could do both with a single file by differentiating which action it’s currently taking, but if you’re having difficulty it’s probably easier separating them out into 2 separate files: 1 to handle the form data, and 1 to handle the file upload.

So far you’ve only shown your form code, which is fine (other than that you have the simpleVault also pointing to ged.php the same as your form send). But without knowing what you’re doing on the PHP side, it isn’t really possible to help beyond making sure you understand my first sentence up above.

#8

Thank you kcasarez,
I separately the two url, but there is no change. this below is my form:

const form = new dhx.Form("form", {
  css: "dhx_widget--bg_white dhx_widget--bordered",
  padding: "20",
  rows: [
    {
      type: "input",
      label: "Identifiant",
      labelPosition: "left",
      icon: "dxi dxi-magnify",
      labelWidth: "130px",
      required: true,
      placeholder: "Identifiant du client",
      id: "identifiant",
      name: "identifiant"
    },
    {
      type: "input",
      label: "Nom du client",
      labelPosition: "left",
      icon: "dxi dxi-magnify",
	  placeholder: "Nom du client",
      labelWidth: "130px",
      required: true,
      id: "nom",
      name: "nom"
    },
    {
      type: "simpleVault",
      required: true,
      label: "Fichiers",
      labelPosition: "left",
      labelWidth: "130px",
      id: "simplevault",
      name: "simplevault",
      target:"file_storage.php"
    },
    {
      align: "end",
      cols: [
        {
          gravity: false,
          type: "button",
          submit: false,
          value: "Envoyer",
          size: "medium",
          view: "flat",
          color: "primary",
          id: "button",
          name: "button",
          
        }
      ]
    }
  ]
});
			
form.events.on("ButtonClick", function(id,e){
	form.send("ged.php", "POST");
});

I don’t know if there is an error on my code, please help me correct my code.

my php code on file_storage.php

<?php
var_dump($_POST);
?>

I also noticed that only one request is sent to the server when I click on the button. What must I do so that both requests are sent: the ged.php only. file_storage.php is not send.

Thank you.ged.php (1.9 KB)
file_storage.php (28 Bytes)

This is my html headers:

<head>
	  <script type="text/javascript" src="codebase/suite.js"></script>
	  <link rel="stylesheet" href="codebase/suite.css">
   </head>
#9

On the PHP end you should be looking at the $_FILES global variable, not the $_POST.

var_dump($_FILES);

Here’s some code from my PHP which handles uploaded files; it’s for the Vault component, but it should operate the same for simpleVault I think. The $destDir variable is specific to my (Windows) server and project, but it should be set to the directory where you want the files to be uploaded. This bit of code checks to make sure the directory exists and creates it if it doesn’t. Strip out the bit that creates the directory if you don’t want it doing that automatically, but you should check to make sure your destination directory exists before you try to write files to it. My code also is checking for images and video files, and only saves them if they are; remove those type checks if not applicable to you.

$destDir = "E:\\Jobs\\".substr($jobNumber,0,6)."\\ImageFiles\\".$jobNumber."\\".$department."\\".$phase."\\".date("Y-m-d")."\\";
$pathExists = file_exists($destDir);
if (!$pathExists){
    $pathExists = mkdir($destDir,0777,true);
}
$check = getimagesize($_FILES["file"]["tmp_name"]);
$mime = mime_content_type($_FILES["file"]["tmp_name"]);
if ($pathExists && (strstr($mime, "video/") || strstr($mime, "image/"))) {
    $success = false;
    if ($check > 0 || strstr($mime, "video/")) {
        // set file path
        $filePath = $destDir . $_FILES["file"]["name"];
        // save file
        $success = move_uploaded_file($_FILES["file"]["tmp_name"], $filePath);
    }

    // response
    header("Content-Type: text/json");

    if ($success !== false){
        // set response code - 200 ok
        http_response_code(200);

        print_r(json_encode(array(
            "state" => true,    // saved or not saved
            "name"  => $_FILES["file"]["name"],   // server-name
            "extra" => array(   // extra info, optional
                "message"  => "File was uploaded"
            )
        )));
    } else {
        // set response code - 503 service unavailable
        http_response_code(503);

        // tell the user
        print_r(json_encode(array(
            "state" => false,    // saved or not saved
            "name"  => "",   // server-name
            "extra" => array(   // extra info, optional
                "message"  => "File was not uploaded"
            )
        )));
    }
} else {
    // set response code - 503 service unavailable
    http_response_code(400);

    // tell the user
    print_r(json_encode(array(
        "state" => false,    // saved or not saved
        "name"  => "",   // server-name
        "extra" => array(   // extra info, optional
            "message"  => "File was not uploaded"
        )
    )));
}

I can’t tell from the documentation when the simpleVault upload is triggered. It may happen as soon as a file is selected, like the Vault component, or it may trigger with the form.send(); if not, you will need to update your code to submit the form:

form.events.on("ButtonClick",function(id,e){
    form.send("ged.php", "POST");
    form.getItem("simpleVault").send();
});

You should be able to watch the network activity through your browser’s Developer Tools to see when data is sent to file_storage.php. That should at least let you know the file upload is being attempted.

#10

Hi kcasarez

form.events.on("ButtonClick",function(id,e){
    form.send("ged.php", "POST");
    form.getItem("simpleVault").send();
});

just to tell you that, even sending in 2 requests, no change.
I will look at other frameworks to do it.

#11

Please, make sure that you are using the latest dhtmlxSuite build.
Otherwise please, try to update your dhtmlSuite package.