SQLSTATE[22007]: Invalid datetime format: 1292 Truncated incorrect DOUBLE value: 'C:\OSPanel\userdata\temp\upload\php6194.tmp'

[DzonyBB]

Good afternoon. Laravel Backpack V6.0. I'm trying to do a one-to-many upload of multiple files into a related table. But I keep getting an error . Can anyone suggest how to solve this problem? Thank you in advance.
Error:SQLSTATE[22007]: Invalid datetime format: 1292 Truncated incorrect DOUBLE value: 'C:\OSPanel\userdata\temp\upload\php6194.tmp'
update product_imagesSETproduct_id= 303,product_images.updated_at= 2023 -07 -27 09: 38: 28 WHEREid IN (C: \ OSPanel \ userdata \ temp \ upload \ php6194.tmp)

App\Models\Product :

`namespace App\Models;
use Backpack\CRUD\app\Models\Traits\CrudTrait;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
use CrudTrait;
use HasFactory;

protected $fillable=['sku','name','short_description','price'];
public function images()
{
    return $this->hasMany(ProductImage::class,'product_id')
        ->where('status', true)
        ->orderBy('order');
}}`

App\Models\ProductImage :

`namespace App\Models;
use Backpack\CRUD\app\Models\Traits\CrudTrait;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class ProductImage extends Model
{
use CrudTrait;
use HasFactory;

protected $fillable = [
    'path', 'width', 'height', 'status', 'order', 'product_id', 

];
public function product()
{
return $this->belongsTo(Product::class);
}}`

App\Http\Controllers\Admin\ProductCrudController;
`namespace App\Http\Controllers\Admin;

use App\Http\Requests\ProductRequest;
use Backpack\CRUD\app\Http\Controllers\CrudController;
use Backpack\CRUD\app\Library\CrudPanel\CrudPanelFacade as CRUD;

class ProductCrudController extends CrudController
{
use \Backpack\CRUD\app\Http\Controllers\Operations\ListOperation;
use \Backpack\CRUD\app\Http\Controllers\Operations\CreateOperation;
use \Backpack\CRUD\app\Http\Controllers\Operations\UpdateOperation;
use \Backpack\CRUD\app\Http\Controllers\Operations\DeleteOperation;
use \Backpack\CRUD\app\Http\Controllers\Operations\ShowOperation;

public function setup()
{
    CRUD::setModel(\App\Models\Product::class);
    CRUD::setRoute(config('backpack.base.route_prefix') . '/product');
    CRUD::setEntityNameStrings('product', 'products');
}
protected function setupCreateOperation()
{
    CRUD::field('id');
    CRUD::field('sku');
    CRUD::field('name');
    CRUD::field('short_description')->type('ckeditor');
    CRUD::field('description')->type('ckeditor');
    CRUD::field('price');
    CRUD::field('discount');
    CRUD::addField([
            'name' => 'images',
            'type' => 'upload_multiple',
            'entity'=>'images',
            'withFiles' => [
                'path' => 'images',
            ],
    ]);
    CRUD::field('uri');
    CRUD::field('brand_id');
    CRUD::field('balance');
    CRUD::field('status');
    CRUD::field('created_at');
    CRUD::field('updated_at');

// dd(request());
}
}`

[christmex]

Hi @DzonyBB ,

based on your error we can assume this is caused by

1. Invalid Datetime Format
2. Truncated Data

Try this

1. What if you remove the lines that contain or just comment on that code

    CRUD::field('created_at');
    CRUD::field('updated_at');

let just the laravel magic handle the created_at and the updated_at, I don't know why you define them in your setupCreateOperation please tell me the reason so I can understand what you want to achieve with defining them, nothing wrong with that, but I am just curious why 🙏.

2. if you use upload_multiple type it will use your current table, not the relation table which is product_images, it will save to image column inside your products table. Also what I know from backpack documentation is

shows a multiple file input to the user and stores the values as a JSON array in the database.

Make sure the db column can hold the amount of text this field will have. 
For example, for MySQL, VARCHAR(255) might not be enough all the time (for 3+ files), 
so it's better to go with TEXT. Make sure you're using a big column type in your migration or db.

If you found any issues, let us know mate

Little Note: Please use syntax highlighter like when you paste your code here, so other users can have a good view to read your code 💪

Cheers.

[DzonyBB]

