import { useState } from "react";
/**
* # MY ACCOUNT GOOGLE PLAY:
* @see {@link https://play.google.com/store/apps/developer?id=dzino Google Play}
*/
export default function PrivatePage(props) {
const [image, setImage] = useState(null);
const [createObjectURL, setCreateObjectURL] = useState(null);
const uploadToClient = (event) => {
if (event.target.files && event.target.files[0]) {
const i = event.target.files[0];
setImage(i);
setCreateObjectURL(URL.createObjectURL(i));
}
};
const uploadToServer = async (event) => {
const body = new FormData();
body.append("file", image);
const response = await fetch("/api/file", {
method: "POST",
body
});
};
return (
<div>
<div>
<img src={createObjectURL} />
<h4>Select Image</h4>
<input type="file" name="myImage" onChange={uploadToClient} />
<button
className="btn btn-primary"
type="submit"
onClick={uploadToServer}
>
Send to server
</button>
</div>
</div>
);
}
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component<{}, {}> {
// Uploader component
public path: object = {
removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove',
saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save'
}
public render(): JSX.Element{
return (
<UploaderComponent asyncSettings = {this.path} minFileSize = {10000} maxFileSize= {28400000}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('fileupload'));
useEffect(() => {
// create the preview
const objectUrl = URL.createObjectURL(selectedFile)
setPreview(objectUrl)
// free memory when ever this component is unmounted
return () => URL.revokeObjectURL(objectUrl)
}, [selectedFile])