How to Save Image in local Folder in React And Return Path

Question

I have a react app where I get the item data from an API. and I have image Up loader that Can Save image As byte Array and Send It to Back end. but I want to save Image in any Local folder (Such as assets) and Return Path,Then I Send Path to Back End, Please guide me What to Do?

//#region onChangeMainImage
    onChangeMainImage(e) {
        const file = e.target.files[0];
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onload = (event) => {
                resolve(event.target.result);
                this.setState({ MainImage: event.target.result.split(',')[1] })
                var type = event.target.result.split('/')[1];

                this.setState({ filetype: type.split(';')[0] })
                //this.setState({file:event.target.result})
            };
            reader.onerror = (err) => {
                reject(err);
            };
            reader.readAsDataURL(file);
        });

    };
    //#endregion

   <FormGroup title="MainImage" >

                                            <input
                                                name="Avatar"
                                                id="img"
                                                type="file"
                                                class="form-control"
                                                onChange={e => this.onChangeMainImage(e)}
                                            ></input>

                                        </FormGroup>

Answer 1

Writing to local is not possible in web

I want to save Image in any Local folder

This would be a huge security risk if websites could write to your local device with JS so it is not possible outside of a node environment.

But if you are making a desktop app with electron or something, you have to use the node environment and the node library "file system" fs, to save files.