1. Что, если вы удалите строки, содержащие этот код, или просто прокомментируете его? CRUD::field('created_at'); CRUD::field('updated_at');
   Did not help

2,if you use upload_multiple type it will use your current table, not the relation table which
I did, but it only loads an array with file names into the database, and does not load or display any images. That is, now I myself need to process this array? As I understand it, everything in a backpack is very complicated and there is no automation, and you have to do everything yourself?

3. Little Note: Please use syntax highlighter like when you paste your code here, so other users can have a good view to read your code 💪
   Sorry, but this is my first time on the forum, and I don't know how to do it yet.

Thanks for responding and trying to help. But unfortunately the issue remains unresolved.

[DzonyBB]

[christmex]

@DzonyBB bases on the screen shot that you send, if you click the link that appears, what happen? Is it shows your image?

[DzonyBB]

@DzonyBB bases on the screen shot that you send, if you click the link that appears, what happen? Is it shows your image?

Yes, it shows. But I would like it to show images, for example, as in this screenshot.

[DzonyBB]

If you have been uploading images with multiple_upload . can you show me a screenshot of what it looks like for you, thank you

[christmex]

@DzonyBB Yes, the result same as you, I think if you want to show the image in that way, you should create it by yourself because backpack doesn't provide that, it's a unique case. but I think it would be great soon if we have that kind of look.

for now, you can overwrite the upload_multiple field using these steps:

1. publish the upload_multiple field with this command

php artisan backpack:field upload_multiple --from=upload_multiple

2. Edit the blade file, change all of the code with this code
   the file path-> resources/views/vendor/backpack/crud/fields/upload_multiple.blade.php

@php
    $field['wrapper'] = $field['wrapper'] ?? $field['wrapperAttributes'] ?? [];
    $field['wrapper']['data-init-function'] = $field['wrapper']['data-init-function'] ?? 'bpFieldInitUploadMultipleElement';
    $field['wrapper']['data-field-name'] = $field['wrapper']['data-field-name'] ?? $field['name'];
@endphp

{{-- upload multiple input --}}
@include('crud::fields.inc.wrapper_start')
    <label>{!! $field['label'] !!}</label>
    @include('crud::fields.inc.translatable_icon')

	{{-- Show the file name and a "Clear" button on EDIT form. --}}
	@if (isset($field['value']))
	@php
		if (is_string($field['value'])) {
			$values = json_decode($field['value'], true) ?? [];
		} else {
			$values = $field['value'];
		}
	@endphp
	@if (count($values))
    <div class="well well-sm existing-file">
    	@foreach($values as $key => $file_path)
    		<div class="file-preview">
    			@if (isset($field['temporary']))
					<label class="form-selectgroup-item flex-fill">
						<div class="form-selectgroup-label d-flex align-items-center p-3">
							<div class="form-selectgroup-label-content d-flex align-items-center">
							<span class="avatar me-3" style="background-image: url({{ isset($field['disk'])?asset(\Storage::disk($field['disk'])->temporaryUrl($file_path, Carbon\Carbon::now()->addMinutes($field['temporary']))):asset($file_path) }})"></span>
							<div>
								<div class="font-weight-medium"><a target="_blank" href="{{ isset($field['disk'])?asset(\Storage::disk($field['disk'])->temporaryUrl($file_path, Carbon\Carbon::now()->addMinutes($field['temporary']))):asset($file_path) }}">{{ $file_path }}</a></div>
							</div>
							</div>
						</div>
					</label>
		        @else
					<label class="form-selectgroup-item flex-fill">
						<div class="form-selectgroup-label d-flex align-items-center p-3">
							<div class="form-selectgroup-label-content d-flex align-items-center">
							<span class="avatar me-3" style="background-image: url({{ isset($field['disk'])?asset(\Storage::disk($field['disk'])->url($file_path)):asset($file_path) }})"></span>
							<div>
								<div class="font-weight-medium"><a target="_blank" href="{{ isset($field['disk'])?asset(\Storage::disk($field['disk'])->url($file_path)):asset($file_path) }}">{{ $file_path }}</a></div>
							</div>
							</div>
						</div>
					</label>
		        @endif
		    	<a href="#" class="btn btn-light btn-sm float-right file-clear-button" title="Clear file" data-filename="{{ $file_path }}"><i class="la la-remove"></i></a>
		    	<div class="clearfix"></div>
	    	</div>
    	@endforeach
    </div>
    @endif
    @endif
	{{-- Show the file picker on CREATE form. --}}
	<input name="{{ $field['name'] }}[]" type="hidden" value="">
	<div class="backstrap-file">
		<input
	        type="file"
	        name="{{ $field['name'] }}[]"
	        @include('crud::fields.inc.attributes', ['default_class' => 'file_input backstrap-file-input'])
	        multiple
	    >
        <label class="backstrap-file-label" for="customFile"></label>
    </div>

    {{-- HINT --}}
    @if (isset($field['hint']))
        <p class="help-block">{!! $field['hint'] !!}</p>
    @endif

	@include('crud::fields.inc.wrapper_end')

