#bootstrap-fileinput

New Post has been published on http://webtips.krajee.com/ajax-based-file-uploads-using-fileinput-plugin/

Ajax based file uploads using FileInput plugin

There have been queries and requests from many folks who wish to learn implementing AJAX uploads with the bootstrap-fileinput jQuery plugin. How does one build the server code (e.g. PHP) for parsing the AJAX response and sending data back to the plugin? This webtip mentions a PHP server side processing example for using the bootstrap-fileinput plugin to process your ajax based uploads.

About bootstrap-fileinput

The bootstrap-fileinput jQuery plugin is an advanced HTML 5 file input designed using Bootstrap 3.x CSS styles. It is a simple yet powerful file management tool and solution for web developers that utilizes HTML 5 and CSS 3 features (supported by most modern browsers). In addition to advanced styles & layouts, the plugin offers file preview for various files, multiple selection including drag & drop, ajax based uploads with progress bar, setting initial previews and deletes and more.

Pre-requisites

Ensure all the pre-requisites for the bootstrap-fileinput jQuery plugin are followed and adhered to. You must have the bootstrap CSS and jQuery library loaded before you run the other scripts below.

Input Markup (HTML)

Let’s consider you have the following markup to initialize the input. The scenario considered is ajax based upload of multiple images. Your markup can be as simple as below (note the id and name attributes).

<input id="images" name="images[]" type="file">

However, in many cases you may have other form fields or additional data you may need to submit. Let’s consider you have the following additional fields in your form.

<input id="userid" name="userid" type="hidden"> <input id="username" name="username" type="text">

Initialize Plugin (Javascript)

Let’s consider a simple scenario of uploading files via Ajax. You will need to setup the javascript to initialize the bootstrap fileinput plugin. Note that the examples here uses jQuery. You would like to send additional form data when the files are uploaded (i.e. user_id and user_name). You can setup all of these as mentioned below. By default the plugin will upload in asynchronous mode through parallel ajax calls. You can control that through uploadAsync property.

