How to use editor to upload csv with a "submit" button

liquidCPU

for my datatable i have a button with the following options

{
                text: 'Import CSV',
                action: function () {
                    uploadEditor.create( {
                        title: 'CSV file import',
                        buttons: {
                          text: 'Import',
                          action: function () {
                              this.submit();
                          }
                        }
                    });
                }
            },

my upload editor has the following options

uploadEditorOptions = {
      ajax: function (method, url, submitData, success, error) {
             //want to open/parse csv file here
             console.log(submitData);
      },
      fields: [ {
        type:  "radio",
        label: "Has Header:",
        name:  "header",
        options: [
            { label: "Yes", value: true },
            { label: "No", value: false },
        ]
      },{
        label: 'CSV file:',
        name: 'csv',
        type: 'upload',
        clearText: "Remove File",
        noFileText: 'No File',
        ajax: function(files) {
           //dont want to open/parse csv file here
           console.log(files);
        },
        display: function ( val ) {
          console.log(val)
          return '<label>BLAH</label>';
        },
      }]
    } 

i basically want a form with an radio button so the user can let the me know if there is a header in the csv file or not, a button to choose the csv file to upload, to show the file name beside the upload input, and a button the the user can hit to confirm that it is the right csv file and if it has a header row.

i tried to exclude the ajax funtion in the upload field but i get an error "Uncaught No Ajax option specified for upload plug-in". But with the ajax function the display function doesn't get called and when the import (submit) button is clicked the csv field is just an empty string

{
    action: "create"
    data:{
        0:{
            csv: ""
            header: false
        }
    }
]

allan

The upload field will cause the upload to happen before the rest of the form is submitted. If there is no ajax option specified for the field, then it will default to the ajax function for the Editor instance. So just remove your ajax property from the "CSV file" field.

Keep in mind though that they could upload the file before checking a checkbox. So you might want to use a radio input with a default value.

Allan

allan

Sorry I missed this part:

i tried to exclude the ajax funtion in the upload field but i get an error "Uncaught No Ajax option specified for upload plug-in

I've just read over the code, and Editor will give the error you've specified if ajax is not a string. In afraid you do need to use the ajax property of upload in this case.

Why don't you want to do it there? It would be calling the main ajax async to the form submission anyway.

Allan

liquidCPU

I did not realise that the upload ajax function had another param for a callback. i passed the files through that callback and all is good now, thanks

{
        label: 'CSV file:',
        name: 'csv',
        type: 'upload',
        clearText: "Remove File",
        noFileText: 'No File',
        ajax: function(files,callback) {
           callback(files);
        },
        display: function ( val ) {
          return `<label>${val.name}</label>`;
        }