Image Block: Adding an image upload button

[youknowriad]

to upload an image without opening the media modal.

closes #1702

[mtias]

Should we call this FileUpload? I don't think I would have found it easily with this name.

[youknowriad]

I try to group all the "form" related components by calling them Form* but I don't mind changing.

[mtias]

FormFileUpload maybe

[codecov]

Codecov Report

Merging #2260 into master will decrease coverage by 0.2%.
The diff coverage is 27.77%.

@@            Coverage Diff            @@
##           master   #2260      +/-   ##
=========================================
- Coverage   24.21%     24%   -0.21%     
=========================================
  Files         142     145       +3     
  Lines        4465    4541      +76     
  Branches      758     768      +10     
=========================================
+ Hits         1081    1090       +9     
- Misses       2857    2916      +59     
- Partials      527     535       +8

Impacted Files	Coverage Δ
blocks/library/image/index.js	14.7% <0%> (-0.92%)	⬇️
components/form-file-upload/index.js	71.42% <71.42%> (ø)
blocks/library/categories/index.js	3.22% <0%> (ø)
blocks/library/categories/data.js	0% <0%> (ø)
blocks/library/button/index.js	35.29% <0%> (+8.62%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f6f3a08...6cc9c45. Read the comment docs.

[mtias]

Works great for me!

[mtias]

@jasmussen the upload button has a hover effect that the "insert from media library" does not. Not sure what the status should be.

[jasmussen]

the upload button has a hover effect that the "insert from media library" does not. Not sure what the status should be.

The blue hover effect is caused by the button having a components-icon-button CSS class. We can either address the CSS or remove the class. What makes the most sense?

[youknowriad]

Fixed the hover color, kept the class because it's automatically included in the IconButton component.

[mkaz]

Looks good, it works for me.

I want to use the same method for the Gallery block and uploading of multiple images. Looking at the code, it looks like you have support for multiple in the form-file-upload button, however the function that processes the uploads is in the image block, could we break that out to be independent, so any block can use it.

👍 to commit and I can abstract it out for you if you like

[youknowriad]

@mkaz yeah, we'd probably want to extract this function somewhere. Let's merge this and will let you abstract while working on the gallery.

Thanks everyone for the reviews. Merging