Skip to content

Commit df38dc2

Browse files
TheoKondakTheoKondak
committed
working on file reader
1 parent 31e67ed commit df38dc2

12 files changed

+191
-54
lines changed

‎.firebase/hosting.cHVibGlj.cache

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
favicon.ico,1582917274786,eae62e993eb980ec8a25058c39d5a51feab118bd2100c4deebb2a9c158ec11f9
2+
index.html,1582988367895,b20e90455080e5f12921bfb487d81fa29527b34b54b2562ba2a55edc5c950723
3+
indexFireBase.html,1582981427408,4b5cd98f4c38db36de3161fdb495da57d61b3480b4bfefd25f7004b9ed334a17
4+
indexOLD.html,1582981872814,0de18c9f47a502084621b7506c5f097565c193858cecd61eb6de9beb2fee0e1e
25
manifest.json,1582917274787,65d4aa66cd0b8963e88196705111adfccad2e8b80725b6a7a82ca8a9a0de8889
3-
index.html,1582981427408,4b5cd98f4c38db36de3161fdb495da57d61b3480b4bfefd25f7004b9ed334a17
4-
indexOLD.html,1582917274787,e2869d5efe9425adfbc0ef806bc18d4521ee10de1f66415356840fe125bc8c95

‎HTML5_Logo_512.png

8.36 KB
Loading

‎firebase.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
"functions": {
66
"predeploy": [
77
"npm --prefix \"$RESOURCE_DIR\" run lint"
8-
]
8+
],
9+
"source": "functions"
910
},
1011
"hosting": {
1112
"public": "public",

‎package-lock.json

Lines changed: 26 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"axios": "^0.19.2",
77
"react": "^16.13.0",
88
"react-dom": "^16.13.0",
9+
"react-dropzone": "^10.2.1",
910
"react-scripts": "^3.4.0",
1011
"react-upload-file": "^2.0.0-beta.6"
1112
},

‎public/index.html

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,41 @@
1919
work correctly both with client-side routing and a non-root public URL.
2020
Learn how to configure a non-root public URL by running `npm run build`.
2121
-->
22-
<title>React App</title>
22+
<title>Aplez Text Editor with React</title>
23+
24+
25+
<style>
26+
.dropzone {
27+
width: 300px;
28+
height: 300px;
29+
margin: 0 auto;
30+
border: 2px dashed #ccc;
31+
color: #ccc;
32+
line-height: 300px;
33+
text-align: center;
34+
}
35+
36+
.dropzone.dragover{
37+
border-color: #000000;
38+
color: #000;
39+
}
40+
</style>
41+
2342
</head>
2443
<body>
2544
<noscript>
2645
You need to enable JavaScript to run this app.
2746
</noscript>
28-
<div id="root"></div>
29-
30-
31-
<p id="load">Firebase SDK Loading&hellip;</p>
47+
<div id="root">
48+
<div class="App"></div>
49+
50+
</div>
51+
52+
53+
</div>
54+
55+
56+
3257
<!--
3358
This HTML file is a template.
3459
If you open it directly in the browser, you will see an empty page.

‎public/indexOLD.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<meta name="theme-color" content="#000000">
7+
<!--
8+
manifest.json provides metadata used when your web app is added to the
9+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10+
-->
11+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13+
<!--
14+
Notice the use of %PUBLIC_URL% in the tags above.
15+
It will be replaced with the URL of the `public` folder during the build.
16+
Only files inside the `public` folder can be referenced from the HTML.
17+
18+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19+
work correctly both with client-side routing and a non-root public URL.
20+
Learn how to configure a non-root public URL by running `npm run build`.
21+
-->
22+
<title>React App</title>
23+
</head>
24+
<body>
25+
<noscript>
26+
You need to enable JavaScript to run this app.
27+
</noscript>
28+
<div id="root"></div>
29+
30+
31+
<p id="load">Firebase SDK Loading&hellip;</p>
32+
<!--
33+
This HTML file is a template.
34+
If you open it directly in the browser, you will see an empty page.
35+
36+
You can add webfonts, meta tags, or analytics to this file.
37+
The build step will place the bundled scripts into the <body> tag.
38+
39+
To begin the development, run `npm start` or `yarn start`.
40+
To create a production bundle, use `npm run build` or `yarn build`.
41+
-->
42+
</body>
43+
</html>

