Skip to content

Basic file upload input

Florrie requested to merge file-upload into master

Resolves #7 (closed).

Shows a preview for the selected file (the file name and an image embed if the file has an image MIME type).

Supports multiple file upload (shows a preview modal one-by-one for each selected image, showing a "n/total" and "remaining" string, and showing "Skip" instead of "Cancel").

For now, does not include code to actually send the image to the backend (it just console.logs each confirmed file for now).

Basic upload:

Image embed of the selected file beside the filename; two buttons "upload" and "cancel"

Non-image upload:

Same as basic upload, but without the preview image

Upload multiple:

Same as basic upload, but with the text "(1/4: 3 remaining)" in a paragraph below the filename, and the button label "Skip" instead of "Cancel"

Upload a wide image:

Same as upload multiple, but the image preview is relatively short, making the "x/y: n remaining" paragraph seem somewhat offset, as if positioned more or less to the right of nothing

While it's nice to see the whole image in its proper aspect ratio, it sort of messes up layout as seen above, particularly regarding the "x/y: n remaining" paragraph. I imagine a better look would be if the image embed was always square. Thoughts?

/cc @alyssa -- I don't think we have a backend API for uploading images yet, but this should give you a frontend to work with! 🎉

Merge request reports