Upload image without image table

carrarachristophe

Hello,

I am trying to implement a simple upload and had a look to the following example and manual1 and manual2.

But I am unable to trick it to a case where there is no image table. Indeed, I just would like to save the image to "/img/series" under the name of the serie_id.
Here is my code:

Editor::inst( $db, 'bibliotheque_series', 'serie_id' )
    ->fields(
        Field::inst( 'serie_id' )
            ->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/img/series/__ID__.__EXTN__' ) )
            ->setFormatter( 'Format::nullEmpty' ),
        Field::inst( 'serie' )
            ->validator( Validate::notEmpty( ValidateOptions::inst()
                ->message( 'Nom de série requis' )))
            ->validator( Validate::maxLen( 20 ) )
            ->validator( Validate::unique( ValidateOptions::inst()
                ->message( 'Existe déjà' ))),
        Field::inst( 'website' )
            ->validator( Validate::url() ),
        Field::inst( 'resume' )
    )   ->process( $_POST )
    ->json();

My editor part:

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.bibliotheque_series.php',
        table: '#bibliotheque_series',
        fields: [
            {label: "Série:", name: "serie"},
            {label: "Site officiel:", name: "website"},
            {label: "Résumé:", name: "resume", type: "textarea"},
            {label: "Image:", name: "serie_id", type: "upload", display: function ( id ) {
                return '<img src="img/series/' + id + '"/>';
                },
                noImageText: 'No image'
            }
        ]
    } );

My datatable part:

    var table = $('#bibliotheque_series').DataTable( {
        ajax: 'php/table.bibliotheque_series.php',
        columns: [
            {data: null, render: function ( data, type, row ) {
                if ( data.website ) {
                return type === 'display'? '<div>' + '<a target="_blank" href="'+ data.website +' ">'+ data.serie + '</a>' + '</div>' : '<a target="_blank" href="'+ data.website +' ">'+ data.serie + '</a>';
                }
                return data.serie;
            }},
            {data: "resume"},
            {data: null, render: function ( data, type, row ) {
                return '<img max-width=50px" height=25px" src="img/series/' + data.serie_id + '" onerror="$(this).hide()"/>';
            } }
        ],

The result is that:
1. the image is saved to the correct place, but without any name (fore example ".png")
2. although the image is saved to the correct place, I get a GET https://XXXXXXXXX/img/series//home/carrarm/test/img/series/.png (when should be used https://XXXXXXXXX/img/series/.png) and logically the following message: Not Found The requested URL was not found on this server."

Any idea of what I should amend for this code to work?
Additionally, what is the advantage to have an image table?

Thanks and regards,

Christophe

allan

Hi Christophe,

The problem you are running into is that the image upload in Editor is async to the rest of the form. When the user selects the file to upload, it is then immediately uploaded. This is done for the case where there is a separate images table so an id reference can be obtained for the file and that value used to refer to the file in the host table.

Your data setup has a slightly different approach whereby you'd need the host row to be created and inserted first, then the file uploaded and put into a location based on the host row's id.

I'm afraid that this is not the approach that Editor takes. A separate files table that you can left join to would be the way to integrate Editor here.

Allan

carrarachristophe

Understood Allan, thanks. It works like a charm, including the dbClean method.
I am just wondering how it could work in case the pictures are stored on the server without using the datatable, but rather through FTP.
By definition, the path would not be stored in the database, so the code would not work.

allan

If you are FTP uploading the images there are a few options depending on the exact setup.

If you want to continue using meta information in the database, you would have a script that runs periodically (a cron job perhaps) to scan the upload directory and insert the meta data into the database table. That would also allow the HTTP upload to continue operating if you wanted to have that option for users as well.

Another option is to drop the database files table entirely and just reference the files by their names in the host table. Then you know the path and the file name, so can render it out. It would mean you don't have meta information such as content type, file size, etc available for left joining, but that might not be an issue for you.

Allan