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.