upgrade file uploader + change general SCSS

src/components/index/indexConsole/commands/fetchCommands/Album/Create.js

@@ -14,6 +14,7 @@ const AlbumCreate = ({
 
     const [message, setMessage] = useState('')
     const [image, setImage] = useState('')
+    const [imageBlob, setImageBlob] = useState('Drop/Click for upload album image...')
     
     const titleInput = React.createRef()
     const descriptionInput = React.createRef()
@@ -54,9 +55,9 @@ const AlbumCreate = ({
             'Q', 'W', 'X', 'S', 'q', 'w', 'x', 's'
         ]
         code +=  
-             + hash[ randomInt(7, 15) ] 
-             + hash[ randomInt(7, 15) ] 
-             + hash[ randomInt(7, 15) ] 
+             + hash[ randomInt(7, 14) ] 
+             + hash[ randomInt(7, 14) ] 
+             + hash[ randomInt(7, 14) ] 
              + hash[ randomInt(0, 7) ] 
              + hash[ randomInt(0, 7) ]
              + hash[ randomInt(0, 7) ]
@@ -70,20 +71,6 @@ const AlbumCreate = ({
         return min + Math.floor((max - min) * Math.random())
     }
     
-    const toBase64 = ( file ) => new Promise( (resolve, reject) => {
-        let fileReader = new FileReader()
-        fileReader.readAsDataURL( file )
-        fileReader.onload = () => resolve( fileReader.result )
-        fileReader.onerror = error => reject( error )
-    })
-
-    const onLoadImage = async ( event ) => {
-        event.preventDefault()
-        try {
-            setImage( await toBase64( event.target.files[0] ) )
-        } catch {}
-    }
-    
     useEffect( 
         () => {
             if ( componentVisible ) {
@@ -98,14 +85,41 @@ const AlbumCreate = ({
 
                 setConsoleHistory( consoleHistory + message + '\n' )
                 setComponentVisible( false )
+                setImage('')
+                setImageBlob('Drop/Click for upload album image...')
                 setMessage('')
             }
         }
     )
 
+    const toBase64 = ( file ) => new Promise( (resolve, reject) => {
+        let fileReader = new FileReader()
+        fileReader.readAsDataURL( file )
+        fileReader.onload = () => resolve( fileReader.result )
+        fileReader.onerror = error => reject( error )
+    })
+
+    const onLoadFile = async ( event ) => {
+        event.preventDefault()
+        let data = event.target.files[0]
+        setImage( await toBase64( data ) )
+        setImageBlob( data.name )
+    }
+
+    const onLoadFileDrop = async ( event ) => {
+        event.preventDefault()
+        event.persist()
+        let data = event.dataTransfer.files[0]
+        setImage( await toBase64( data ) )
+        setImageBlob( 'name: "' + data.name + '"\nsize: ' + (Math.round(data.size / 100 + 'e-2') / 100 ) + ' MB' )
+    }
+
     return (
-        <div>
-            <form onSubmit={ event => create(event) }>
+        <div
+            onDrop={ event => onLoadFileDrop(event) }
+            >
+            <form 
+                onSubmit={ event => create(event) }>
                 title:
                 <input 
                         id='titleAlbumInput'
@@ -118,12 +132,15 @@ const AlbumCreate = ({
                         autoComplete='off'
                         ref={ descriptionInput }
                     /> <br />
-                image:
-                <input 
+                <pre style={ {marginTop: '35px', marginLeft: '40px'} }>
+                    { imageBlob }
+                </pre>
+                <input  style={ {marginTop: '-55px'} }
                         id='imageAlbumInput'
+                        className='uploadInput'
                         type='file'
                         autoComplete='off'
-                        onChange={ event => onLoadImage(event) }
+                        onChange={ event => onLoadFile(event) }
                     /> <br />
                 <button type='submit' />
             </form>

src/styles/general.scss

@@ -65,11 +65,24 @@ body {
         font-size: 16px;
         border: 0px;
         margin-left: 5px;
+        margin-top: 10px;
     }
     input:focus{
         outline: none;
     }
 
+    .uploadInput {
+        width: 0px !important;
+        height: 0px !important;
+        padding-top: 70px;
+        padding-left: 400px;
+        margin-left: 0px;
+        color: rgba(172,36,36,1);
+        font-family: Ubuntu;
+        border: dashed 2px rgba(172,36,36,1);
+        overflow: hidden;
+    }
+
     pre {
         margin: 0px;
         font-family: Ubuntu;