CODEWITHSUNDEEP
reactjsfirebase-storage
test
test

Reputation: 2466

Firebase storage upload on React submit form

Is it possible upload files on submit? Not sure how to combine these two: Now it has to uploads file first then update name or creates new name without file on submit.

<form ref={(input) => { this.locationForm = input }} onSubmit={this.createLocation} >
    <input ref={(input) => this.name = input} type="text" name="name" placeholder="Name" />
    <input ref={(input) => this.file = input} type="file" onChange={this.uploadFile} id="fileButton" />
</form>

and

   createLocation(event) {
        event.preventDefault();

        const store = {
            ['store']: {
                name: this.name.value,
                desc: this.desc.value
            }
        }

        this.props.setStore(store);
    }

    uploadFile(e) {
        const file = e.target.files[0];
        const storageRef = firebase.storage().ref('test/' + file.name);

        storageRef.put(file);
    }

setStore calls redux function and updates.

Upvotes: 0

Views: 773

Answers (1)

Parameshwar Ande
Parameshwar Ande

Reputation: 817

Yes it is possible, do the following.

<Input type="file" id="my-file-id" /> // no need of on change listener

Then in the createLocation function 

var myFile= document.getElementById('my-file-id').files[0];
const storageRef = firebase.storage().ref('test/' + myFile.name);

storageRef.put(file);

Note: The component "Input", I have imported from 'antd', I feel above works with "input" component of jsx also if not , do the following

npm install antd // for node modules

In you component 

import { Input } from 'antd'

Upvotes: 1

Related Questions