Right now we can replace and select the file but it doesn't really do anything. What we want to do is provide our form image with an onClick handler. Let's go into formFields.js and let's write a function in the FormImage in front of our render.

formFields.js

    handleSelectedImage = () => {
        console.log('hey there');
    }

Now let's add that into our input.

formFields.js

  <input {...input} 
          type='file'
          style={{display: 'none'}}
          id='file'
          name='file'
          accepts='image/*'
          value={undefined}
          onChange={this.handleSelectedImage}
          />

Let's check it out, when we select a file and hit Ok, it should say 'hey there'.

And it does. So now we can do something with the file. What we need to do is we need to pass in the event, so we can get access to the image. Let's give it an ID.

And then we can do something with it.

formFields.js

    handleSelectedImage = () => {
        var image = document.getElementById('newsletter-new-image');
        image.src = URL.createObjectURL(event.target.files[0]);
    }

That should do it. Let's go and try this.

Boom, it works. One thing I do is make it so it doesn't squeeze the image. We can do that with a little bit of CSS by changing the object fit to cover, so let's go into form-fields.scss and let's tell it to fit to cover.

form-fields.scss

 &__image {
        height: 13.7rem;
        width: 16rem;
        border: none;
        background-color: rgb(218, 218, 218);
        grid-row: image-s/image-e;
        object-fit: cover;
 }

That should just automatically change it. So that's really awesome. Let's go ahead and just throw in this cancel functionality and then we will move on.

What we want to do is go back to dashboard when we cancel. Open up newsletterNew.js and let's put that in.

formFields.js

onSubmit = (fields) => {

        // if(button == 'submit') {
        //   // save new newsletter on the backend. perform a post request here.
        //   console.log('trying to submit to backend.');
        // } 
        this.props.history.push('/dashboard');
    }

    onCancel = () => {
        this.props.history.push('/dashboard')
    }

We'll finish the submit button when we start working with redux later. That's how it works. So what we need to do now is pretty simple. We need to hook it up to the edit. We need to finish our edit button and have it take us to the edit form. Then what we want it to do is take this data and fill out this form instead of having it be a new form.

git status
git add .
git commit -m "finally finished newsletter new form"

And just real quick now that we have all of these extra inputs built and all that, this app will be a lot easier to finish because we're just going to be using those things in a whole bunch of different places. Although when we get to requests there's going to be a lot of stuff. So you're not completely off the hook but you see in the next video.

Code at this stage