Unverified Commit 6da7ea3b authored by Carlos Azuaje's avatar Carlos Azuaje
Browse files

working in fix this shit


Signed-off-by: default avatarCarlos Azuaje <carlosjazzc1@gmail.com>
parent f0a30058
{
"presets": [
"env",
"react",
"stage-0"
"@babel/preset-env",
"@babel/preset-react"
],"plugins": [
[
"@babel/plugin-proposal-class-properties"
]
]
}
\ No newline at end of file
}
......@@ -15,7 +15,7 @@ greenlet = "*"
flask = "*"
markupsafe = "*"
werkzeug = "*"
"jinja2" = "*"
jinja2 = "*"
[dev-packages]
......
html {
font-size: 16px;
font-size: 16px;
font-family: Arial;
}
.Drop-input {
width: 100%;
height: 60px;
background-color: #ddd;
text-align: center;
padding-top: 40px;
width: 100%;
height: 60px;
background-color: #ddd;
text-align: center;
padding-top: 40px;
}
.Div-files .File:first-child {
border-top: 2px solid #37989291;
border-top: 2px solid #37989291;
}
.File {
margin-top: 1em;
margin-bottom: 1em;
border-bottom: 2px solid #37989291;
padding: .7em 0;
margin-top: 1em;
margin-bottom: 1em;
border-bottom: 2px solid #37989291;
padding: 0.7em 0;
}
.File-type {
margin-left: 2em;
margin-left: 2em;
}
.Div-Button {
text-align: center;
margin-top: 2em;
margin-bottom: 2em;
text-align: center;
margin-top: 2em;
margin-bottom: 2em;
}
.Div-Button button {
padding: 1em;
background: #87bcde;
border: none;
box-shadow: 0px 1px 15px 1px #0000004f;
cursor: pointer;
padding: 1em;
background: #87bcde;
border: none;
box-shadow: 0px 1px 15px 1px #0000004f;
cursor: pointer;
}
.File-button-remove {
padding: .4em;
background: #de3a36;
border: none;
box-shadow: 0px 1px 5px 1px rgba(208, 113, 113, 0.99);
cursor: pointer;
float: right;
color: white;
margin: 0 0 1em 0;
}
\ No newline at end of file
padding: 0.4em;
background: #de3a36;
border: none;
box-shadow: 0px 1px 5px 1px rgba(208, 113, 113, 0.99);
cursor: pointer;
float: right;
color: white;
margin: 0 0 1em 0;
}
import React, { Component } from 'react';
import DropFileInput from './components/DropFileInput';
import './App.css';
import React from "react";
import DropFileInput from "./components/DropFileInput";
import "./App.css";
class App extends Component {
render() {
return (
<div className="App">
<DropFileInput />
</div>
);
}
}
const App = () => {
return <DropFileInput />;
};
export default App;
import io from '../helpers/io'
import io from "../helpers/io";
export const readFileChunk = (ctx, offset, length) => {
let end_offset = offset + length;
if (end_offset > ctx.props.file.size) {
alert('HOLA')
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, ctx.props.file.size /*end_offset*/));
};
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));
}
export const onReadSuccess = (ctx, offset, length, data) => {
// Read success callback
if (ctx.state.done) return;
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});
}
};
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;
function onReadError(ctx, message) {
// Read error callback
ctx.setState({
progress: {
...ctx.state.progress,
color: '#ff000073',
percent: 100
},
ctx.setState({
progress: {
...ctx.state.progress,
percent: width,
color: color
}
});
invalid: 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) => {
// Read error callback
ctx.setState({
progress: {
...ctx.state.progress,
color: "#ff000073",
percent: 100
},
module.exports = {
readFileChunk,
onReadSuccess,
onReadError
};
\ No newline at end of file
invalid: true
});
};
import React, { Component } from 'react';
import File from './File';
import React from "react";
import File from "./File";
export default class DropFileInput extends Component {
constructor(props) {
super(props);
this.state = {
chunk_size: 64 * 1024,
files: [],
uploading: false
}
}
handlerOnDragOver = event => {
event.preventDefault();
};
handlerOnDrop = event => {
/*
* Prevent add repeat files to state
* Add Files to State
*/
event.preventDefault();
const array_files = [];
for (let i = 0; i < event.dataTransfer.files.length; i++) {
let file = event.dataTransfer.files[i];
if (!this.state.files.map((n) => n.name).includes(file.name)) {
array_files.push(file);
}
}
this.setState({
files: [...this.state.files, ...array_files],
uploading: false
});
};
toggleUpload = () => {
this.setState({uploading: !this.state.uploading})
};
removeFile = (index) => {
this.setState({
files: this.state.files.filter((_, i) => i !== index)
});
};
render() {
let files = this.state.files.map((file, index) => {
return <File file={file}
key={file.name}
chunk_size={this.state.chunk_size}
uploading={this.state.uploading}
clickRemove={this.removeFile.bind(this, index)}
/>
});
return (
<div>
<div className="Drop-input" onDragOver={this.handlerOnDragOver} onDrop={this.handlerOnDrop}>
Drop files here!
</div>
<div className="Div-files">
{files}
</div>
<div className="Div-Button">
<button onClick={this.toggleUpload} disabled={!files.length && true}>
{!this.state.uploading ? 'Upload File' : 'Cancel'}
</button>
</div>
</div>
)
}
}
\ No newline at end of file
/*
Parent component to group all files before upload
*/
const DropFileInput = () => {
const [stateComponent, setStateComponent] = React.useState({
files: [],
uploading: false
});
const handlerOnDragOver = event => {
event.preventDefault();
};
/*
* Add Files to State
* Prevent add repeat files to state
*/
const handlerOnDrop = event => {
event.preventDefault();
const array_files = [];
for (let i = 0; i < event.dataTransfer.files.length; i++) {
let file = event.dataTransfer.files[i];
if (!stateComponent.files.map(n => n.name).includes(file.name)) {
array_files.push(file);
}
}
setStateComponent({
files: [...stateComponent.files, ...array_files],
uploading: false
});
};
const toggleUpload = () => {
setStateComponent({
files: [...stateComponent.files],
uploading: !stateComponent.uploading
});
};
const removeFile = index => {
setStateComponent({
files: stateComponent.files.filter((_, i) => i !== index),
uploading: stateComponent.uploading
});
};
const renderFiles = () => {
return stateComponent.files.map((file, index) => {
return (
<File
file={file}
key={file.name}
uploading={stateComponent.uploading}
clickRemove={() => removeFile(index)}
/>
);
});
};
return (
<div>
<div
className="Drop-input"
onDragOver={handlerOnDragOver}
onDrop={handlerOnDrop}
>
Drop files here!
</div>
<div className="Div-files">{renderFiles()}</div>
<div className="Div-Button">
<button onClick={toggleUpload} disabled={!stateComponent.files.length}>
{!stateComponent.uploading ? "Upload File" : "Cancel"}
</button>
</div>
</div>
);
};
export default DropFileInput;
import React, { PureComponent } from 'react';
import { Line } from 'rc-progress';
import { readFileChunk, onReadSuccess, onReadError } from '../actions';
import io from '../helpers/io';
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;
export default class File extends PureComponent {
constructor(props) {
super(props);
this.state = {
done: false,
invalid: false,
server_filename: '',
progress: {
percent: 0
}
};
this.uploadFile = () => readFileChunk(this, 0, props.chunk_size);
this.onReadError = () => onReadError(this, 'Upload rejected by server');
}
componentWillReceiveProps(nextProps) {
if (nextProps.uploading && !this.state.done && !this.state.invalid) {
io.emit('start-transfer', this.props.file.name, this.props.file.size, ((filename) => {
if (!filename) {
this.onReadError(); // The server rejected the transfer
}
else {
this.setState({server_filename: filename}, () => {
this.uploadFile();
});
}
}).bind(this.props.file));
}
}
render() {
return (
constructor(props) {
super(props);
this.state = {
done: false,
invalid: false,
server_filename: "",
progress: {
percent: 0
}
};
this.uploadFile = () => readFileChunk(this, 0, CHUNK_SIZE);
this.onReadError = () => onReadError(this, "Upload rejected by server");
}
UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.uploading && !this.state.done && !this.state.invalid) {
io.emit(
"start-transfer",
this.props.file.name,
this.props.file.size,
(filename => {
if (!filename) {
this.onReadError(); // The server rejected the transfer
} else {
this.setState({ server_filename: filename }, () => {
this.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">
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>)
}
{ this.props.uploading &&
<Line percent={this.state.progress.percent}
strokeColor={this.state.progress.color}
strokeWidth="1"
strokeLinecap='square'
trailColor="#2fb9e224"/>
}
{ this.state.done && "Done" }
{ this.state.invalid && "Invalid" }
{!this.state.done && (
<button
className="File-button-remove"
onClick={this.props.clickRemove}
>
Remove File
</button>
)}
{this.props.uploading && (
<Line
percent={this.state.progress.percent}
strokeColor={this.state.progress.color}
strokeWidth="1"
strokeLinecap="square"
trailColor="#2fb9e224"
/>
)}
{this.state.done && "Done"}
{this.state.invalid && "Invalid"}
</div>
)
}
}
\ No newline at end of file
);
}
}
var io = require('socket.io-client')('http://' + document.domain + ':' + location.port);
io.on('connect', function() {
io.on('connect', () => {
io.emit('connected');
});
export default io;
\ No newline at end of file
export default io;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById('root'));
\ No newline at end of file
ReactDOM.render(<App />, document.getElementById("root"));
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>File Upload</title>
<title>Upload file with Socket IO</title>
</head>
<body>
<div id="root"></div>
</body>
<script type=text/javascript src="{{url_for('static', filename='javascript/bin/bundle.js') }}"></script>
</html>
\ No newline at end of file
<script src="{{url_for('static', filename='javascript/bin/bundle.js') }}"></script>
</html>