I have a reactjs application. It is kind of like a text editor. A user can upload files and read/edit the file. So I was able to read the txt file that the user uploads by using this:
displayFile = (i) => {
this.setState({currentFileIndex: i})
const reader = new FileReader();
reader.onload = async (e) => {
const text = e.target.result;
this.setState({fileText: text})
};
reader.readAsText(this.state.files[i].file);
};
onFileSelected = (event) => {
var file = event.target.value;
var startIndex =
file.indexOf("\\") >= 0 ? file.lastIndexOf("\\") : file.lastIndexOf("/");
var filename = file.substring(startIndex);
if (filename.indexOf("\\") === 0 || filename.indexOf("/") === 0) {
filename = filename.substring(1);
}
const filesArray = this.state.files;
filesArray.push({ fileName: filename, file: event.target.files[0] });
this.setState({ files: filesArray });
};
The input html is:
<input
type="file"
accept=".glm, .csv, .player, .txt"
id="Editor_Screen_Upload_Input"
style={{ display: "none" }}
onChange={this.onFileSelected}
/>
So, how can write and save in state if the user edits a file?
Related
I have input type="file" and I need to read the event.target.files.
I tried
<input type="file" ng-change="readFile($event)" />
readFile = (e) => {
const file = e.target.files[0];
console.log('file', file);
if (!file) {
return;
}
const reader = new FileReader();
reader.onload = async (evt) => {
const xmlData: string = evt.target.result;
const annotManager = this.wvInstance.annotManager;
const ann = await annotManager.importAnnotations(xmlData);
};
reader.readAsText(file);
}
but in file I don't get File object instnace after the file is selected
I need to get something like this, but I don't get it with this example
How can I do this ?
I'm using "Input" to get files in a react app. I'm able to get a blob using readAsDataURL() but it's stripping out the file name and is replacing with "Data". When I log the blob I'm getting "data:image/jpeg;base64,/9j/4QAYRXhpZgAAS..." - "data" being the name that displays.
const handleGetFiles = (e) => {
const reader = new FileReader();
reader.readAsDataURL(e);
reader.onload = () => {
fileCollection((fileCollection) => [...fileCollection, {id: index, data: reader.result}]);
}
}
<Input
accept="image/*,video/*"
id="contained-button-file"
multiple type="file"
onChange={e => handleGetFiles(e)}
/>
Is there a way to use URL.createObjectURL(file) instead? I can't get that to work either.
The filename that you're looking for doesn't come from the FileReader API, but rather from the input element's files property.
You can expose the file in 2 ways from React:
Through a ref:
const Input = () => {
const inputEl = React.useRef();
const handleGetFiles = () => {
alert(inputEl.current.files[0].name)
};
return (
<input
...
onChange={handleGetFiles}
ref={inputEl}
/>
);
}
Through the event target
const Input = () => {
const handleGetFiles = (e) => {
alert(e.target.files[0].name)
};
return (
<input
...
onChange={handleGetFiles}
/>
);
}
I am developing a course platform using ReactJS. When the user finishes a course he can download the PDF file.
I need a version of the same file as an image (png or jpg), but I haven't found any way to do that. Can someone help me?
To generate the PDF certificate I'm using the lib: React-PDF.
This is my code to generate pdf file:
<PDFDownloadLink
document={
<Certificate course={course} name={name} date={today()} />
}
fileName="somename.pdf"
>
{({ blob, url, loading, error }) => {
return loading ? 'Loading document...' : 'Download now!';
}}
</PDFDownloadLink>
I created a helper function: convertPdfToImages which takes in the pdf file and returns an array of images encoded in base64, using the pdfjs package.
npm install pdfjs-dist -S
const PDFJS = require("pdfjs-dist/webpack");
const readFileData = (file) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (e) => {
resolve(e.target.result);
};
reader.onerror = (err) => {
reject(err);
};
reader.readAsDataURL(file);
});
};
//param: file -> the input file (e.g. event.target.files[0])
//return: images -> an array of images encoded in base64
const convertPdfToImages = async (file) => {
const images = [];
const data = await readFileData(file);
const pdf = await PDFJS.getDocument(data).promise;
const canvas = document.createElement("canvas");
for (let i = 0; i < pdf.numPages; i++) {
const page = await pdf.getPage(i + 1);
const viewport = page.getViewport({ scale: 1 });
const context = canvas.getContext("2d");
canvas.height = viewport.height;
canvas.width = viewport.width;
await page.render({ canvasContext: context, viewport: viewport }).promise;
images.append(canvas.toDataURL());
}
canvas.remove();
return images;
}
Please use this library
https://www.npmjs.com/package/react-pdf-to-image
It is pretty straight forward. It will return the list of images (each page in the pdf as one image)
import React from 'react';
import {PDFtoIMG} from 'react-pdf-to-image';
import file from './pdf-sample.pdf';
const App = () =>
<div>
<PDFtoIMG file={file}>
{({pages}) => {
if (!pages.length) return 'Loading...';
return pages.map((page, index)=>
<img key={index} src={page}/>
);
}}
</PDFtoIMG>
</div>
export default App;
if you want to just download the each pdf page as image instead of component please follow below code
import PDFJS from 'pdfjs-dist/webpack';
this is the dependency library for react-pdf-to-image. Then read the pdf file(I'm giving base64 as input)
PDFJS.getDocument(blob).promise.then(pdf => {
const pages = [];
this.pdf = pdf;
for (let i = 0; i < this.pdf.numPages; i++) {
this.getPage(i + 1).then(result => {
// the result is the base 64 version of image
});
}
})
after reading each page, read each page as image from getPage method as below
getPage = (num) => {
return new Promise((resolve, reject) => {
this.pdf.getPage(num).then(page => {
const scale = "1.5";
const viewport = page.getViewport({
scale: scale
});
const canvas = document.createElement('canvas');
const canvasContext = canvas.getContext('2d');
canvas.height = viewport.height || viewport.viewBox[3]; /* viewport.height is NaN */
canvas.width = viewport.width || viewport.viewBox[2]; /* viewport.width is also NaN */
page.render({
canvasContext, viewport
}).promise.then((res) => {
resolve(canvas.toDataURL());
})
})
})
}
I have tried solutions from
How to use FileReader in React?
and gotten the same error as my code.
I'm trying to use the FileReader() in a react component.
class Home extends Component {
onChange(e) {
let files = e.target.files;
console.log(files);
let reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = e => {
console.log(e.target.result);
};
}
render() {
return (
<div onSubmit={this.onFormSubmit}>
<h1>Upload File Here</h1>
<input type="file" name="file" onChange={e => this.onChange(e)} />
</div>
export default Home;
console.log(files) returns the uploaded file (if I run it without the rest of the onChange() code). When I run the whole thing, I get an error message of:
Error: cannot read as File: {} on reader.readAsDataURL(files[0]);
I'm following this tutorial exactly and it is working fine for them. Any thoughts?!
https://www.youtube.com/watch?v=sp9r6hSWH_o&t=50s
Try this
Change
onChange(e) {
let files = e.target.files;
console.log(files);
let reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = e => {
console.log(e.target.result);
};
}
To
onChange = e => {
let files = e.target.files;
console.log(files);
let reader = new FileReader();
reader.onload = r => {
console.log(r.target.result);
};
reader.readAsDataURL(files[0]);
}
File Button is not showing the jpeg image after uploading in locally
Below is the code i have written in react js...
categoryImageArray = [];
getCategoryImageLink = (e) => {
let files = e.target.files;
let reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = (e) => {
categoryImageArray.push(e.target.result);
}
}
and below is the JSX code
**IMG SRC**
<div>
<img src = { "'" + categoryImageArray[0] + "'" } />
</div>
Input File
<input type="file" onChange = { this.getCategoryImageLink } />
You have to use state for this,set the value of categoryImageArray in state and change it's value in getCategoryImageLink function
Try this.
getCategoryImageLink = (e) => {
let files = e.target.files;
let reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = (e) => {
this.setState({categoryImageArray: ...this.state.categoryImageArray,e.target.result});
}
}