Feb 1, 2024
0
Level 3
FilePond Image Transform only saves one of the thumbnail sizes
Filepond is only saving the "thumbnail_small" version of the uploaded image but not the thumbnail_medium version.
Script on form page:
<script>
document.addEventListener('DOMContentLoaded', function() {
var urlpath = window.location.pathname;
var uploadrequestid = window.location.pathname;
var uploadurl = ("/upload/" + uploadrequestid);
var imageminwidth = "1900";
var imageminheight = "1000";
FilePond.registerPlugin(
FilePondPluginImagePreview,
FilePondPluginFileValidateType,
FilePondPluginImageValidateSize,
FilePondPluginImageTransform
);
const inputElement = document.querySelector('input[type="file"]');
// Create a FilePond instance
const pond = FilePond.create(inputElement, {
acceptedFileTypes: ['image/png', 'image/jpeg'],
fileValidateTypeDetectType: (source, type) =>
new Promise((resolve, reject) => {
// Do custom type detection here and return with promise
resolve(type);
}),
allowImageValidateSize: true,
imageValidateSizeMinWidth: imageminwidth,
imageValidateSizeMinHeight: imageminheight,
imageValidateSizeLabelImageSizeTooSmall: 'Image is too small',
imageValidateSizeLabelExpectedMinSize: 'Minimum size is {minWidth} × {minHeight}',
imageResizeTargetWidth: 300,
imageCropAspectRatio: 1,
imageTransformVariants: {
thumb_medium_: (transforms) => {
transforms.resize = {
size: {
width: 384,
height: 384,
},
};
return transforms;
},
thumb_small_: (transforms) => {
transforms.resize = {
size: {
width: 128,
height: 128,
},
};
return transforms;
},
},
})
// New code to handle error for too many files
pond.onwarning = function() {
var container = pond.element.parentNode;
var error = container.querySelector('p.filepond--warning');
if (!error) {
error = document.createElement('p');
error.className = 'filepond--warning';
error.textContent = 'You added more files than you have remaining for this request. Please try again.';
container.appendChild(error);
}
requestAnimationFrame(function() {
error.dataset.state = 'visible';
});
//clearTimeout(pondTimeout);
//pondTimeout = setTimeout(function() {
// error.dataset.state = 'hidden';
//}, 5000);
};
// Adds warning if too many files
pond.onaddfile = function() {
//clearTimeout(pondTimeout);
var container = pond.element.parentNode;
var error = container.querySelector('p.filepond--warning');
if (error) {
error.dataset.state = 'hidden';
}
};
FilePond.setOptions({
server: {
process: ('/upload' + uploadrequestid),
revert: ('/delete' + uploadrequestid),
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
},
});
});
</script>
Controller code:
<?php
namespace App\Http\Controllers;
use App\Models\Image;
use App\Models\TemporaryImage;
use App\Models\Uploadrequest;
use Illuminate\Support\Facades\Auth;
use App\Models\MembershipLevel;
use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
use App\Models\User;
class StoreImageController extends Controller
{
/**
* Handle the incoming request.
*/
public function show($id)
{
$existingtempimages = TemporaryImage::where('uploadrequestid', $id)->get();
$existingtempimagecount = $existingtempimages->count();
if ($existingtempimagecount > 0) {
foreach($existingtempimages as $existingtempimage){
Storage::deleteDirectory('images/tmp/' . $existingtempimage->folder);
$existingtempimage->delete();
}
}
else {}
$userid = Uploadrequest::where('id', $id);
$membershiplevel = User::find(1)->value('membershiplevel_id');
$imagelimit = MembershipLevel::where('id', $membershiplevel)->value('uploadlimit');
$imageuploadcount = Image::where('uploadrequest_id', $id)->count();
return view('imageform', compact('id', 'imageuploadcount', 'imagelimit'));
}
public function store(Request $request)
{
$correspondingrequestid = $request->input('uploadrequestid');
$temporaryImages = TemporaryImage::where('uploadrequestid', $correspondingrequestid)->get();
foreach($temporaryImages as $temporaryImage){
Storage::copy('images/tmp/'. $temporaryImage->folder . '/' . $temporaryImage->file, 'images/' . $temporaryImage->folder . '/' . $temporaryImage->file);
Image::create([
'uploadrequest_id' => $temporaryImage->uploadrequestid,
'name' => $temporaryImage->file,
'path' => $temporaryImage->folder . '/' . $temporaryImage->file
]);
Storage::deleteDirectory('images/tmp/' . $temporaryImage->folder);
$temporaryImage->delete();
}
return redirect('/');
}
}
Please or to participate in this conversation.