avyx3a
Last Updated: July 17, 2017
·
25.65K
· jasny
Arnold

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.

Say Thanks
Respond

6 Responses
Add your response

10427
23d4789109e4d9cdf1a38e869e7843e8

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 ·
10515
Arnold

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 ·
11255
2b2db7695100b5d8442c7e53c40bf4ba

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 ·
13331
B95d1e1f0022e768f433d085e6d41dc7

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 ·
13333
Arnold

.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 ·
28808

Hi,
I have problem when use fileinput same as http://www.jasny.net/bootstrap/javascript/#fileinput-examples. When i choose the change a image but i do not select a image to upload so i cancel change image, the screen preview was remove my older image to default.
Please help me keep the image when i cancel change image action, thank.

7 months ago ·