Answers

• dorsettech Posts: 2Questions: 1Answers: 0

  April 22

  I've worked it out. I thought there was some more AJAX stuff happening and I didn't notice a couple of typos I made.

  Backend for upload:

      if ($_POST['action'] === 'upload') { // image uploaded via AJAX
  
          function processName($file)
          {
              $path_parts = pathinfo($file);
              $filename = $path_parts['filename'];
              $ext = $path_parts['extension'];
              $newfilename = preg_replace('/[^a-z0-9]+/', '-', strtolower($filename));
              $newfilename = $newfilename . uniqid() . '.' . $ext;
              return $newfilename;
          }
  
          if (is_uploaded_file($_FILES['upload']['tmp_name'])) {
              $newfilename = processName($_FILES['upload']['name']);
              move_uploaded_file($_FILES['upload']['tmp_name'], 'images/debugnfixes/' . $newfilename);
  
              $tableRow = $modx->newObject('system21extras\Model\ExtrasBugsnFixesImages');
              $tableRow->set('filename', $newfilename);
              $tableRow->save();
              $tableData = $tableRow->toArray();
  
              $data = array(
                  "data" => array(),
                  "files" => array(
                      "files" => array(
                          $tableData['id'] => array(
                              "id" => $tableData['id'],
                              "filename" => $newfilename,
                              "web_path" => '/images/debugnfixes/' . $newfilename,
                              "system_path" => MODX_BASE_PATH . '/images/debugnfixes/' . $newfilename
                          )
                      )
                  ),
                  "upload" => array(
                      "id" => $tableData['id']
                  )
              );
  
              return json_encode($data);
          }
      }
  

  Backend for table view:

  // on page load
  $rows = $modx->getCollection('system21extras\Model\ExtrasBugsnFixes');
  $imageRows = $modx->getCollection('system21extras\Model\ExtrasBugsnFixesImages');
  
  $imageDataStructure = array(
      "files" => array()
  );
  
  foreach ($imageRows as $imageRow) {
      $tableData = $imageRow->toArray();
      $newfilename = $tableData['filename'];
  
      $fileData = array(
          "id" => $tableData['id'],
          "filename" => $tableData['filename'],
          "web_path" => '/images/debugnfixes/' . $tableData['filename'],
          "system_path" => MODX_BASE_PATH . '/images/debugnfixes/' . $tableData['filename'],
      );
      
      $imageDataStructure["files"][$tableData['id']] = $fileData;
      
  }
  
  
  $data = array();
  foreach ($rows as $row) {
      $data[] = $row->toArray();
  }
  
  $response['data'] = $data;
  $response['files'] = $imageDataStructure;
  
  return json_encode($response);
  

  JS Editor:

                      {
                          label: "Screen:",
                          name: "screen",
                          type: "upload",
                          display: function (id) {
                              return '<img src="' + editor.file('files', id).web_path + '"/>';
                          },
                          noImageText: 'No image.'
                      },
  

  JS Table:

                      {
                          data: "screen",
                          render: function (id) {
                          return id
                            ? `<img width="100" src="${editor.file('files', id).web_path}"/>`
                            : null;
                         },
       
                      },
  
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  April 22

  Hi,

  Sorry I missed your thread before, but very glad to hear you've got it working now. I hadn't heard of MODX before - it looks really interesting.

  Allan