Upload Field - How do I Restrict File Type

[Andrew]

Hello Team Five,

In standard HTML you might have an input tag of type=file to enable form based file uploads.

You might then set the accept parameter to restrict types of files uploaded.

accept=".jpg, .jpeg, .png" // for a selection of image file formats
accept=".csv" // for a standard coma separated values file format

I’m not sure how to achieve a similar result with the built-in file upload field in Five.

Please advise.

Kind regards, Andrew

[Pranoy]

Hi Andrew,

You can use JavaScript inside Five to get any standard HTML element you want inside Five.

For Eg :

referring the screenshot provided, we’ll identify the element’s ID via the browser inspector, after which I intend to insert my element

Now I wrote this simple code that captures that element and inserts our desired HTML

function addElement(five, context, result) {    
    let element = document.getElementById('Five-Form-Field-Name')
    element.insertAdjacentHTML('afterend', '<input type="file" id="avatar" name="avatar" accept="image/png" />')
    return five.success(result);
}

Next, we attach it to a function. I have this simple process with only one field

I attached my function to an event inside the name field.

Now whenever I click on the field and exit out of it ( because I attached it to an On Exit Event ), I create my input element

Let me know if this helps or if you need any other details on this