diff --git a/src/components/index/indexConsole/commands/fetchCommands/Album/Create.js b/src/components/index/indexConsole/commands/fetchCommands/Album/Create.js
index 8682893..32c2dad 100644
--- a/src/components/index/indexConsole/commands/fetchCommands/Album/Create.js
+++ b/src/components/index/indexConsole/commands/fetchCommands/Album/Create.js
@@ -14,7 +14,8 @@ const AlbumCreate = ({
const [message, setMessage] = useState('')
const [image, setImage] = useState('')
- const [imageBlob, setImageBlob] = useState('Drop/Click for upload album image...')
+ const [imageInfo, setImageInfo] = useState('Drop/Click\nfor upload album image...')
+ const [progress, setProgress] = useState('')
const titleInput = React.createRef()
const descriptionInput = React.createRef()
@@ -86,7 +87,7 @@ const AlbumCreate = ({
setConsoleHistory( consoleHistory + message + '\n' )
setComponentVisible( false )
setImage('')
- setImageBlob('Drop/Click for upload album image...')
+ setImageInfo('Drop/Click\nfor upload album image...')
setMessage('')
}
}
@@ -103,7 +104,8 @@ const AlbumCreate = ({
event.preventDefault()
let data = event.target.files[0]
setImage( await toBase64( data ) )
- setImageBlob( data.name )
+ uploadListener( data )
+ setImageInfos(data.name, data.size)
}
const onLoadFileDrop = async ( event ) => {
@@ -111,7 +113,30 @@ const AlbumCreate = ({
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' )
+ uploadListener( data )
+ setImageInfos(data.name, data.size)
+ }
+
+ const uploadListener = async ( data ) => {
+ let progress = new Response(data).arrayBuffer()
+ console.log(progress)
+ await uploadProgressBar( progress, data.size )
+ }
+
+ const uploadProgressBar = async ( progress, size ) => {
+ let percent = progress / size
+ setProgress('upload image [____________________]')
+ setProgress( progress + '#' + percent)
+ }
+
+ const setImageInfos = (name, size) => {
+ setImageInfo(
+ 'name: "'
+ + name
+ + '"\nsize: '
+ + (Math.round(size / 100 + 'e-2') / 100 )
+ + ' MB'
+ )
}
return (
@@ -133,7 +158,7 @@ const AlbumCreate = ({
ref={ descriptionInput }
/>
- { imageBlob }
+ { imageInfo }
onLoadFile(event) }
/>