Upload image without image table

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