kartik-v / bootstrap-fileinput

An enhanced HTML 5 file input for Bootstrap 5.x/4.x./3.x with file preview, multiple selection, and more features.
http://plugins.krajee.com/file-input
Other
5.35k stars 2.4k forks source link

Upload zero byte file #1625

Closed fgp-smith closed 4 years ago

fgp-smith commented 4 years ago

Prerequisites

Steps to reproduce the issue

  1. Create a zero sized (empty) text file
  2. Go to the Basic Usage Demo and try to upload the file using Basic Example 2

Expected behavior and actual behavior

When I follow those steps, I see... a message is displayed saying "No files selected".

I was expecting... The empty file to be uploaded but either the file should upload, there could be instances where a zero byte file is required. Or the message should state that the file is empty not that no file was selected.

Environment

Browsers

Operating System

Libraries

Isolating the problem

kartik-v commented 4 years ago

It could be achieved by setting minFileSize to a negative number. Anyway an enhancement has been pushed to do specifically this as a default and allow empty file sizes. Cross check and let know.

agbandini commented 1 year ago

Hi, I join this discussion to inform you that I have tried to set minFileSize to a negative number in a confuguration for multiple files ajax uploads but the component, on the zero-bytes data files, fails and freezes.

garbinmarcelo commented 1 year ago

I have the same problem, I'm using version 5.2.9 image

In the configuration I defined it as: minFileSize: 3 and also tried with minFileSize: -1

But the error still occurs. The field is frozen and I cannot take any action.

What can I do to get around this error?

kartik-v commented 1 year ago

Am not able to reproduce this on my tests.... which version of the plugin are you using? Can you take the latest code from the repo and retry?

garbinmarcelo commented 1 year ago

Am not able to reproduce this on my tests.... which version of the plugin are you using? Can you take the latest code from the repo and retry?

I'm using version 5.2.9.

I just did a little test with the version 5.5.2 and it looks like the bug has been fixed.

thank you for your attention

agbandini commented 1 year ago

Hi, I'm trying with the v 5.5.3, Ive configure the component to work with this configuration:

uploadUrl: 'https://myentrypoint',
enableResumableUpload: true,
initialPreviewAsData: true,
maxFileCount: 4,
maxAjaxThreads: 1,
minFileSize: -0.1,
preferIconicPreview: true,
showUpload: false,
resumableUploadOptions: {
    chunkSize: 600
}

but when the upload starts the file whith 0bytes is not uploaded, cany you suggest me a workaround to fix this problem? thank you

Immagine 2022-12-16 170910

garbinmarcelo commented 1 year ago

Hi @agbandini, I'm not using it with ajax call, but if you want to check my config is as follows (in case it helps you with anything):

JavaScript:

  let inputArquivo = $("#arquivoUpload");
  let maxsize = inputArquivo.data('maxsize') * 1024;
  let ext = inputArquivo.data('ext') || 'png,jpg,doc,docx,pdf';
  let cfg_fileinput = {
    language: 'pt-BR',
    theme: 'explorer-fa4',
    mainClass: 'fileinput-main',
    elErrorContainer: '#arquivo-file-errors',
    rtl: false,
    maxFileCount: 1,
    minFileSize: 3,
    maxFileSize: maxsize,
    required: true,
    allowedFileExtensions: ext.split(','),
    previewFileIcon: '<i class="fa fa-file-o"></i>',
    dropZoneEnabled: false,
    uploadAsync: false,
    fileActionSettings: {
      showRemove: true,
      showUpload: false,
      showDownload: false,
      showZoom: false,
      showDrag: false,
    },
    showUpload: false,
    showPreview: false,
    showRemove: true,
    showClose: false,
    autoReplace: true,
    preferIconicPreview: true, // this will force thumbnails to display icons for following file extensions
    previewFileIconSettings: { // configure your icon file extensions
      'doc': '<i class="fa fa-file-word-o text-primary"></i>',
      'xls': '<i class="fa fa-file-excel-o text-success"></i>',
      'ppt': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
      'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
      'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
      'htm': '<i class="fa fa-file-code-o text-info"></i>',
      'txt': '<i class="fa fa-file-text-o text-info"></i>',
      'mov': '<i class="fa fa-file-video-o text-warning"></i>',
      'mp3': '<i class="fa fa-file-audio-o text-warning"></i>',
      // note for these file types below no extension determination logic
      // has been configured (the keys itself will be used as extensions)
      'jpg': '<i class="fa fa-file-image-o text-danger"></i>',
      'gif': '<i class="fa fa-file-image-o text-muted"></i>',
      'png': '<i class="fa fa-file-image-o text-primary"></i>'
    },
    previewFileExtSettings: { // configure the logic for determining icon file extensions
      'doc': function(ext){
        return ext.match(/(doc|docx)$/i);
      },
      'xls': function(ext){
        return ext.match(/(xls|xlsx)$/i);
      },
      'ppt': function(ext){
        return ext.match(/(ppt|pptx)$/i);
      },
      'zip': function(ext){
        return ext.match(/(zip|rar|tar|gzip|gz|7z)$/i);
      },
      'htm': function(ext){
        return ext.match(/(htm|html)$/i);
      },
      'txt': function(ext){
        return ext.match(/(txt|ini|csv|java|php|js|css)$/i);
      },
      'mov': function(ext){
        return ext.match(/(avi|mpg|mkv|mov|mp4|3gp|webm|wmv)$/i);
      },
      'mp3': function(ext){
        return ext.match(/(mp3|wav)$/i);
      }
    },
    msgProcessing: 'Processando...'
  };
  let fileinput = inputArquivo.fileinput(cfg_fileinput);
  fileinput.on('fileloaded', function(file, previewId, index, reader){
    let error = $(this).parents().closest('.file-input').parent().find('#arquivoUpload-error');
    if(error.length > 0)
      error.remove();
  });

HTML:

<div class="col-md-12">
    <label for="anexar_documentos">Anexar Documento<small>*</small></label>
    <div id="arquivo-file-errors"></div>
    <div class="file-loading">
        <input name="arquivo"
               type="file"
               id="arquivoUpload"
               class="form-control"
               data-ext="<?php echo $extensoesUpload; ?>"
               accept="<?php echo $acceptUpload; ?>"
               data-maxfiles="1"
               data-maxsize="<?php echo intval($tamanhoUpload); ?>" />
    </div>
    <span class="d-block"><small>Tamanho Máx.: <?php echo $tamanhoUpload; ?> / Extensões permitidas: <?php echo $extensoesUpload; ?></small></span>
</div>

As you can see there are some variables that I call via PHP and set in the input and from the input I get via JavaScript to start the fileinput.

agbandini commented 1 year ago

Question is if in your case it works when you try to upload an empty file? coud be a problem related only to the ajax upload? coud be necassary to specify also the max file size ?

agbandini commented 1 year ago

Hi, @kartik-v I come back to this topic to point out that the problem of uploading an empty file only occurs when the enableResumableUpload option is active. You can also try it on the resumableUpload demo page using an empy file. Regards