FileInput

Molecule

Drag-and-drop görünümlü dosya yükleme alanı. accept filtresi, multiple ve disabled desteği.

Single file

Preview

Profile photo

Click to upload or drag and drop

PNG or JPG, max 2 MB

Accepted: image/*

Code

<%- include('modules/ui/FileInput', {
  label: 'Profile photo',
  hint: 'PNG or JPG, max 2 MB',
  accept: 'image/*'
}) %>

Multiple files

Preview

Attachments

Click to upload or drag and drop

Up to 5 MB each

Code

<%- include('modules/ui/FileInput', {
  label: 'Attachments',
  hint: 'Up to 5 MB each',
  multiple: true
}) %>

Disabled

Preview

Disabled upload

Click to upload or drag and drop

Code

<%- include('modules/ui/FileInput', { label: 'Disabled upload', disabled: true }) %>

With error

Preview

Document

Click to upload or drag and drop

PDF only

Accepted: .pdf

Please upload a valid PDF file.

Code

<%- include('modules/ui/FileInput', {
  label: 'Document',
  hint: 'PDF only',
  accept: '.pdf',
  error: 'Please upload a valid PDF file.'
}) %>

Source modules/ui/FileInput.ejs

<%
  var _id       = locals.id       || 'file-' + Math.random().toString(36).substr(2, 9);
  var _multiple = locals.multiple  ? 'multiple' : '';
  var _accept   = locals.accept    || '';
  var _dis      = locals.disabled  ? 'disabled' : '';
%>

  <% if (locals.label) { %>
    
      <%= locals.label %><% if (locals.required) { %> *<% } %>
    
  <% } %>
  
    
      
      
        
          Click to upload or drag and drop
        
        <% if (locals.hint) { %>
          <%= locals.hint %>
        <% } %>
        <% if (_accept) { %>
          Accepted: <%= _accept %>
        <% } %>
      
    
    
      <%= _dis %>
      <% if (_accept) { %>accept="<%= _accept %>"<% } %>
      <% if (locals.name)  { %>name="<%= locals.name %>"<% } %>
    >
  
  <% if (locals.error) { %>
    <%= locals.error %>
  <% } %>