Add upload button and drag&drop modal

resources/scripts/components/server/files/FileManagerContainer.tsx

@@ -16,6 +16,7 @@ import useServer from '@/plugins/useServer';
 import { ServerContext } from '@/state/server';
 import useFileManagerSwr from '@/plugins/useFileManagerSwr';
 import MassActionsBar from '@/components/server/files/MassActionsBar';
+import UploadButton from '@/components/server/files/UploadButton';
 
 const sortFiles = (files: FileObject[]): FileObject[] => {
     return files.sort((a, b) => a.name.localeCompare(b.name))
@@ -79,6 +80,7 @@ export default () => {
                         <Can action={'file.create'}>
                             <div css={tw`flex justify-end mt-8`}>
                                 <NewDirectoryButton/>
+                                <UploadButton/>
                                 <Button
                                     // @ts-ignore
                                     as={Link}

resources/scripts/components/server/files/UploadButton.tsx

@@ -0,0 +1,60 @@
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
+import React, { useState } from 'react';
+import styled from 'styled-components/macro';
+
+const ModalMask = styled.div`
+    ${tw`fixed z-50 overflow-auto flex w-full inset-0`};
+    background: rgba(0, 0, 0, 0.70);
+`;
+
+export default () => {
+    const [ visible, setVisible ] = useState(false);
+
+    const onDragOver = (e: any) => {
+        e.preventDefault();
+
+        //console.log(e);
+    };
+
+    const onDragEnter = (e: any) => {
+        e.preventDefault();
+
+        //console.log(e);
+    };
+
+    const onDragLeave = (e: any) => {
+        e.preventDefault();
+
+        //console.log(e);
+    };
+
+    const onFileDrop = (e: any) => {
+        e.preventDefault();
+
+        const files = e.dataTransfer.files;
+        console.log(files);
+    };
+
+    return (
+        <>
+            {
+                visible ?
+                    <ModalMask>
+                        <div css={tw`w-full flex items-center justify-center`} onDragOver={onDragOver} onDragEnter={onDragEnter} onDragLeave={onDragLeave} onDrop={onFileDrop}>
+                            <div css={tw`w-full md:w-3/4 lg:w-3/5 xl:w-2/5 flex flex-col items-center border-2 border-dashed border-neutral-400 rounded py-8 px-12 mx-8 md:mx-0`}>
+                                <img src={'/assets/svgs/file_upload.svg'} css={tw`h-auto w-full select-none`}/>
+                                <p css={tw`text-lg text-neutral-200 font-normal mt-8`}>Drag and drop files to upload</p>
+                            </div>
+                        </div>
+                    </ModalMask>
+                    :
+                    null
+            }
+
+            <Button css={tw`mr-2`} onClick={() => setVisible(true)}>
+                Upload
+            </Button>
+        </>
+    );
+};