tabacitu
commented
7 years ago Hi @skys215 ,
You're right :-) There are a few big technical problems to solve for such a field, but I think in the end we'll be able to add something that would scratch that itch. My thoughts were (and you can do that for your project now):
- on create, an upload_multiple field (would only let you pick the files, not crop/resize them)
- on edit, a dropzone field (which would let you reorder, crop, etc)
Here's a work-in-progress dropzone field (only with reorder right now). Maybe it will be of some use to you or someone, until we have something for this.
Cheers!
In your setup() method:
$this->crud->addField([
'name' => 'images',
'type' => 'dropzone',
'upload_route' => 'upload_images',
'reorder_route' => 'reorder_images',
'delete_route' => 'delete_image',
'disk' => 'app_public', // local disk where images will be uploaded
'mimes' => 'image/*', //allowed mime types separated by comma. eg. image/*, application/*, etc
'filesize' => 5, // maximum file size in MB
], 'update');In your dropzone.blade.php:
<div class="form-group col-md-12">
<strong>{{ $field['label'] }}</strong> <br>
<div class="dropzone sortable dz-clickable sortable">
<div class="dz-message">
Drop files here or click to upload.
</div>
@if ($entry->{$field['name']})
@foreach($entry->{$field['name']} as $key => $image)
<div class="dz-preview" data-id="{{ $key }}" data-path="{{ $image }}">
<img class="dropzone-thumbnail" src={{ asset($image) }}>
<a class="dz-remove" href="javascript:void(0);" data-remove="{{ $key }}" data-path="{{ $image }}">Remove file</a>
</div>
@endforeach
@endif
</div>
</div>
@if ($crud->checkIfFieldIsFirstOfItsType($field, $fields))
{{-- FIELD EXTRA CSS --}}
{{-- push things in the after_styles section --}}
@push('crud_fields_styles')
<style>
.sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; overflow: auto;}
/*border: 1px SOLID #000;*/
.sortable { margin: 3px 3px 3px 0; padding: 1px; float: left; /*width: 120px; height: 120px;*/ vertical-align:bottom; text-align: center; }
.dropzone-thumbnail { width: 115px; cursor: move!important; }
.dz-preview { cursor: move !important; }
</style>
@endpush
{{-- FIELD EXTRA JS --}}
{{-- push things in the after_scripts section --}}
@push('crud_fields_scripts')
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">
<script>
Dropzone.autoDiscover = false;
var uploaded = false;
var dropzone = new Dropzone(".dropzone", {
url: "{{ url($crud->route.'/'.$entry->id.'/'.$field['upload_route']) }}",
paramName: '{{ $field['name'] }}',
uploadMultiple: true,
acceptedFiles: "{{ $field['mimes'] }}",
addRemoveLinks: true,
// autoProcessQueue: false,
maxFilesize: {{ $field['filesize'] }},
parallelUploads: 10,
// previewTemplate:
sending: function(file, xhr, formData) {
formData.append("_token", $('[name=_token').val());
formData.append("id", {{ $entry->id }});
},
error: function(file, response) {
console.log('error');
console.log(file)
console.log(response)
$(file.previewElement).find('.dz-error-message').remove();
$(file.previewElement).remove();
$(function(){
new PNotify({
title: file.name+" was not uploaded!",
text: response,
type: "error",
icon: false
});
});
},
success : function(file, status) {
console.log('success');
// clear the images in the dropzone
$('.dropzone').empty();
// repopulate the dropzone with all images (new and old)
$.each(status.images, function(key, image_path) {
$('.dropzone').append('<div class="dz-preview" data-id="'+key+'" data-path="'+image_path+'"><img class="dropzone-thumbnail" src="{{ url('') }}/'+image_path+'" /><a class="dz-remove" href="javascript:void(0);" data-remove="'+key+'" data-path="'+image_path+'">Remove file</a></div>');
});
var notification_type;
if (status.success) {
notification_type = 'success';
} else {
notification_type = 'error';
}
new PNotify({
text: status.message,
type: notification_type,
icon: false
});
}
});
// Reorder images
$(".dropzone").sortable({
items: '.dz-preview',
cursor: 'move',
opacity: 0.5,
containment: '.dropzone',
distance: 20,
scroll: true,
tolerance: 'pointer',
stop: function (event, ui) {
// console.log('sortable stop');
var image_order = [];
$('.dz-preview').each(function() {
var image_id = $(this).data('id');
var image_path = $(this).data('path');
image_order.push({ id: image_id, path: image_path});
});
// console.log(image_order);
$.ajax({
url: '{{ url($crud->route.'/'.$entry->id.'/'.$field['reorder_route']) }}',
type: 'POST',
data: {
order: image_order,
entry_id: {{ $entry->id }}
},
})
.done(function(status) {
var notification_type;
if (status.success) {
notification_type = 'success';
} else {
notification_type = 'error';
}
new PNotify({
text: status.message,
type: notification_type,
icon: false
});
});
}
});
// Delete image
$(document).on('click', '.dz-remove', function () {
var image_id = $(this).data('remove');
var image_path = $(this).data('path');
$.ajax({
url: '{{ url($crud->route.'/'.$entry->id.'/'.$field['delete_route']) }}',
type: 'POST',
data: {
entry_id: {{ $entry->id }},
image_id: image_id,
image_path: image_path
},
})
.done(function(status) {
var notification_type;
if (status.success) {
notification_type = 'success';
$('div.dz-preview[data-id="'+image_id+'"]').remove();
} else {
notification_type = 'error';
}
new PNotify({
text: status.message,
type: notification_type,
icon: false
});
});
});
</script>
@endpush
@endif
In your model:
public function updateImageOrder($order) {
$new_images_attribute = [];
foreach ($order as $key => $image) {
$new_images_attribute[$image['id']] = $image['path'];
}
$new_images_attribute = json_encode($new_images_attribute);
$this->attributes['images'] = $new_images_attribute;
$this->save();
}
public function removeImage($image_id, $image_path, $disk)
{
// delete the image from the db
$images = json_encode(array_except($this->images, [$image_id]));
$this->attributes['images'] = $images;
$this->save();
// delete the image from the folder
if (Storage::disk($disk)->has($image_path)) {
Storage::disk($disk)->delete($image_path);
}
}
public function setImagesAttribute($value)
{
$attribute_name = "images";
$disk = "app_public";
$destination_path = "assets/hotels";
$this->uploadMultipleFilesToDisk($value, $attribute_name, $disk, $destination_path);
}AjaxUploadImagesTrait.php (you need to use this on your EntityCrudController:
<?php namespace App\Http\Controllers\Admin\Traits;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Http\Request;
trait AjaxUploadImagesTrait {
/**
* Upload an image with AJAX to the disk
* and store its path in the database.
*
* @param Request $request [description]
* @return [type] [description]
*/
public function ajaxUploadImages(Request $request)
{
$entry = $this->crud->getEntry($request->input('id'));
$attribute_name = $entry->upload_multiple['attribute'];
$files = $request->file($attribute_name);
$file_count = count($files);
$entry->{$attribute_name} = $files;
$entry->save();
return response()->json([
'success' => true,
'message' => ($file_count>1)?'Uploaded '.$file_count.' images.':'Image uploaded',
'images' => $entry->{$attribute_name}
]);
}
/**
* Save new images order from sortable object.
*
* @param Request $request [description]
* @return [type] [description]
*/
public function ajaxReorderImages(Request $request)
{
$entry = $this->crud->getEntry($request->input('entry_id'));
$entry->updateImageOrder($request->input('order'));
return response()->json([
'success' => true,
'message' => 'New image order saved.'
]);
}
/**
* Delete an image from the database and disk.
*
* @param Request $request [description]
* @return [type] [description]
*/
public function ajaxDeleteImage(Request $request)
{
$image_id = $request->input('image_id');
$image_path = $request->input('image_path');
$entry = $this->crud->getEntry($request->input('entry_id'));
$disk = $this->crud->getFields('update', $entry->id)['images']['disk'];
// delete the image from the db
$entry->removeImage($image_id, $image_path, $disk);
return response()->json([
'success' => true,
'message' => 'Image deleted.'
]);
}
}
skys215
b8ne
lukechanning
eleven59
NBZ4live
Jimmylet
ihsanberahim
galvaodev
ymihaylov
lloy0076
Gaspertrix
lachogenchev
egerb
ducho
prodixx
eduardoarandah
ashek1412
Hi, I see image field and multiple file upload field. But it seems that there's no multiple image upload field. It should work like the combination of image field and multiple file upload filed, a multiple file upload field with the image preview. Hope to see this field type added in the project. Thanks.