Commit 2a74bcba authored by charlyjazz's avatar charlyjazz
Browse files

Prevent click upload button when not exist files

parent 3ca74185
......@@ -4,17 +4,17 @@ import './App.css';
class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
constructor(props) {
super(props);
}
render() {
return (
<div className="App">
<DropFileInput />
</div>
);
}
);
}
}
export default App;
......@@ -2,69 +2,69 @@ import io from '../helpers/io'
function readFileChunk (ctx, offset, length) {
let end_offset = offset + length;
if (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) {
onReadError(ctx, 'Error in readFileChunk');
}
else {
onReadSuccess(ctx, offset, length, event.target.result);
}
}.bind(r, ctx.props.file, offset, length);
r.readAsArrayBuffer(ctx.props.file.slice(offset, end_offset));
let end_offset = offset + length;
if (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) {
onReadError(ctx, 'Error in readFileChunk');
}
else {
onReadSuccess(ctx, offset, length, event.target.result);
}
}.bind(r, ctx.props.file, offset, length);
r.readAsArrayBuffer(ctx.props.file.slice(offset, end_offset));
}
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));
let end_offset = offset + length,
color = '#48bd9666',
width = ((end_offset / ctx.props.file.size) * 100) < 100
? (end_offset / ctx.props.file.size) * 100
: 100;
ctx.setState({
progress: {
...ctx.state.progress,
percent: width,
color: color
}
});
if (end_offset < ctx.props.file.size) {
readFileChunk(ctx, end_offset, ctx.props.chunk_size);
}
else {
ctx.setState({done: true});
}
// 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));
let end_offset = offset + length,
color = '#48bd9666',
width = ((end_offset / ctx.props.file.size) * 100) < 100
? (end_offset / ctx.props.file.size) * 100
: 100;
ctx.setState({
progress: {
...ctx.state.progress,
percent: width,
color: color
}
});
if (end_offset < ctx.props.file.size) {
readFileChunk(ctx, end_offset, ctx.props.chunk_size);
}
else {
ctx.setState({done: true});
}
};
function onReadError(ctx, message) {
// Read error callback
ctx.setState({
progress: {
...ctx.state.progress,
color: '#ff000073',
percent: 100
}
});
ctx.setState({done: true});
// Read error callback
ctx.setState({
progress: {
...ctx.state.progress,
color: '#ff000073',
percent: 100
}
});
ctx.setState({done: true});
}
module.exports = {
readFileChunk,
onReadSuccess,
onReadError
readFileChunk,
onReadSuccess,
onReadError
};
\ No newline at end of file
......@@ -20,21 +20,25 @@ export default class DropFileInput extends Component {
event.preventDefault();
for(let i = 0; i < event.dataTransfer.files.length; i++) {
this.setState({
files: [...this.state.files, ...[event.dataTransfer.files[i]]]
})
files: [...this.state.files, ...[event.dataTransfer.files[i]]]
});
}
this.setState({uploading: false})
};
toggleUpload = () => {
this.setState({uploading: !this.state.uploading})
};
render() {
let files = this.state.files.map((file, index) => {
return <File file={file}
key={index}
chunk_size={this.state.chunk_size}
uploading={this.state.uploading}/>
key={index}
chunk_size={this.state.chunk_size}
uploading={this.state.uploading}
/>
});
return (
......@@ -46,7 +50,7 @@ export default class DropFileInput extends Component {
{files}
</div>
<div className="Div-Button">
<button onClick={this.toggleUpload}>
<button onClick={this.toggleUpload} disabled={!files.length && true}>
{!this.state.uploading ? 'Upload File' : 'Cancel'}
</button>
</div>
......
......@@ -5,55 +5,55 @@ import io from '../helpers/io'
export default class File extends Component {
constructor(props) {
super(props);
this.state = {
uploading: props.uploading,
done: false,
server_filename: '',
progress: {
percent: 0
}
};
this.uploadFile = () => readFileChunk(this, 0, props.chunk_size);
this.onReadError = () => onReadError(this, 'Upload rejected by server');
}
componentWillReceiveProps(nextProps) {
const that = this;
if (nextProps.uploading && !this.state.done) {
io.emit('start-transfer', this.props.file.name, this.props.file.size, function(filename) {
if (!filename) {
// The server rejected the transfer
that.onReadError();
}
else {
that.setState({server_filename: filename}, () => {
that.uploadFile();
});
}
}.bind(this.props.file));
}
}
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.props.uploading &&
<Line percent={this.state.progress.percent}
strokeColor={this.state.progress.color}
strokeWidth="1"
strokeLinecap='square'
trailColor="#2fb9e224"/>
}
{ this.state.done && "Done"}
</div>
)
}
constructor(props) {
super(props);
this.state = {
uploading: props.uploading,
done: false,
server_filename: '',
progress: {
percent: 0
}
};
this.uploadFile = () => readFileChunk(this, 0, props.chunk_size);
this.onReadError = () => onReadError(this, 'Upload rejected by server');
}
componentWillReceiveProps(nextProps) {
const that = this;
if (nextProps.uploading && !this.state.done) {
io.emit('start-transfer', this.props.file.name, this.props.file.size, function(filename) {
if (!filename) {
// The server rejected the transfer
that.onReadError();
}
else {
that.setState({server_filename: filename}, () => {
that.uploadFile();
});
}
}.bind(this.props.file));
}
}
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.props.uploading &&
<Line percent={this.state.progress.percent}
strokeColor={this.state.progress.color}
strokeWidth="1"
strokeLinecap='square'
trailColor="#2fb9e224"/>
}
{ this.state.done && "Done"}
</div>
)
}
}
......@@ -3,24 +3,24 @@ var path = require('path');
const ENTRY_DIR = path.resolve(__dirname, 'app/static/javascript/src');
var config = {
entry: ENTRY_DIR + '/index.js',
output: {
path: path.resolve(__dirname, 'app/static/javascript/bin'),
filename: 'bundle.js'
},
module : {
loaders : [
{
test : /\.js?/,
include : ENTRY_DIR,
loader : 'babel-loader'
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
entry: ENTRY_DIR + '/index.js',
output: {
path: path.resolve(__dirname, 'app/static/javascript/bin'),
filename: 'bundle.js'
},
module : {
loaders : [
{
test : /\.js?/,
include : ENTRY_DIR,
loader : 'babel-loader'
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
};
module.exports = config;
\ No newline at end of file
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