Drag & Drop for entire page

[strtob]

Hi,

This tool is great!

How can I configure the plugin to use it for using the entire page as drag&drop zone?

Best regards, Toby

[kartik-v]

Just configure the input widget to fit the entire page. Employ CSS styling to get the input widget to fill the entire page.

[strtob]

Thanks kartik, I have no clue how to resize the dropzone to the entire site or to div with content (e.g. gridview), I've only found this solution https://codepen.io/nekobog/pen/JjoZvBm but I think this doesn't fit :-/ can you give a hint?

[kartik-v]

You need to style it by CSS - and figure out as per your app need... rough example ... however this will make the preview zone full page.

For example your markup can be such:

<div class="krajee-wrapper">
    <input name="your-file-input" type="file" class="file">
</div>

You can make the widget fit full screen using below CSS:

/* fill the screen */
.krajee-wrapper {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/* adjust your file preview and drop zones */
.krajee-wrapper .file-preview {
    border: none;
}

.krajee-wrapper .file-drop-zone {
    margin: 0;
    height: 100vh; /* or 90vh - adjust as per your navbars/footers on your page */
} 

[strtob]

Thanks a lot Kartik for you quick repsonse!

I'm new to this, I've tried some hours, here is my solution:

view:

$this->registerCss("
    #entirePageDragDrop 
        { 
        background-color: #B8B8B8;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99999;
        opacity: 0.75; 
        visibility: hidden;

        }

    .file-drop-zone, .file-input, .file-preview  
    {
        height: 100%;
    }

    .file-input 
    {
        z-index: 999999;
    }

");
?>

<div id="entirePageDragDrop">   
    <?php
    echo
    \kartik\widgets\FileInput::widget([
        'name' => 'files[]',
        'id' => 'com-drop-zone', //uniqid(),
        'options' => [
            'multiple' => true,
        ],
        'pluginOptions' => [
            'showPreview' => true,
            'showCaption' => false,
            'showRemove' => false,
            'showUpload' => false,
            'showCancel' => false,
            'showBrowse' => false,
            'showRemove' => true,
            'showUploadedThumbs' => false,
            'initialPreview' => false,
            'initialPreviewConfig' => false,
            'initialPreviewAsData' => true,
            'overwriteInitial' => true,
            'deleteUrl' => false,
            'previewFileType' => ['any',
                'showUpload' => true,
                'showRemove' => false,
            ],...

js:

$('#layout-wrapper').on({

    'dragover dragenter': function (e) {
        e.preventDefault();
        e.stopPropagation();

        console.log('something is dragging counter');
        $('#entirePageDragDrop').css('visibility', 'visible');

        return false;

    }

});

$('#entirePageDragDrop').on({

    'dragleave drop': function (e) {

        console.log('something was dropped. counter ');
        $(this).css('visibility', 'hidden');

    },
});

Next step might be a upload bar, message etc.