Dealing with big images

@drehimself hi..are you familiar with FilePond and CORS issues and S3? because I am getting a CORS issue when I try to implement this code

pond.files = [
    {
        source: 'https://cdn-my-s3-bucket-east-2.amazonaws.com/public/temp/1638562907.jpg',
    }
];

getting error message:

Access to XMLHttpRequest at 'https://cdn-my-s3-bucket-east-2.amazonaws.com/public/temp/1638562907.jpg' from origin 'http://locasite.local' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

@jlrdw the files are small in size....less than 5Mb. sometimes just 1mb but they logos have highres. I will check on this,

@Snapey thanks. Not issues with file size, I think the issue is with file dimensions. I am looking into Filepond now....

@Snapey it does. The server not happy with memory and get 500. So i added

ini_set('memory_limit', -1 );

but also added some validation for size and dimension.

'logo'    => ['file', 'image', 'max:5000' ,'mimes:jpeg,png', 'dimensions:max_width=8000,max_height=8000'],

@extjac You can upload files of ANY resolution, what matters is the filesize in MB which you are validating at 5MB. But before that, the file has to reach the server and thats where the TWO parameters I mentioned earlier are important. memory_limit is only important if you are trying to manipulate the image in php (eg resize or crop)

@Snapey yes..that is what i am doing

$img->resize(300,300, function( $constraint ) {  $constraint->aspectRatio();   }); 

@extjac better to resize client side. I also use filepond for this.

If you do it at the server then you need to set the TWO settings I mentioned earlier AND increase the memory limit

@Snapey yes...Trying....first time using this....

<input type="file" class="my-pond" name="avatar" id="avatar" data-max-file-size="15MB" data-max-files="1"  />

    FilePond.registerPlugin( FilePondPluginImagePreview, FilePondPluginFileValidateSize, FilePondPluginImageResize, FilePondPluginImageTransform );//FilePondPluginImageEdit
    const inputElement = document.querySelector('input[type="file"]');
    const pond = FilePond.create( inputElement );

    FilePond.setOptions({
        labelIdle : '<span class="filepond--label-action"> Upload logo  </span>',
        server: {
            url : '{{ url("test/upload") }}',
            headers : {
                'X-CSRF-TOKEN' : '{{ csrf_token() }}'
            },
         },
           // imagePreviewMarkupFilter:false,
        //    imagePreviewMarkupShow:falsse,
            allowImageTransform: true, 
            imageResizeTargetWidth : 300,
            imagePreviewHeight:300,
            imageResizeTargetWidth: 300,
            imageCropAspectRatio: 1,
            imageTransformVariants: {
                thumb_medium_: (transforms) => {
                    transforms.resize = {
                        size: {
                            width: 300,
                            height: 300,
                        },
                    };
                    return transforms;
                },
                thumb_small_: (transforms) => {
                    transforms.resize = {
                        size: {
                            width: 150,
                            height: 150,
                        },
                    };
                    return transforms;
                },
            },                         
         
    }); 

    public function upload()
    {

        if( request()->hasFile('avatar') )
        {

            try {

                $file = request()->file('avatar');
                $filename = time().$file->getClientOriginalName();
                $path = 'public/temp/' . $filename;
                //$img = \Image::make($file);
                //make  avatar square
                //$img->fit(300, 300, null,'center');
                //$resource = $img->stream()->detach();/ 
                //$upload = \Storage::disk('s3')->put( $path,  $resource ,  'public' ); 

                $upload = \Storage::disk('s3')->put( $path, file_get_contents($file) ,  'public' );

                return [
                    'success' => true,
                    'path' => env('AWS_S3_ROOT').$path
                ];

            } catch (S3Exception $e) {
                echo $e->getMessage() . "\n";
            }   


        }
    }