Giovanni Giovanni - 3 years ago 326
React JSX Question

How can I move image files to a folder?

I'm currently working on a ReactJS web app. I'm trying to upload a images to a folder and store the filename in the database so I can work with it.

Everything works so far, but my only blockade is the file transfer to the folder.

Here the ImageUpload component:

import * as React from 'react';

export class ImageUpload extends React.Component<any, any> {
constructor(props : any) {
this.state = { file: '', imagePreviewUrl: '' };

_handleSubmit(e : any) {

// TODO: do something with -> this.state.file

_handleImageChange(e : any) {

let reader = new FileReader();
let file =[0];

reader.onloadend = () => {
file: file,
imagePreviewUrl: reader.result


render() {
let { imagePreviewUrl } = this.state;
let $imagePreview = null;
if (imagePreviewUrl) {
$imagePreview = (<img src={imagePreviewUrl} />);
} else {
$imagePreview = (<div className="previewText">Please select an Image for Preview</div>);

return (
<div className="previewComponent">
<form onSubmit={(e) => this._handleSubmit(e)}>
<input className="fileInput"
onChange={(e) => this._handleImageChange(e)} />
<button className="submitButton"
onClick={(e) => this._handleSubmit(e)}>Upload Image</button>
<div className="imgPreview">

As you can see I'm trying to copy or move the file to C:\Documents. I didn't manage to find the solution to properly move the file to the folder.

Any suggestions?

Answer Source

If you want to upload an image and save it to database, you need an API which will accept FormData, see Form Data Usage, then on the server you will need to save that file to destination. For that you could use ExpressJS and middleware to handle multipart upload - from there you can use NodeJS functions to save file to local destination.

It's not possible to do using only react.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download