Awesome Open Source
Awesome Open Source

Warning: this repository is unmaintained. Fork at your own risk.


A Bootstrap/jQuery plugin to preview image uploads.

Table of contents



Following installation options are available:

  • Download and include the files manually.
  • Install with npm: npm install bootstrap-imageupload --save.




Copy this snippet into your HTML.

<div class="imageupload panel panel-default">
    <div class="panel-heading clearfix">
        <h3 class="panel-title pull-left">Upload Image</h3>
        <div class="btn-group pull-right">
            <button type="button" class="btn btn-default active">File</button>
            <button type="button" class="btn btn-default">URL</button>
    <div class="file-tab panel-body">
        <label class="btn btn-default btn-file">
            <!-- The file is stored here. -->
            <input type="file" name="image-file">
        <button type="button" class="btn btn-default">Remove</button>
    <div class="url-tab panel-body">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Image URL">
            <div class="input-group-btn">
                <button type="button" class="btn btn-default">Submit</button>
        <button type="button" class="btn btn-default">Remove</button>
        <!-- The URL is stored here. -->
        <input type="hidden" name="image-url">



Name Type Default
allowedFormats Array ['jpg', 'jpeg', 'png', 'gif']
maxWidth Number 250
maxHeight Number 250
maxFileSizeKb Number 2048



Initializes bootstrap-imageupload. If no options are given, defaults are used.

    allowedFormats: [ 'jpg' ],
    maxFileSizeKb: 512

Disables user input.


Enables user input (after being disabled).


Resets bootstrap-imageupload to its initial state. Options from initialization are preserved.



The upload image by URL feature has the following limitations:

  • The URL must contain the filename including its extension.
  • The file size cannot be verified.

These limitations exist because the image element constructor is used to load the image. The only accurate method to verify the image format and file size, is to perform a HTTP HEAD request, which might not work because of the same origin policy. In order to avoid loading very large image files, a timeout of 3000ms is used.

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (66,042
bootstrap (613
unmaintained (55

Find Open Source By Browsing 7,000 Topics Across 59 Categories