‎src/App.js

Lines changed: 4 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,33 +2,16 @@ import React, { Component } from 'react';
22
import logo from './logo.svg';
33
import './App.css';
44
import Staticelements from './Staticelements/staticelements';
5-
import axios from 'axios';
5+
import Dropzone from './Dropzone/Dropzone';
66

77

8-
class App extends Component {
9-
state = {
10-
selectedFile: null
11-
}
12-
13-
14-
fileSelectedHandler = event => {
15-
this.setState({
16-
selectedFile: event.target.files[0]
17-
})
18-
}
19-
20-
21-
fileUploadHandler = () => {
22-
axios.post('');
23-
}
24-
8+
class App extends Component {
259
render() {
2610
return (
2711
<div className="App">
2812

29-
<Staticelements></Staticelements>
30-
<input type='file' onChange={this.fileSelectedHandler} />
31-
<button onClick={this.fileUploadHandler}>Upload</button>
13+
<Staticelements/>
14+
<Dropzone />
3215
</div>
3316
);
3417
}

‎src/Dropzone/Dropzone.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.containerDropzone{
2+
width: 400px;
3+
height: 100px;
4+
margin: 0 auto;
5+
border: 2px dashed #ccc;
6+
color: #ccc;
7+
line-height: 100px;
8+
text-align: center;
9+
}
10+
11+
.containerDropzone p{
12+
margin: 0;
13+
}
14+
15+
.dropzone.dragover{
16+
border-color: #000000;
17+
color: #000;
18+
}

‎src/Dropzone/Dropzone.js

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
2+
import React, {useCallback} from 'react';
3+
import {useDropzone} from 'react-dropzone';
4+
import './Dropzone.css';
5+
6+
const Dropzone = () => {
7+
8+
9+
// https://jsfiddle.net/0GiS0/nDVYd/
10+
window.onload = function() {
11+
12+
//Check File API support
13+
if (window.File && window.FileList && window.FileReader) {
14+
var filesInput = document.getElementById("files");
15+
16+
filesInput.addEventListener("change", function(event) {
17+
18+
var files = event.target.files; //FileList object
19+
var output = document.getElementById("result");
20+
21+
for (var i = 0; i < files.length; i++) {
22+
var file = files[i];
23+
24+
//Only plain text
25+
if (!file.type.match('plain')) continue;
26+
27+
var picReader = new FileReader();
28+
29+
picReader.addEventListener("load", function(event) {
30+
31+
var textFile = event.target;
32+
33+
var div = document.createElement("div");
34+
35+
div.innerText = textFile.result;
36+
37+
output.insertBefore(div, null);
38+
39+
});
40+
41+
//Read the text file
42+
picReader.readAsText(file);
43+
}
44+
45+
});
46+
}
47+
else {
48+
console.log("Your browser does not support File API");
49+
}
50+
}
51+
52+
return (
53+
<div class='container'>
54+
<label for="files">Select a file: </label>
55+
<input id="files" type="file" />
56+
<output id="result" />
57+
</div>
58+
)
59+
}
60+
61+
export default Dropzone;

‎src/index.js

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,7 @@ import ReactDOM from 'react-dom';
33
import './index.css';
44
import App from './App';
55
import registerServiceWorker from './registerServiceWorker';
6-
import axios from 'axios';
76

87

9-
document.addEventListener('DOMContentLoaded', function() {
10-
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
11-
// // The Firebase SDK is initialized and available here!
12-
//
13-
// firebase.auth().onAuthStateChanged(user => { });
14-
// firebase.database().ref('/path/to/ref').on('value', snapshot => { });
15-
// firebase.messaging().requestPermission().then(() => { });
16-
// firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
17-
//
18-
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
19-
20-
try {
21-
let app = firebase.app();
22-
let features = ['auth', 'database', 'messaging', 'storage'].filter(feature => typeof app[feature] === 'function');
23-
document.getElementById('load').innerHTML = `Firebase SDK loaded with ${features.join(', ')}`;
24-
} catch (e) {
25-
console.error(e);
26-
document.getElementById('load').innerHTML = 'Error loading the Firebase SDK, check the console.';
27-
}
28-
});
29-
308
ReactDOM.render(<App />, document.getElementById('root'));
319
registerServiceWorker();

‎test.txt

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
2+
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
3+
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

0 commit comments

Comments
 (0)