WallyJ's avatar

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('/');

    }

}
0 likes
0 replies

Please or to participate in this conversation.