Last Updated: September 27, 2021
·
41.08K
· jasny

Jasny Bootstrap – File upload with existing file

I’m happy to say that many developers have found their way to Jasny Bootstrap. Especially the file upload component, is very popular. It can replace any normal <input type="file"> element to display a nice widget that is consistent across browsers and can show a preview for images.

The documentation shows the HTML to use, but it doesn’t show how to use it with existing files. I’ll explain it here.

The basics

The HTML stays largely the same. Change fileupload-new to fileupload-exists for the .fileupload container div (line 1). Put the for the existing image in the .fileupload-preview div (line 4). If you’re not image preview, put the file name in the .fileupload-preview div instead.

<div class="fileupload fileupload-exists" data-provides="fileupload">
  <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" /></div>
  <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;">
    <img src="/images/example.png">
  </div>
  <div>
    <span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" name="myimage" /></span>
    <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
  </div>
</div>

When a user presses submit without changing or removing the image, the form post contains an entry for ‘myimage’ without a new file. When clear is pressed the value for ‘myimage’ is an empty string. In PHP you could handle it as

if (isset($_POST['myimage']) && $_POST['myimage'] == '') {
  // Delete file
} elseif ($_FILES['myimage']['error'] == 0)  {
  // Save uploaded file
}

Omit from POST

However this in some languages and frameworks you can’t easily make the distinction between no file being selected and the post containing an empty string. In that case you can use the data-name attribute and leave you the 'name' attribute on the <input type="file">.

<div class="fileupload fileupload-exists" data-provides="fileupload" data-name="myimage">
  <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" /></div>
  <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;">
    <img src="/images/example.png">
  </div>
  <div>
    <span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
    <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
  </div>
</div>

Now when the user presses submit without changing or clearing the file, the ‘myimage’ entry will not be part of the post data. In the next PHP example both $_FILES and $_POST are processed and present in $data.

if (isset($data['myimage'])) {
  if ($data['myimage'] == '') {
    // Delete file
  } else {
    // Handle uploaded file
  }
}

Posting a specific value

In some cases this still won’t do, for instance when you’re using a form builder which combines the defaults with posted data. In that case you can manually add the <input type="hidden"> and set it to a specific value. (In the following example ’1′ is chosen, but you can also use the basename of the file or whatever you want.)

<div class="fileupload fileupload-exists" data-provides="fileupload" data-name="myimage">
  <input type="hidden" name="myimage" value="1" />
  <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" /></div>
  <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;">
    <img src="/images/example.png" />
  </div>
  <div>
    <span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
    <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
  </div>
</div>

In this case when the user presses submit without changing or clearing the file, the ‘myimage’ entry will be ’1′. When the user clears the image it will be an empty string. In the next PHP example both $_FILESand $_POST are processed and combined with all the default/original values as $data.

Please contribute

If you’re using the file upload component with Ruby, Python, C# or Java, please leave a comment with an example in your language. Thanks.

5 Responses
Add your response

Hi,

I am using this plugins for one of my project what has been building in Yii framwrok in php. This is good plugins and working nice but unfortunate I couldn't use it for update mode. My image path is being saved in database but I do not understand how to use this path for update image.

Thanks in advance

over 1 year ago ·

I'm not familiar with the inner workings of YII. You need to find out (or ask) how the model is updated from $_FILES and $_POST.

over 1 year ago ·

Hi. I use the jasny-bootstrap for fileupload component from the examples website (http://jasny.github.io/bootstrap/javascript/#fileinput-examples) and try it out in my local machine and I'm not able to preview the image. I'm using bootstrap 3.0 and jasny-bootstrap

<div class="form-group">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
<div>
<span class="btn btn-default btn-file">
<span class="fileinput-new">Select image</span>
<span class="fileinput-exists">Change</span>
<input type="file" name="..."></span>
<a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
</div>

over 1 year ago ·

I am serializing the data using jQuery. But I am not getting any value for this element.
How to send the value to jQuery post, form serialization. Please help.

over 1 year ago ·

.serialize doesn't work for sending files. You need to use the FormData object.

Note that FormData isn't available for older browsers. There are some jQuery plugins that send the files using an iframe, but these aren't compatible with the file input plugin.

over 1 year ago ·