Unverified Commit 7a1785c8 authored by Carlos Azuaje's avatar Carlos Azuaje
Browse files

finish refactor


Signed-off-by: default avatarCarlos Azuaje <carlosjazzc1@gmail.com>
parent c3fc4867
......@@ -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;
}
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
});
};
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>
);
}
......
export const CHUNK_SIZE = 64 * 1024;
export const io = require('socket.io-client')('http://' + document.domain + ':' + location.port);
var io = require('socket.io-client')('http://' + document.domain + ':' + location.port);
io.on('connect', () => {
io.emit('connected');
});
export default io;
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment