upgrade create CRUD for uploading files && upgrade database records view

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

@@ -13,26 +13,23 @@ const AlbumCreate = ({
 }) => {
 
     const [message, setMessage] = useState('')
+    const [image, setImage] = useState('')
     
     const titleInput = React.createRef()
     const descriptionInput = React.createRef()
-    const imageInput = React.createRef()
 
-    const create = (event) => {
+    const create = async (event) => {
         event.preventDefault()
         let title = titleInput.current.value
         let description = descriptionInput.current.value
-        let image = imageInput.current.value
-        if ( title !== '' && description !== '' && image !== '' ) {
-            createFetch(title, description, image)
-        } if ( description !== '' && image !== '' ) {
+        if ( title !== '' && description !== '' ) {
+            await createFetch(title, description)
+        } if ( description === '') {
             document.getElementById('descriptionAlbumInput').focus()
-        } if ( image !== '' ) {
-            document.getElementById('imageAlbumInput').focus()
         }
     }
 
-    const createFetch = async (title, description, image) => {
+    const createFetch = async (title, description) => {
         let album = {
             user_id: user.id,
             title: title,
@@ -73,6 +70,20 @@ 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 ) {
@@ -84,7 +95,6 @@ const AlbumCreate = ({
 
                 titleInput.current.value = ''
                 descriptionInput.current.value = ''
-                imageInput.current.value = ''
 
                 setConsoleHistory( consoleHistory + message + '\n' )
                 setComponentVisible( false )
@@ -95,7 +105,7 @@ const AlbumCreate = ({
 
     return (
         <div>
-            <form onSubmit={ create }>
+            <form onSubmit={ event => create(event) }>
                 title:
                 <input 
                         id='titleAlbumInput'
@@ -111,8 +121,9 @@ const AlbumCreate = ({
                 image:
                 <input 
                         id='imageAlbumInput'
+                        type='file'
                         autoComplete='off'
-                        ref={ imageInput }
+                        onChange={ event => onLoadImage(event) }
                     /> <br />
                 <button type='submit' />
             </form>

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

@@ -15,17 +15,6 @@ const AlbumGetAll = ({
     const [message, setMessage] = useState('')
     const [oneRequest, setOne ] = useState(false)
 
-    const mapAlbumsToString = (albums) => {
-        let list = '.albums\n'
-        for (let i = 0; i < albums.length; i++) {
-            list += '├── ' + albums[i].title + '\n'
-                 + '│       ├── id: ' + albums[i].id + '\n'
-                 + '│       ├── user id: ' + albums[i].user_id + '\n'
-                 + '│       └── url: ' + albums[i].url_code + '\n'
-        }
-        return list
-    }
-
     useEffect(
         () => {
             if (componentVisible && oneRequest === false) {
@@ -51,6 +40,23 @@ const AlbumGetAll = ({
         }
     )
 
+    const mapAlbumsToString = (albums) => {
+        let list = '.albums\n'
+        for (let i = 0; i < albums.length; i++) {
+            if ( i !== albums.length - 1 )
+                list += '├── ' + albums[i].title + '\n'
+                      + '│       ├── id: ' + albums[i].id + '\n'
+                      + '│       ├── user id: ' + albums[i].user_id + '\n'
+                      + '│       └── url: ' + albums[i].url_code + '\n'
+            else
+                list += '└── ' + albums[i].title + '\n'
+                      + '          ├── id: ' + albums[i].id + '\n'
+                      + '          ├── user id: ' + albums[i].user_id + '\n'
+                      + '          └── url: ' + albums[i].url_code + '\n'
+        }
+        return list
+    }
+
     return (
         <div>