Search code examples
htmlrazormultifile-uploader

Modifying the look of @FileUpload.GetHtml helper

I got a @Fileupload helper working pretty well. I just want to change the basic look like increasing the space between the lines or adding an hr between the last input file and input submit.

Is there a way by adding lines to this?

@if (!IsPost) {
    @FileUpload.GetHtml(
        initialNumberOfFiles:4,
        allowMoreFilesToBeAdded:false,
        includeFormTag:true,
        uploadText:"Send")
    }

As you see, the helper can send 4 files, but the look is too much packed.

Thank you for your help

Solution

  • I don't recommend using this helper at all because these days, most browsers support <input type="file" multiple/> which is a lot more user-friendly than the FileUpload helper's multiple inputs. However, if you are wedded to the idea, you can do this to increase the space between the inputs:

    <style>
    input[type=file]{
        margin-bottom: 20px;
    }
</style>