Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Krish Moodbidri
flask-react-socketio
Commits
7a1785c8
Unverified
Commit
7a1785c8
authored
Oct 27, 2019
by
Carlos Azuaje
Browse files
finish refactor
Signed-off-by:
Carlos Azuaje
<
carlosjazzc1@gmail.com
>
parent
c3fc4867
Changes
6
Hide whitespace changes
Inline
Side-by-side
app/static/files/.gitkeep
0 → 100644
View file @
7a1785c8
app/static/javascript/src/App.css
View file @
7a1785c8
...
...
@@ -16,14 +16,11 @@ html {
}
.File
{
margin-top
:
1em
;
margin-bottom
:
1em
;
border-bottom
:
2px
solid
#37989291
;
padding
:
0.7em
0
;
}
.File-type
{
margin-left
:
2em
;
display
:
flex
;
align-items
:
center
;
justify-content
:
space-between
;
margin
:
1rem
0
0.5
0
;
padding
:
0.5rem
0
0
0
;
}
.Div-Button
{
...
...
@@ -50,3 +47,15 @@ html {
color
:
white
;
margin
:
0
0
1em
0
;
}
.File
>
span
{
padding-bottom
:
10px
;
display
:
block
;
flex
:
1
;
}
.File
>
span
.state
{
text-align
:
center
;
font-weight
:
bold
;
font-size
:
1.2rem
;
}
app/static/javascript/src/actions/index.js
View file @
7a1785c8
import
io
from
"
../helpers/io
"
;
import
{
io
,
CHUNK_SIZE
}
from
"
../constants
"
;
export
const
readFileChunk
=
(
ctx
,
offset
,
length
)
=>
{
let
end_offset
=
offset
+
length
;
// Starting uploading reading the file
export
const
readFileChunk
=
(
ctx
,
offset
)
=>
{
let
end_offset
=
offset
+
CHUNK_SIZE
;
if
(
end_offset
>
ctx
.
props
.
file
.
size
)
{
alert
(
'
HOLA
'
)
end_offset
=
ctx
.
props
.
file
.
size
};
end_offset
=
ctx
.
props
.
file
.
size
;
}
let
r
=
new
FileReader
();
r
.
onload
=
function
(
file
,
offset
,
length
,
event
)
{
if
(
event
.
target
.
error
!=
null
)
{
...
...
@@ -13,49 +13,45 @@ export const readFileChunk = (ctx, offset, length) => {
}
else
{
onReadSuccess
(
ctx
,
offset
,
length
,
event
.
target
.
result
);
}
}.
bind
(
r
,
ctx
.
props
.
file
,
offset
,
length
);
r
.
readAsArrayBuffer
(
ctx
.
props
.
file
.
slice
(
offset
,
ctx
.
props
.
file
.
size
/*
end_offset
*/
));
}.
bind
(
r
,
ctx
.
props
.
file
,
offset
,
CHUNK_SIZE
);
r
.
readAsArrayBuffer
(
ctx
.
props
.
file
.
slice
(
offset
,
end_offset
));
};
// Send chunk
export
const
onReadSuccess
=
(
ctx
,
offset
,
length
,
data
)
=>
{
// Read success callback
if
(
ctx
.
state
.
done
)
return
;
io
.
emit
(
"
write-chunk
"
,
ctx
.
state
.
server_filename
,
offset
,
data
,
function
(
offset
,
ack
)
{
if
(
!
ack
)
{
onReadError
(
ctx
,
"
Transfer aborted by server
"
);
}
}.
bind
(
this
,
offset
)
);
setTimeout
(()
=>
{
alert
(
'
WRITE CHUNK
'
)
io
.
emit
(
"
write-chunk
"
,
ctx
.
state
.
server_filename
,
offset
,
data
,
function
(
offset
,
ack
)
{
if
(
!
ack
)
{
onReadError
(
ctx
,
"
Transfer aborted by server
"
);
}
}.
bind
(
this
,
offset
)
);
},
1000
);
let
end_offset
=
offset
+
length
,
color
=
"
#48bd9666
"
,
width
=
(
end_offset
/
ctx
.
props
.
file
.
size
)
*
100
<
100
?
(
end_offset
/
ctx
.
props
.
file
.
size
)
*
100
:
100
;
const
end_offset
=
offset
+
length
;
const
porcentage
=
(
end_offset
/
ctx
.
props
.
file
.
size
)
*
100
;
const
width
=
porcentage
<
100
?
porcentage
:
100
;
ctx
.
setState
({
progress
:
{
...
ctx
.
state
.
progress
,
percent
:
width
,
color
:
color
ctx
.
setState
(
{
progress
:
{
...
ctx
.
state
.
progress
,
percent
:
width
,
color
:
"
#48bd9666
"
}
},
()
=>
{
if
(
end_offset
<
ctx
.
props
.
file
.
size
)
{
readFileChunk
(
ctx
,
end_offset
,
CHUNK_SIZE
);
}
else
{
ctx
.
setState
({
done
:
true
});
}
}
});
if
(
end_offset
<
ctx
.
props
.
file
.
size
)
{
readFileChunk
(
ctx
,
end_offset
,
ctx
.
props
.
chunk_size
);
}
else
{
ctx
.
setState
({
done
:
true
});
}
);
};
export
const
onReadError
=
(
ctx
,
message
)
=>
{
...
...
@@ -66,7 +62,6 @@ export const onReadError = (ctx, message) => {
color
:
"
#ff000073
"
,
percent
:
100
},
invalid
:
true
});
};
app/static/javascript/src/components/File.js
View file @
7a1785c8
import
React
,
{
PureComponent
}
from
"
react
"
;
import
{
Line
}
from
"
rc-progress
"
;
import
{
readFileChunk
,
onReadError
}
from
"
../actions
"
;
import
io
from
"
../helpers/io
"
;
const
CHUNK_SIZE
=
64
*
1024
;
import
{
io
}
from
"
../constants
"
;
export
default
class
File
extends
PureComponent
{
constructor
(
props
)
{
...
...
@@ -18,7 +16,7 @@ export default class File extends PureComponent {
}
};
this
.
uploadFile
=
()
=>
readFileChunk
(
this
,
0
,
CHUNK_SIZE
);
this
.
uploadFile
=
()
=>
readFileChunk
(
this
,
0
);
this
.
onReadError
=
()
=>
onReadError
(
this
,
"
Upload rejected by server
"
);
}
...
...
@@ -43,20 +41,26 @@ export default class File extends PureComponent {
render
()
{
return
(
<
div
className
=
"
File
"
>
<
span
className
=
"
File-name
"
>
Name
:
{
this
.
props
.
file
.
name
}
<
/span
>
<
span
className
=
"
File-type
"
>
Type
:
{
this
.
props
.
file
.
type
||
"
unknown
"
}
<
/span
>
<
span
className
=
"
File-type
"
>
Size
:
{
this
.
props
.
file
.
size
}
<
/span
>
{
!
this
.
state
.
done
&&
(
<
button
className
=
"
File-button-remove
"
onClick
=
{
this
.
props
.
clickRemove
}
>
Remove
File
<
/button
>
)}
<
div
>
<
div
className
=
"
File
"
>
<
span
className
=
"
File-name
"
>
Name
:
{
this
.
props
.
file
.
name
}
<
/span
>
<
span
className
=
"
File-type
"
>
Type
:
{
this
.
props
.
file
.
type
||
"
unknown
"
}
<
/span
>
<
span
className
=
"
File-type
"
>
Size
:
{
this
.
props
.
file
.
size
}
<
/span
>
{
!
this
.
state
.
done
&&
(
<
button
className
=
"
File-button-remove
"
onClick
=
{
this
.
props
.
clickRemove
}
>
Remove
File
<
/button
>
)}
<
span
className
=
'
state
'
>
{
this
.
state
.
done
&&
"
Done
"
}
{
this
.
state
.
invalid
&&
"
Invalid
"
}
<
/span
>
<
/div
>
{
this
.
props
.
uploading
&&
(
<
Line
percent
=
{
this
.
state
.
progress
.
percent
}
...
...
@@ -66,8 +70,6 @@ export default class File extends PureComponent {
trailColor
=
"
#2fb9e224
"
/>
)}
{
this
.
state
.
done
&&
"
Done
"
}
{
this
.
state
.
invalid
&&
"
Invalid
"
}
<
/div
>
);
}
...
...
app/static/javascript/src/constants.js
0 → 100644
View file @
7a1785c8
export
const
CHUNK_SIZE
=
64
*
1024
;
export
const
io
=
require
(
'
socket.io-client
'
)(
'
http://
'
+
document
.
domain
+
'
:
'
+
location
.
port
);
app/static/javascript/src/helpers/io.js
deleted
100644 → 0
View file @
c3fc4867
var
io
=
require
(
'
socket.io-client
'
)(
'
http://
'
+
document
.
domain
+
'
:
'
+
location
.
port
);
io
.
on
(
'
connect
'
,
()
=>
{
io
.
emit
(
'
connected
'
);
});
export
default
io
;
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment