Разрешить загрузку только определенного типа файлов в Blazor

Я использую пакет BlazorInputFile для загрузки файла в Blazor.

Проблема

Этот код не работает.

<InputFile OnChange="OnFileUpload" accept="image/x-png,image/jpeg" title="Upload jpeg or png image" />

Как ограничить пользователя загрузкой только jpeg или png в Blazor? Пожалуйста, дайте мне знать, если требуются дополнительные материалы для подтверждения вопроса.


blazor blazor-server-side blazor-client-side asp.net-blazor
person Bijay Yadav    schedule 25.04.2020    source источник
comment
Я использую последнюю версию Blazor по состоянию на февраль 2021 года, и это работает для меня, поэтому они, должно быть, исправили это.   -  person maksymiuk    schedule 14.02.2021

Ответы (2)


arrow_upward
1
arrow_downward

У меня есть оболочка для InputFile Стива Сандерсона, у которой есть свойство AllowedExtensions. Это фильтр постфактум, означающий, что пользователь должен загрузить файл, а затем вы сообщаете им, что расширение файла недопустимо. Есть целые темы о том, как сделать предварительную загрузку, и это, по меньшей мере, сложно.

Вот как я это сделал после загрузки:

Nuget: DataJuggler.Blazor.FileUpload

Полный исходный код, включая образец проекта Blazor, находится здесь:

https://github.com/DataJuggler/BlazorFileUpload

Здесь кратко изложена наиболее важная часть:

используя DataJuggler.Blazor.FileUpload

<FileUpload CustomSuccessMessage="Your file uploaded successfully." 
    OnReset="OnReset" ResetButtonClassName="localbutton" ShowStatus="false"
    PartialGuidLength="10" MaxFileSize=@UploadLimit FilterByExtension="true" 
    ShowCustomButton="true"  ButtonText="Start" OnChange="OnFileUploaded"
    CustomButtonClassName="startbutton" ShowResetButton="false" 
    AppendPartialGuid="true" AllowedExtensions=".jpg;.png;"
    CustomExtensionMessage="Only .jpg and .png files are allowed." 
    InputFileClassName="customfileupload" Visible=false
    FileTooLargeMessage=@FileTooLargeMessage>
</FileUpload>

Обратите внимание на два свойства для AllowedExtensions и CustomExtensionMessage.

Вот соответствующая часть кода, в которой я обрабатываю FileUploaded:

// Create a new instance of a 'FileInfo' object.
FileInfo fileInfo = new FileInfo(file.Name);

// I don't know if it's even possible for an extension to be upper case
uploadedFileInfo.Extension = fileInfo.Extension.ToLower();

// if FilterByExtension is true and the AllowedExtensions text exists
if ((FilterByExtension) && (!String.IsNullOrWhiteSpace(AllowedExtensions)))
{
    // verify the extension exists
    if (!String.IsNullOrWhiteSpace(fileInfo.Extension))
    {
        // If the allowed extensions // fixed issue where uploading 
        abort = !AllowedExtensions.ToLower().Contains(fileInfo.Extension.ToLower());
    }
    else
    {
        // you must have an extension
        abort = true;
    }
}

Может быть, это даст вам некоторые идеи.

Если вы хотите увидеть действующий сайт, который его использует, я опубликовал это пару дней назад: https://pixeldatabase.net - Редактировать изображения с помощью BQL - Bitmap Query Language

person Community    schedule 26.04.2020

arrow_upward
1
arrow_downward

В предыдущей версии могла быть ошибка, но для ясности: компонент InputFile имеет словарь AdditionalAttributes, который фиксирует любые неуказанные атрибуты, которые затем помещаются непосредственно на вход файла типа.

[Parameter(CaptureUnmatchedValues = true)]
public IDictionary<string, object>? AdditionalAttributes { get; set; }

Это означает, что вы можете передавать атрибуты, которые он не пытался обработать, но они попадут в нужное место.

Таким образом, вы можете указать атрибут accept или класс, как обычный тег ввода.

<InputFile OnChange="OnFileChange" class="custom-file-input" accept=".csv,.xlsx" />

См. также:

Ограничить формат файла при использовании ‹input type = file›?

person Greg    schedule 23.02.2021