Using Editor FileUpload with Spring MVC

PIGAYE

Hi ,
I try to use the functionality of FileUpload. But I confess that I do not understand the principle.
1. As soon as I select the file in the browser, a POST action is executed on the server side. This action returns a JSON object of the following form:

`{ "data" [], "files": { "files": { "2": { "id", "2", "filename", "51.jpg", "filesize": "171000", " web_path ":"/upload/2.jpg "," system_path ":"/home/datat/public_html/editor/upload/2.jpg "}}}" upload ": {" id ":" 2 "}}`

Why should a file be selected to perform an action on the server?
This should only be done when I press the Submit button, in my opinion.

1. To perform tests I write a Spring MVC function that makes you return the JSON object as it is:

`{ "data" [], "files": { "files": { "2": { "id", "2", "filename", "51.jpg", "filesize": "171000", " web_path ":"/upload/2.jpg "," system_path ":"/home/datat/public_html/editor/upload/2.jpg "}}}" upload ": {" id ":" 2 "}}`

But every time I have the following error:

"NetworkError: 404 Not Found - http: // localhost: 8081/upload/2.jpg"

I do not know where the elements of the JSON object come from.

Do you have an idea?

allan

The documentation for the upload parameters and JSON structure returned is available here.

Allan

PIGAYE

Thanks Allan. I could make work the Upload with Spring MVC. It is not easy, but I lift the blocks one by one. I see that we need to read a lot of documentation.

Now I have a another problem :
When I edit a row I have this error :

uncaught exception: Unknown file table name: files

Do you have any idea?

Thank you in advance.

allan

Can you show me the JSON being returned by the server please?

Thanks,
Allan

PIGAYE

Allan,

For a row that has just been created in datatable I can edit with the Edit button (not update but just edit button) wich displays the modal form.

But if it's an old row there's a javascript error:

Uncaught exception: Unknown file table name: files

Here is how I fill the datatable with the DataTablesOutput provided by Damien Arrachequesne with spring-data-jpa-datatables

@JsonView (DataTablesOutput.View.class)
@RequestMapping (value = serviceId + "/ piecesjointes / datatable", method = RequestMethod.GET)
Public DataTablesOutput <PieceJointObjectMetier> getPiecesJointes (@Valid DataTablesInput input) {
   Long id = getRealId ();
   Input.addColumn ("object.id", true, true, String.valueOf (id));
   Input.addColumn ("typeEntiteMetier", true, true, serviceId);
   Return asecService.findAllPiecesJointesByIdObjetMetierAndTypeObjetMetier (input);
}

This url return next JSON to populate the datatable :

{"draw":1,"recordsTotal":7,"recordsFiltered":7,"data":[{"id":25,"typeEntiteMetier":"personnephysique"
,"typePieceJointe":"Abc","titre":"Acte de","commentaire":null,"fichier"
:{"id":48,"fileName":"bordereau_1.pdf","fileFullName":"D:/TEMP/asec/pieces_constitives//bordereau_1.pdf"
,"fileUrl":"D:/TEMP/asec/pieces_constitives//bordereau_1.pdf","fileFormat":"PDF","fileVersion":null,"fileCreatedBy"
:null,"fileSize":"53916","statut":"NOUVEAU","dateTimeOperation":"02/08/2017 15:19"},"statut":null,"dateTimeOperation"
:null}]
}

After the datatable is populated, if I select a row and click on Edit button I have this error :

uncaught exception: Unknown file table name: files

It is so because I have this code :

{
label   : "Sélectionner le fichier:",
name    : "fichier.id",
    type    : "upload",
    ajax    : 'fileupload',
    display : function ( file_id ) {
         return datatable_liste_pieces_jointes.file( 'files', file_id ).web_path; //Here
     },
dragDrop: false,
clearText: 'Remove file'
}

So what does mean "files" in this case and how it may be set?

Thank you in advance.

allan

The first parameter you pass to the file() method is the table name where the file information is. If you look at this example you will be able to see that there is a files table.

You need to modify that to match whatever table you keep the files in. It would be worth reading over this page as well, including the upload section.

Allan

PIGAYE

Hi Allan,

I think that you have solve my problem.

Looking at the example you offered me, I realized that I made a mistake.

https://editor.datatables.net/examples/advanced/upload.html

In my code I hade :

var editor;                                         //the editor
var datatable_liste_pieces_jointes;  //the datatable

editor = new $.fn.dataTable.Editor( { 
                         ajax: {
                                     (..........)
                          }
}

And

 datatable_liste_pieces_jointes = $('#liste_pieces_jointes_datatables').DataTable( {
  (....)
  }

Previously I hade this :

{
label    : "Sélectionner le fichier:",
name    : "fichier.id",
 type    : "upload",
ajax     : 'fileupload',
display    : function ( file_id ) {
       //return datatable_liste_pieces_jointes.file( 'files', file_id ).web_path; //here was the mistake
       return editor.file( 'files', file_id ).web_path; //the correct
},
 dragDrop: false,
clearText: 'Remove file'
  }

I confused datatable_liste_pieces_jointes.file( 'files', file_id ).web_path
and editor.file( 'files', file_id ).web_path;

My problem is solved now.

Really thank you very much you are magic