Editor node.js file upload clear error - Can't clear an image

Capamania

Editor node.js file upload clear error - Can't clear an image

Uploading a file is now working: https://datatables.net/forums/discussion/57244/editor-node-js-file-upload-example-error-a-server-error-occurred-while-uploading-the-file

Yet, when I want to clear an image in the editor view ... I can see that it shortly clear ('no file' text) the image ... but then closes the editor, reloads the page and the image is back at the record. Also the datase entry is still there.

How can I debug and solve this?

allan

What is the client-side submitting to the server after you click the clear button and then submit the form? And what is the SQL that the server is executing as a result of the query?

Allan

Capamania

I don't even get to the point to 'submit' the form. Right after I click the clear button the site reloads. As if the clear button doesn't find the function or has an error.

Capamania

When I upload a file I can fetch the data like this in the backend (before I further process it ...):

var sendBody = JSON.stringify(req.body);
var sendFiles = JSON.stringify(req.files);
var sendJson = { 'body': sendBody, 'files': sendFiles }
console.log('sendJson:');
console.log(sendJson);
      
sendJson:
{ body: '{"action":"upload","uploadField":"news.file"}',
  files:
   '{"upload":{"uuid":"sdf7ca746","field":"upload","file":"/tmp/express-busboy/387ca746/upload/neo.png","filename":"etfneo.png","encoding":"7bit","mimetype":"image/png","truncated":false,"done":true}}' }

To debug the frontend I tried:

editor.on( 'preUpload', function ( e, fieldName, file, ajaxData ) {
  console.log('preUpload:');
  console.log(editor_newsroom);
    console.log(ajaxData);
    console.log(fieldName);
    console.log(file);
});

editor.on( 'uploadXhrError', function ( e, fieldName, xhr ) {
  console.log('uploadXhrError:');
    console.log(e);
    console.log(fieldName);
    console.log(xhr);
});

editor.on( 'uploadXhrSuccess', function ( e, fieldName, json ) {
  console.log('uploadXhrSuccess:');
    console.log(fieldName);
    console.log(json);
});

$( editor.field( 'news.file' ).input() ).on( 'upload.editor', function (e, val) {
  console.log('upload.editor:');
  console.log( 'Image field has changed value', val );
});

editor.on( 'preSubmit', function ( e, data, action ) {
  console.log('preSubmit:');
    console.log('Data:');
    console.log(data);
    console.log('Action:');
    console.log(action)
} );   

Frontend console:

upload.editor: 
Image field has changed value 26 
ajaxData d:
FormData {  }
ajax d:
preUpload:
Object { s: {…}, classes: {…}, i18n: {…}, dom: {…}, jQuery1113005803724: {…} }
FormData {  }
news.file 
File { name: "neo.png", lastModified: 1559814724000, webkitRelativePath: "", size: 3874, type: "image/png" }
XHR POSThttp://127.0.0.1:2005/news/
[HTTP/1.1 200 OK 195ms]

uploadXhrSuccess: 
news.file 
Object { data: [], fieldErrors: [], files: {…}, upload: {…} }
upload.editor: 
Image field has changed value 27

... but when I click the clear button, the page reloads ...

allan

I'm going to need a link to a page showing this one I'm afraid. Clicking the clear button should not cause the page to reload. It sounds like there is another event listener being added to that button.

Allan

Capamania

Hi Allan, I've sent you a private message a link to the site and login credentials! Many thanks for the help!