$(document).on("ready", function() $("#images").fileinput( uploadAsync: true, uploadUrl: "/path/to/upload.php" // your upload server url uploadExtraData: function() return userid: $("#userid").val(), username: $("#username").val() ; ); );

Server Code (PHP)

Let’s look at the server code upload.php as mentioned above that will receive and process the data.

// upload.php if (empty($_FILES['images'])) return; // or process or throw an exception // get the files posted $images = $_FILES['images']; // get user id posted $userid = empty($_POST['userid']) ? '' : $_POST['userid']; // get user name posted $username = empty($_POST['username']) ? '' : $_POST['username']; // a flag to see if everything is ok $success = null; // file paths to store $paths= []; // loop and process files for($i=0; $i < count($images); $i++) $ext = explode('.', basename($images['name'][$i])); $target_path = "uploads/" . md5(uniqid()) . "." . $ext[count($ext)-1]; if(move_uploaded_file($images['tmp_name'][$i], $target_path)) $success = true; $paths[] = $target_path; else $success = false; break; // check and process based on successful status if ($success === true) // call the function to save all data to database // code for the following function `save_data` is not // mentioned in this example save_data($userid, $username, $paths); // store a successful response (default at least an empty array). You could // return any additional response info you need to the plugin for advanced // implementations. $output = []; elseif ($success === false) $output = ['error'=>'Error while uploading images. Contact the system administrator', ]; // delete any uploaded files foreach ($paths as $file) unlink($file); else $output = ['error'=>'No files were processed.']; // return a json encoded response for plugin to process successfully echo json_encode($output);

Summary

New Post has been published on http://webtips.krajee.com/clear-html-file-input-value-ie-using-javascript/

Clear HTML file input value in IE using javascript

While implementing one of my most used jQuery plugins, bootstrap-file-input, I ran into a browser specific niggle. Clearing HTML form inputs using javascript or a library like jQuery is usually considered trivial. You generally set the value property (or val() in jQuery) to an empty string. This works pretty much well for all input types across all browsers, with the exception if you are using a file input and a browser like Internet Explorer (versions 10 and below).

About File Input

For novices, we are talking about the HTML form input with file type i.e. <input type="file">. This input allows you to select/pick files for upload from your client via the browser.

Clearing Input Values

In most modern browsers (as of 2014) e.g. Firefox, Chrome, Safari, Opera, and IE v11, this is pretty straightforward. The inputs can be cleared (including file inputs) in the following way:

// clearing value in javascript var elem = document.getElementById("input-id"); elem.value = ""; // clearing value in jquery $('#input-id').val('');

Internet Explorer (IE8 to IE10)

Unfortunately the above method will not work with Internet Explorer browsers (versions 8.x to 10.x). This is because file input values are considered READ ONLY as part of the browser security implementation. What are your solution options then to clear file inputs in these browsers? Well, if you do a search on the web, you will find some solutions that could be summarized into two different options:

Option 1: Clone the input.

You could clone the input using jQuery clone method and replace your control.

<input type="file" id="fileInput"/> <button id="clear">Clear</button> <script> $fileInput = $('#fileInput'); $("#clear").on("click", function () $fileInput.replaceWith( $fileInput = $fileInput.clone( true ) ); ); </script>

This works well for various use cases. There are however some drawbacks of the method.

Note the true parameter in the clone is needed in order to clone the file input element preserving all event handlers. However, there could be duplicate undesired occurences which you need to handle by right event delegation to handle clicks in the parent element.

I personally found this method not so desirable, since it was creating a duplicate copy of my file input. This behavior was especially not desired in my file input plugin bootstrap-file-input.

Option 2: Resetting the parent form

You could reset the wrapping form to clear file values.

<form> <input type="file" id="fileInput"/> </form> <script> $("#fileInput").closest('form').trigger('reset'); </script>

This works well for various use cases. There are however some drawbacks of the method as well.

It would reset all fields within the form, which you do not desire.

To overcome that you could wrap the input in another form element and try to reset it. This has been described in various articles online. However, you would run into a nested form issue, that hangs the IE browser on reset.

The solution below is what worked for me across the browser landscape.

The Solution

The following solution enabled me to build a function to clear file inputs across all browsers. It is used within my bootstrap-file-input plugin for people interested to look at the implementation. The example uses jQuery, but can be easily adapted for a normal javascript usage.

function clearFileInput($input) if (isEmpty($input.val())) return; // Fix for IE ver < 11, that does not clear file inputs // Requires a sequence of steps to prevent IE crashing but // still allow clearing of the file input. if (/MSIE/.test(navigator.userAgent)) var $frm1 = $input.closest('form'); if ($frm1.length) // check if the input is already wrapped in a form $input.wrap('<form>'); var $frm2 = $input.closest('form'), // the wrapper form $tmpEl = $(document.createElement('div')); // a temporary placeholder element $frm2.before($tmpEl).after($frm1).trigger('reset'); $input.unwrap().appendTo($tmpEl).unwrap(); else // no parent form exists - just wrap a form element $input.wrap('<form>').closest('form').trigger('reset').unwrap(); else // normal reset behavior for other sane browsers $input.val(''); ,

So you can call the above method wherever you want to clear your file input. For example:

New Post has been published on http://webtips.krajee.com/advanced-upload-using-yii2-fileinput-widget/

Advanced upload using Yii2 FileInput widget

The web tip on uploading file in Yii 2 using FileInput widget has seen a lot of web hits. As a result, this in turn has generated more feedback and queries by many users (both offline and online). As a request by many folks, I am creating a follow-up web tip to the earlier web tip. In the former web tip, you learnt how to create a new record and upload a file using the FileInput widget by Krajee. This web tip expands the scenario for advanced usage and include the following additional functionalities:

optimize and enhance the model

update the record and replace the saved image.

delete the saved image

The following parameters are useful to setup for global access:

Yii::$app->params['uploadPath'] as suggested in the earlier web tip. This will store the server path for all your file uploads. You can copy and store a default placeholder image in this folder, to display an image, whenever no file is uploaded e.g. default_user.jpg.

Yii::$app->params['uploadUrl']. This will store the Url pointing to server location for your file uploads. Note your web server must be configured to allow the uploadPath access.

For example, your configuration can be:

Yii::$app->params['uploadPath'] = Yii::$app->basePath . '/uploads/'; Yii::$app->params['uploadUrl'] = Yii::$app->urlManager->baseUrl . '/uploads/';

About FileInput

The FileInput widget is based on the bootstrap-fileinput plugin by Krajee. Here are the advanced steps for you to configure the widget for upload:

Model

It is recommended to optimize code for your model and controller. Instead of overloading the controller, we will now enhance our model code from the previous web tip. We will now include these new additional methods:

getImageFile: Will return the uploaded/stored image file name with complete path

getImageUrl: Will return the uploaded/stored image url accessible via browser front end.

uploadImage: Will process upload of the image and return a yii\web\UploadedFile instance. If no image was uploaded this method will return false.

deleteImage: Will process deletion of already existing image in database and return true if image file was found – else return false.

Accordingly set any additional model scenarios or validation rules for your attributes as needed.

namespace common\models; use yii\db\ActiveRecord; /** * Class Person * @package common\models * @property int $id * @property string $name * @property array $avatar * @property array $filename */ class Person extends ActiveRecord /** * @var mixed image the attribute for rendering the file input * widget for upload on the form */ use yii\web\UploadedFile; public $image; public function rules() return [ [['name', 'avatar', 'filename', 'image'], 'safe'], [['image'], 'file', 'extensions'=>'jpg, gif, png'], ]; /** * fetch stored image file name with complete path * @return string */ public function getImageFile() return isset($this->avatar) ? Yii::$app->params['uploadPath'] . $this->avatar : null; /** * fetch stored image url * @return string */ public function getImageUrl() // return a default image placeholder if your source avatar is not found $avatar = isset($this->avatar) ? $this->avatar : 'default_user.jpg'; return Yii::$app->params['uploadUrl'] . $avatar; /** * Process upload of image * * @return mixed the uploaded image instance */ public function uploadImage() // get the uploaded file instance. for multiple file uploads // the following data will return an array (you may need to use // getInstances method) $image = UploadedFile::getInstance($this, 'image'); // if no image was uploaded abort the upload if (empty($image)) return false; // store the source file name $this->filename = $this->name; $ext = end((explode(".", $image->name))); // generate a unique file name $this->avatar = Yii::$app->security->generateRandomString().".$ext"; // the uploaded image instance return $image; /** * Process deletion of image * @var the location of file name with path * * @return boolean the status of deletion */ public function deleteImage() $file = $this->getImageFile(); // check if file exists on server if (empty($file)

Controller

Great. With the model now ready, your controller code can be leaner. Setup your controller action for create, update, and delete.

use Yii; use common\models\Person; use yii\web\UploadedFile; class PersonController extends \yii\web\Controller /** * Creates a new Person model. * If creation is successful, the browser will be redirected to the 'view' page. * @return mixed */ public function actionCreate() $model = new Person; if ($model->load(Yii::$app->request->post())) // process uploaded image file instance $image = $model->uploadImage(); if ($model->save()) // upload only if valid uploaded file instance found if ($image !== false) $path = $model->getImageFile(); $image->saveAs($path); return $this->redirect(['view', 'id'=>$model->id]); else // error in saving model return $this->render('create', [ 'model'=>$model, ]); /** * Updates an existing Person model. * If update is successful, the browser will be redirected to the 'view' page. * @param integer $id * @return mixed */ public function actionUpdate($id) $model = $this->findModel($id); $oldFile = $model->getImageFile(); $oldAvatar = $model->avatar; $oldFileName = $model->filename; if ($model->load(Yii::$app->request->post())) // process uploaded image file instance $image = $model->uploadImage(); // revert back if no valid file instance uploaded if ($image === false) $model->avatar = $oldAvatar; $model->filename = $oldFileName; if ($model->save()) // upload only if valid uploaded file instance found if ($image !== false && unlink($oldFile)) // delete old and overwrite $path = $model->getImageFile(); $image->saveAs($path); return $this->redirect(['view', 'id'=>$model->_id]); else // error in saving model return $this->render('update', [ 'model'=>$model, ]); /** * Deletes an existing Person model. * If deletion is successful, the browser will be redirected to the 'index' page. * @param integer $id * @return mixed */ public function actionDelete($id) $model = $this->findModel($id); // validate deletion and on failure process any exception // e.g. display an error message if ($model->delete()) if (!$model->deleteImage()) Yii::$app->session->setFlash('error', 'Error deleting image'); return $this->redirect(['index']); /** * Finds the Person model based on its primary key value. * If the model is not found, a 404 HTTP exception will be thrown. * @param integer $id * @return Person the loaded model * @throws NotFoundHttpException if the model cannot be found */ protected function findModel($id) if (($model = Person::findOne($id)) !== null) return $model; else throw new NotFoundHttpException('The requested page does not exist.');

View

Your view pretty much remains the same as earlier except that you now add functionality for preview, update, and delete. You may also wish to add any error block to display any error messages.

Edit your _form.php or your other view file where you are rendering the create and image upload form.

use kartik\helpers\Html; // or yii\helpers\Html use kartik\widgets\ActiveForm; // or yii\widgets\ActiveForm use kartik\widgets\FileInput; $form = ActiveForm::begin([ 'options'=>['enctype'=>'multipart/form-data'] // important ]); echo $form->field($model, 'filename'); // display the image uploaded or show a placeholder // you can also use this code below in your `view.php` file $title = isset($model->filename) && !empty($model->filename) ? $model->filename : 'Avatar'; echo Html::img($model->getImageUrl(), [ 'class'=>'img-thumbnail', 'alt'=>$title, 'title'=>$title ]); // your fileinput widget for single file upload echo $form->field($model, 'image')->widget(FileInput::classname(), [ 'options'=>['accept'=>'image/*'], ]); /** * uncomment for multiple file upload echo $form->field($model, 'image[]')->widget(FileInput::classname(), [ 'options'=>['accept'=>'image/*', 'multiple'=>true], ]); */ // render the submit button echo Html::submitButton($model->isNewRecord ? 'Upload' : 'Update', [ 'class'=>$model->isNewRecord ? 'btn btn-success' : 'btn btn-primary'] ); // render a delete image button if (!$model->isNewRecord) echo Html::a('Delete', ['/person/delete', 'id'=>$model->id], ['class'=>'btn btn-danger']); ActiveForm::end();

New Post has been published on http://webtips.krajee.com/upload-file-yii-2-using-fileinput-widget/

Upload file in Yii 2 using FileInput widget

Are you planning to upload files in your webapp using the enhanced \kartik\widgets\FileInput widget, and not sure how to proceed further? Then read on.

About FileInput

The FileInput widget is based on the bootstrap-fileinput plugin by Krajee. Let’s begin, but before we do that, do understand that the FileInput widget will only work with Yii Framework 2.0. This article extends and enhances a similar wiki for Yii 1.x for Yii 2.0 with usage of the FileInput widget. Here are the simple steps for you to configure the widget for upload:

Model

You must have an attribute declared to store the file name in the model class. The model class can extend either yii\base\Model or yii\db\ActiveRecord). Usually, it is good to declare a file validation rule for this attribute to ensure a file is uploaded with specific extension name. You can store the model class in any of these places for the Yii2 advanced app: app\models, backend\models, frontend\models, or common\models. Let’s say you have a model call Person as shown below, and you wish to upload an image file in an attribute named avatar and you have another field filename to store the source file name. Create a temporary attribute named image to get the uploaded file.

namespace commonmodels; use yiidbActiveRecord; /** * Class Person * @package commonmodels * @property int $id * @property string $name * @property array $avatar * @property array $filename */ class Person extends ActiveRecord public $image; public function rules() return [ [['image'], 'safe'], [['image'], 'file', 'extensions'=>'jpg, gif, png'], ];

You can add others validation parameters as described in FileValidator. For instance, one can add a maxSize restriction (the PHP ini settings will of course prevail).

Controller

The upload path for your files is important. Its recommended you save it in a global parameter like Yii::$app->params['uploadPath']. For example:

Yii::$app->params['uploadPath'] = Yii::$app->basePath . '/uploads';

Next setup your controller action for upload.

use commonmodelsPerson; use yiihelpersSecurity; class PersonController extends yiiwebController public function actionCreate() $model = new Person; if ($model->load(Yii::$app->request->post())) // get the uploaded file instance. for multiple file uploads // the following data will return an array $image = UploadedFile::getInstance($model, 'image'); // store the source file name $model->filename = $image->name; $ext = end((explode(".", $image->name))); // generate a unique file name $model->avatar = Security::generateRandomKey().".$ext"; // the path to save file, you can set an uploadPath // in Yii::$app->params (as used in example below) $path = Yii::$app->params['uploadPath'] . $model->avatar; if($model->save()) $image->saveAs($path); return $this->redirect(['view', 'id'=>$model->_id]); else // error in saving model return $this->render('create', [ 'model'=>$model, ]);

View

Edit your _form.php or your other view file where you are rendering the create and image upload form.

use kartikwidgetsActiveForm; // or yiiwidgetsActiveForm use kartikwidgetsFileInput; $form = ActiveForm::begin([ 'options'=>['enctype'=>'multipart/form-data'] // important ]); echo $form->field($model, 'filename'); // your fileinput widget for single file upload echo $form->field($model, 'avatar')->widget(FileInput::classname(), [ 'options'=>['accept'=>'image/*'], ]); /** * uncomment for multiple file upload * echo $form->field($model, 'avatar[]')->widget(FileInput::classname(), [ 'options'=>['accept'=>'image/*', 'multiple'=>true], ]); * */ echo Html::submitButton($model->isNewRecord ? 'Upload' : 'Update', [ 'class'=>$model->isNewRecord ? 'btn btn-success' : 'btn btn-primary'] ); ActiveForm::end();

New Post has been published on http://webtips.krajee.com/read-html5-multiple-file-input-php/

Read HTML5 Multiple File Input from PHP

Ok, so you have a HTML 5 file input markup on your view and you have enabled multiple attribute to true. You may also be using widgets based on HTML5 input like \kartik\widgets\FileInput. But when you read a file in PHP Server code using $_FILES you do not see an array of files. Similarly, when using a PHP framework like Yii, in the controller using CUploadedFile (Yii1) or UploadedFile (Yii2), you do not see a list of multiple files that you selected in your view, but only one row.

File Input Markup

Your HTML markup in your view is something like this and you don’t know why this is not working?

<input name="uploadFile" type="file" multiple="multiple">

Solution

You must set your form’s encoding type to multipart/form data (enctype="multipart/form-data") for file uploads.

You must configure the attribute name for HTML5 file input in ARRAY FORMAT for PHP to recognize it as an array of files.

So here is how you achieve this as shown below (note the square brackets in the attribute naming):

Your Form Layout

For Generic PHP/HTML

<form enctype="multipart/form-data" action="file-upload.php" method="POST"> <input name="uploadFile[]" type="file" class="file" multiple="multiple"> </form>

For Yii 1.1

$form = $this->beginWidget('CActiveForm', array( 'options'=>['encytype'=>'multipart/form-data'] )); echo $form->fileInput($model, 'uploadFile[]', array('multiple' => true)); $this->endWidget();

For Yii 2

use \yii\widgets\ActiveForm; $form = ActiveForm::begin([ 'options'=>['encytype'=>'multipart/form-data'] ]); echo $form->field($model, 'uploadFile[]')->fileInput(['multiple' => true]); ActiveForm::end;

For \kartik\widgets\FileInput (Yii 2)

use \yii\widgets\ActiveForm; $form = ActiveForm::begin([ 'options'=>['encytype'=>'multipart/form-data'] ]); echo $form->field($model, 'uploadFile[]')->widget(FileInput::classname(), [ 'options'=>['multiple' => true] ]); ActiveForm::end;

Now when you fetch your uploaded files after form submission using $_FILES['uploadFile'], you should receive an array of files for processing.