CODEWITHSUNDEEP
twitter-bootstrapjquery-plugins
Makudex
Makudex

Reputation: 1082

How to remove upload button in Bootstrap File Input

I have this Bootstrap file input plugin which can be found here: http://plugins.krajee.com/file-basic-usage-demo

This plugin looks like as below:

enter image description here

Now what I want to do is to remove this upload button of this plugin. Does anybody know how to do this? Or does anyone already tried?

Upvotes: 7

Views: 32753

Answers (5)

farhadfery
farhadfery

Reputation: 11

echo FileInput::widget([
    'name' => 'attachment_50',
    'pluginOptions' => [
        'showPreview' => false,
        'showCaption' => true,
        'showRemove' => true,
        'showUpload' => false
    ]
]);

Upvotes: 0

Waruna Manjula
Waruna Manjula

Reputation: 3487

     <!-- bootstrap 4.x is supported. You can also use the bootstrap css 3.3.x versions -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
    <!-- if using RTL (Right-To-Left) orientation, load the RTL CSS file after fileinput.css by uncommenting below -->
    <!-- link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/css/fileinput-rtl.min.css" media="all" rel="stylesheet" type="text/css" /-->
    <!-- optionally uncomment line below if using a theme or icon set like font awesome (note that default icons used are glyphicons and `fa` theme can override it) -->
    <!-- link https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css media="all" rel="stylesheet" type="text/css" /-->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <!-- piexif.min.js is only needed for restoring exif data in resized images and when you 
        wish to resize images before upload. This must be loaded before fileinput.min.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/plugins/piexif.min.js" type="text/javascript"></script>
    <!-- sortable.min.js is only needed if you wish to sort / rearrange files in initial preview. 
        This must be loaded before fileinput.min.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/plugins/sortable.min.js" type="text/javascript"></script>
    <!-- purify.min.js is only needed if you wish to purify HTML content in your preview for 
        HTML files. This must be loaded before fileinput.min.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/plugins/purify.min.js" type="text/javascript"></script>
    <!-- popper.min.js below is needed if you use bootstrap 4.x. You can also use the bootstrap js 
       3.3.x versions without popper.min.js. -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
    <!-- bootstrap.min.js below is needed if you wish to zoom and preview file content in a detail modal
        dialog. bootstrap 4.x is supported. You can also use the bootstrap js 3.3.x versions. -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- the main fileinput plugin file -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/fileinput.min.js"></script>
    <!-- optionally uncomment line below for loading your theme assets for a theme like Font Awesome (`fa`) -->
    <!-- script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/themes/fa/theme.min.js"></script -->
    <!-- optionally if you need translation for your language then include  locale file as mentioned below -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/locales/LANG.js"></script>   
    
    
    
        <script src="http://goanyone.com/js/fileinput.js" type="text/javascript"></script>



        <div class="file-loading">
        <input id="input-44" type="file" class="file" data-preview-file-type="text">
    </div>
    <script>
    $(document).on('ready', function() {
        $("#input-44").fileinput({
            uploadUrl: 'file-upload-batch',
            maxFilePreviewSize: 10240
        });


    });
    </script>
    <div id="errorBlock" class="help-block"></div>

Upvotes: 0

Shakti Singh
Shakti Singh

Reputation: 61

You can do it in a simple way also simply write in an attribute data-show-upload="false" and it I'll work too!!

Upvotes: 6

Hanny Setiawan
Hanny Setiawan

Reputation: 501

You can just use these following snippets

$("#your-input-type-file-ID").fileinput({
    'showUpload': false
});

Upvotes: 19

Makudex
Makudex

Reputation: 1082

Finally found the answer, by simply editing this code here from fileinput.js:

$.fn.fileinput.defaults = {
    language: 'en',
    showCaption: true,
    showPreview: true,
    showRemove: true,
    showUpload: false, // <------ just set this from true to false
    showCancel: true,
    showUploadedThumbs: true,
    // many more below
};

Upvotes: 14

Related Questions