Upload - icons insteed of images

paintitblack

Hello Allan and everyoneelse,

I tried to upload PDF files with the upload many examples (https://editor.datatables.net/examples/advanced/upload-many.html) and insteed of showing the images (<img src=) I want to show icons with a link to the files.

But this doesn't work with FireFox:

                fields: [ {
                                label: "First name:",
                                name: "users.first_name"
                        }, {
                                label: "Last name:",
                                name: "users.last_name"
                        }, {
                                label: "Phone #:",
                                name: "users.phone"
                        }, {
                                label: "Site:",
                                name: "users.site",
                                type: "select",
                                placeholder: "Select a location"
                        }, {
                                 label: "Images:",
                                 name: "files[].id",
                                 type: "uploadMany",
                                 display: function ( fileId, counter ) {
                                         return '<a href="'+editor.file( 'files', fileId ).web_path+'"><img src="/intern/images/file_types/pdf.png"/></a>';
                                         // return '<img src="'+editor.file( 'files', fileId ).web_path+'"/>';
                                 },
                                 noFileText: 'No images'
                         }

And insteed of showing "1 image(s)" or "2 image(s)" I want to show an icon per file.

How can I add the url (e.g. web_path) into the link (<a href=)?

columns: [
                        { data: 'users.first_name' },
                        { data: 'users.last_name' },
                        { data: 'users.phone' },
                        { data: 'sites.name' },
                        {
                                 data: "files",
                                 render: function ( d ) {
                                         return d.length ?
                                                 '<a href=""><img src="/intern/images/file_types/pdf.png"/ width="32" height="32"></a>' :
                                                 'No image';

                                         return d.length ?
                                                 d.length+' image(s)' :
                                                 'No image';
                                 },
                                 title: "Image"
                         }
                ],

A complete example of my try can be found here -> http://wechselstube.host4free.de/editor/

Thanks for any help

pib

allan

The problem with both parts is that your d parameter in the DataTable is an array - you need to use a for loop (or any other type of loop you want) to spin over the array and generate the HTML you want to output.

Allan

paintitblack

Thanks foryour advice.

I guess I figured out how to read out this response:

                                             {
                                                     "DT_RowId": "row_2",
                                                     "users": {
                                                             "first_name": "Max",
                                                             "last_name": "Master",
                                                             "phone": "12345",
                                                             "site": "1"
                                                     },
                                                     "sites": {
                                                             "name": "Edinburgh"
                                                     },
                                                     "files": [
                                                             {
                                                                     "id": "1"
                                                             }
                                                     ]
                                             }

But how do I get the files information into the render function? I mean the filename and url.

                        { data: 'sites.name' },
                        {
                                 data: "files",
                                 render: function ( d, type, row ) {
                                         // alert ( JSON.stringify(row,null,'\t') );

                                         if(d.length>0) {
                                                  html ="";
                                                  for (i = 0; i < d.length; i++) {
                                                         // '<a href=""><img src="images/file_types/pdf.png"/ width="32" height="32"></a>'
                                                         html+= row.files[i].id+";";
                                                  }
                                                  return html;
                                         } else {
                                                 return 'No image';
                                         }
                                 },
                                 title: "Image"
                         }

allan

Using editor.file(...) was correct, you just need to pass in an integer at a time, not the whole array - e.g. d[i].

Allan

paintitblack

I need the whole array, because there can be more than one file per user ;-)

Unfortunately I have two issues with the editor.file. In usersTable and in usersEditor I don't get any result:

                                         if(d.length>0) {
                                                  html ="";

                                                  alert( editor.file( 'files', 0 ).web_path );

                                                  for (i = 0; i < d.length; i++) {
                                                         alert( editor.file( 'files', i ).web_path );
                                                         // '<a href=""><img src="images/file_types/pdf.png"/ width="32" height="32"></a>'
                                                         html+= row.files[i].id+";";
                                                  }
                                                  return html;
                                         } else {
                                                 return 'No image';
                                         }

Can you also please take a look at http://wechselstube.host4free.de/editor/? There I uploaded the whole example.

Thanks

pib

allan

If you have a look in your browser's console you'll see an error about "editor is not defined". That's because while you are using editor.file(...) there is no editor variable. Instead you have siteEditor and usersEditor variables. If you update your code to refer to the correct variable that should do it.

Allan

paintitblack

With usersEditor it works as expected:

                columns: [
                        { data: 'users.first_name' },
                        { data: 'users.last_name' },
                        { data: 'users.phone' },
                        { data: 'sites.name' },
                        {
                                 data: "files",
                                 render: function ( d, type, row ) {
                                         if(d.length>0) {
                                                  html ="";
                                                  for (i = 0; i < d.length; i++) {
                                                         html+= '<a href="'+usersEditor.file( 'files',row.files[i].id).web_path+'" class="example"><img src="images/file_types/pdf.png"/ width="32" height="32"></a>'
                                                  }
                                                  return html;
                                         } else {
                                                 return 'No image';
                                         }
                                 },
                                 title: "Image"
                         }
                ],

Thank you very much again :-)

Pib