Submit is doing when select a file

[luisfuertes]

When i select a file, before i press submit button. File is uploaded and handleUploadSuccess is called.

How can i send file when i click on submit button, instead of when i pick a file?

Thanks!

[sprmn]

Hi Luis, thanks for opening an issue. I'd love to further improve this library.

If I understand you correctly, you don't like it that the uploader starts uploading right after selecting a file, probably because it is a waste of storage if a user selects a different file before submitting the form.

I could provide a property that disables the auto upload and provide a function that allows you to start the upload manually. However, I don't know if it would be very valuable. Most of the time you will need to be sure the file is successfully uploaded before you submit the form.

Anyways, if you disagree, could you provide me a bit more info about your use case?

I am currently working on an update that will allow you to easily render a custom styled button. Are there any other problems / things you'd like to see in the component?

[luisfuertes]

Thanks for answer!

 you don't like it that the uploader starts uploading right after selecting a file, probably because it is a waste of storage if a user selects a different file before submitting the form.

Yes, i want that, upload only on press submit button. Not after select file. And if you could implement multiple upload (two images at same time) that would be fantastic

[ufon]

+1

[sprmn]

Sorry for my late reply, been very busy.

Preventing the auto upload is already possible in the current situation. You can provide your own onChange function to the uploader, to handle file change and call the startUpload function of the uploader upon form submission, with the file as a first argument, to start the upload procedure.

Small example (not tested):

import React, { Component } from 'react';
import { render } from 'react-dom';
import firebase from 'firebase';
import config from './firebase-config.json'; // provide your firebase credentials in this file
import FileUploader from 'react-firebase-file-uploader';

firebase.initializeApp(config);

class Example extends Component {
  handleChangeImage = (e) => {
    const image = e.target.files[0];
    if (image) {
      this.setState({image});
    }
  };
  handleUploadSuccess = (filename) => {
    // Do something with the name of the uploaded file and possibly the rest of the form
    firebase.database().ref('images').push({filename});
  };
  handleSubmit = (e) => {
    e.preventDefault();
    if (this.uploader && this.state.image) {
      this.uploader.startUpload(this.state.image);
    }
}

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>Image:</label>
          <FileUploader
            ref={c => { this.uploader = c; }}
            accept="image/*"
            randomizeFilename
            storageRef={firebase.storage().ref('images')}
            onChange={this.handleChangeImage}
            onUploadSuccess={this.handleUploadSuccess}
          />
          <button type="submit" />
        </form>
      </div>
    );
  }
}

render(
  <Example />,
  document.getElementById('root')
);

I will try to add a mutli upload functionality within the next 2 weeks.

[jamdog13]

Just wanted to drop by and thank you for that example, it was very useful.

[jadrum]

in your example above I was slightly confused by the phrase "this.uploader"... I can't figure out what it is referring to.. any help @sprmn ? thanks!

nvm, figured out what you were doing in the ref portion... overlooking easy things sorry!