{{-- ########################################## --}}
{{-- Extra CSS and JS for this particular field --}}
	@push('crud_fields_styles')
	@bassetBlock('backpack/crud/fields/upload-multiple-field.css')
	<style type="text/css">
		.existing-file {
			border: 1px solid rgba(0,40,100,.12);
			border-radius: 5px;
			padding-left: 10px;
			vertical-align: middle;
		}
		.existing-file a {
			padding-top: 5px;
			display: inline-block;
			font-size: 0.9em;
		}
		.backstrap-file {
			position: relative;
			display: inline-block;
			width: 100%;
			height: calc(1.5em + 0.75rem + 2px);
			margin-bottom: 0;
		}

		.backstrap-file-input {
			position: relative;
			z-index: 2;
			width: 100%;
			height: calc(1.5em + 0.75rem + 2px);
			margin: 0;
			opacity: 0;
		}

		.backstrap-file-input:focus ~ .backstrap-file-label {
			border-color: #acc5ea;
			box-shadow: 0 0 0 0rem rgba(70, 127, 208, 0.25);
		}

		.backstrap-file-input:disabled ~ .backstrap-file-label {
			background-color: #e4e7ea;
		}

		.backstrap-file-input:lang(en) ~ .backstrap-file-label::after {
			content: "Browse";
		}

		.backstrap-file-input ~ .backstrap-file-label[data-browse]::after {
			content: attr(data-browse);
		}

		.backstrap-file-label {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			z-index: 1;
			height: calc(1.5em + 0.75rem + 2px);
			padding: 0.375rem 0.75rem;
			font-weight: 400;
			line-height: 1.5;
			color: #5c6873;
			background-color: #fff;
			border: 1px solid #e4e7ea;
			border-radius: 0.25rem;
			font-weight: 400!important;
		}

		.backstrap-file-label::after {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			z-index: 3;
			display: block;
			height: calc(1.5em + 0.75rem);
			padding: 0.375rem 0.75rem;
			line-height: 1.5;
			color: #5c6873;
			content: "Browse";
			background-color: #f0f3f9;
			border-left: inherit;
			border-radius: 0 0.25rem 0.25rem 0;
		}
	</style>
	@endBassetBlock
	@endpush

    @push('crud_fields_scripts')
    	@bassetBlock('backpack/crud/fields/upload-multiple-field.js')
        <script>
        	function bpFieldInitUploadMultipleElement(element) {
        		var fieldName = element.attr('data-field-name');
        		var clearFileButton = element.find(".file-clear-button");
        		var fileInput = element.find("input[type=file]");
        		var inputLabel = element.find("label.backstrap-file-label");

				if(fileInput.attr('data-row-number')) {
					let selectedFiles = [];
					fileInput.parent().siblings('.existing-file').find('a.file-clear-button').each(function(item) {
						selectedFiles.push($(this).data('filename'));
					});

					$('<input type="hidden" class="order-uploads" name="_order_'+fieldName+'" value="'+selectedFiles+'">').insertAfter(fileInput);

					var observer = new MutationObserver(function(mutations) {
						mutations.forEach(function(mutation) {
							if(mutation.attributeName == 'data-row-number') {
								let field = $(mutation.target);

								fieldOrder = field.siblings('input[name="'+mutation.target.getAttribute('name').slice(0,-2)+'"]')
								fieldOrder.attr('name', '_order_'+mutation.target.getAttribute('name').slice(0,-2));
								let selectedFiles = [];
								fieldOrder.parent().siblings('.existing-file').find('a.file-clear-button').each(function(item) {
									selectedFiles.push($(this).data('filename'));
								});
								fieldOrder.val(selectedFiles);

								fieldClear = field.siblings('.clear-files');
								fieldClear.attr('name', 'clear_'+mutation.target.getAttribute('name'));
							}
						});
					});

					observer.observe(fileInput[0], {
						attributes: true,
					});
				}

		        clearFileButton.click(function(e) {
		        	e.preventDefault();
		        	var container = $(this).parent().parent();
		        	var parent = $(this).parent();
		        	// remove the filename and button
		        	parent.remove();

					if(fileInput.attr('data-row-number')) {
						let selectedFiles = [];
						fileInput.parent().siblings('.existing-file').find('a.file-clear-button').each(function(item) {
							selectedFiles.push($(this).data('filename'));
						});
						if(selectedFiles.length > 0) {
							fileInput.siblings('.order-uploads').val(selectedFiles);
						} else {
							fileInput.siblings('.order-uploads').remove();
						}
					}
		        	// if the file container is empty, remove it
		        	if ($.trim(container.html())=='') {
						//$('<input type="hidden" name="'+fieldName+'[]" value="">').insertBefore(fileInput);
		        		container.remove();
		        	}
		        	$("<input type='hidden' class='clear-files' name='clear_"+fieldName+"[]' value='"+$(this).data('filename')+"'>").insertAfter(fileInput);
		        });

		        fileInput.change(function() {
	                inputLabel.html("{{trans('backpack::crud.upload_multiple_files_selected')}}");
					let selectedFiles = [];

					Array.from($(this)[0].files).forEach(file => {
						selectedFiles.push({name: file.name, type: file.type})
					});

					element.find('input').first().val(JSON.stringify(selectedFiles)).trigger('change');
		        	// remove the hidden input, so that the setXAttribute method is no longer triggered
					$(this).next("input[type=hidden]:not([name='clear_"+fieldName+"[]'])").remove();
		        });

				element.find('input').on('CrudField:disable', function(e) {
					element.children('.backstrap-file').find('input').prop('disabled', 'disabled');
					element.children('.existing-file').find('.file-preview').each(function(i, el) {

						let $deleteButton = $(el).find('a.file-clear-button');

						if(deleteButton.length > 0) {
							$deleteButton.on('click.prevent', function(e) {
								e.stopImmediatePropagation();
								return false;
							});
							// make the event we just registered, the first to be triggered
							$._data($deleteButton.get(0), "events").click.reverse();
						}
					});
				});

				element.on('CrudField:enable', function(e) {
					element.children('.backstrap-file').find('input').removeAttr('disabled');
					element.children('.existing-file').find('.file-preview').each(function(i, el) {
						$(el).find('a.file-clear-button').unbind('click.prevent');
					});
				});
        	}
        </script>
        @endBassetBlock
    @endpush

Make sure you use tabler as your theme

Result

That's all, if you found any issues, let me know

Cheers.

[christmex]

@DzonyBB also if you want to show the image in your list table in your way, you can make your custom columns for that.

Reference
Field : https://backpackforlaravel.com/docs/6.x/crud-fields#overwriting-default-field-types-1
Column : https://backpackforlaravel.com/docs/6.x/crud-columns#overwriting-default-column-types-1

Another concern, if you overwrite your multiple_upload like what I show you at the top, it just works for the image file upload, because I use img tag for the best experience again create your own custom field 😉

[DzonyBB]

Many thanks for your help and patience. And especially for the sample code you wrote. I will certainly deal with him, and then unsubscribe. I just started to study backpack , so I just understand, but there is not enough info in the documentation, we could briefly write that the download is not automated, and so on. Earlier, I used a different admin panel, it's a little easier there. And now I decided to study the backpack. Thanks again for your help and patience.

[christmex]

@DzonyBB you're welcome my friend, so far backpack is the great one for build admin panel fast I love it.

Have a great day, also if it's already solved the problem please make the answer as answered and close the discussion, thank you.

[pxpm]

Thanks @christmex for your help 🙏

You exceed yourself in every answer, very appreciated 🥳

I don't know if you are a PRO user, but if you are, we have https://backpackforlaravel.com/docs/6.x/crud-fields#dropzone-pro that looks very similar to what you want to achieve.

You can see it in the online demo: https://demo.backpackforlaravel.com/admin/monster/create#uploads (uploads are disabled in demo ofc)

Cheers