CKFinder 3 (not with CKEditor) How can I get a user in the image editing area with certain sizes to select or load an image

Question

I looked through all the questions related to Ckfinder and nothing helps. This is the new CKFinder 3.

We have cms (PHP). On regular content pages, ckeditor and ckfinder work together. I don't care what sizes they use.

We also provide the user with the ability to upload images for the slider on a separate page. These images must be of a certain width and height. I'm stuck here. After the user has uploaded or selected an image, I would like to automatically bring the image to the image editing area with the set cropping size.

I am using a popup example. I noticed that the supplied code only works with a button outside the form tag. As soon as I translate it in the form, it does not display the file name.

<button id="ckfinder-popup-1" class="button-a button-a-background">Browse Server</button>    
<input id="ckfinder-input-1" type="text" name="file1" class="form-control">

<script type="text/javascript">
    var button1 = document.getElementById( 'ckfinder-popup-1' );
    button1.onclick = function() {
        selectFileWithCKFinder( 'ckfinder-input-1' );
    };
    function selectFileWithCKFinder( elementId ) {
        CKFinder.popup( {
            chooseFiles: true,
            width: 800,
            height: 600,
            dialogMinHeight: 400,
             resourceType: 'Images',
            plugins: ['StatusBarInfo'],
            onInit: function( finder ) {
                finder.on( 'files:choose', function( evt ) {
                    var file = evt.data.files.first();
                    var output = document.getElementById( elementId );
                    output.value = file.getUrl();
                } );

                finder.on( 'file:choose:resizedImage', function( evt ) {
                    var output = document.getElementById( elementId );
                    output.value = evt.data.resizedUrl;
                } );                
            }
        } );
    }


</script>

Answer 1

        <script src="editor/ckeditor/ckeditor.js"></script>
        <script type="text/javascript" src="editor/ckfinder/ckfinder.js"></script>

<form action="" method="get">

		<input id="ckfinder-input-1" name="resimyolu" type="text" style="width:60%">
		<button id="ckfinder-popup-1" class="button-a button-a-background">Browse Server</button>

</form>
<script>
	var button1 = document.getElementById( 'ckfinder-popup-1' );
	var button2 = document.getElementById( 'ckfinder-popup-2' );

	button1.onclick = function() {
		selectFileWithCKFinder( 'ckfinder-input-1' );
	};
	button2.onclick = function() {
		selectFileWithCKFinder( 'ckfinder-input-2' );
	};

	function selectFileWithCKFinder( elementId ) {
		CKFinder.popup( {
			chooseFiles: true,
			width: 800,
			height: 600,
			onInit: function( finder ) {
				finder.on( 'files:choose', function( evt ) {
					var file = evt.data.files.first();
					var output = document.getElementById( elementId );
					output.value = file.getUrl();
				} );

				finder.on( 'file:choose:resizedImage', function( evt ) {
					var output = document.getElementById( elementId );
					output.value = evt.data.resizedUrl;
				} );
			}
		} );
	}
</script>

Run code