Hi everyone, I'm really hoping someone could help me on the issue below.

The Goal

I would like to upload an Image with Ajax on the frontend. The (Ajax) uploaded image should be displayed in a div so the user sees a preview before submitting the form; exactly like it is done in this video: https://www.youtube.com/watch?v=YU6I-VKW39g

The Problem

The data-request handler in the input field of type "file" does not get triggered after selecting an image. However the form's data-request handler gets triggered when submitting the form. I am currently using October build 423. I have been able to achieve the same thing on another site: bit.ly/2ya4A5h (build 420); but I have no idea why it doesn't work on this one.

The Code (Form)

{% set artisan = __SELF__.loggedInArtisan %}
 <form novalidate data-request="onUpdate" data-request-validate data-request-files data-request-flash>  
        {{ form_token() }}
        {{ form_sessionKey() }}
        <input type="hidden" name="_handler" value="onSave">
        <div class="form-group">
            <label for="company_name">Name</label>
            <input name="company_name" type="text" class="form-1-style2 border1 borderf7 b-radius3" id="accountName" value="{{artisan.company_name}}" />
        </div>
        <div class="form-group">
            <label for="accountNumber">Phone Number</label>
            <input name="phone_number" type="number" class="form-1-style2 border1 borderf7 b-radius3" placeholder="2340000000000" id="accountNumber" value="{{ artisan.phone_number }}" />
        </div>
        <div class="form-group">
            <label for="description">Description</label> <br/>
            <textarea name="description" class="form-1-style2 border1 borderf7 b-radius3">{{artisan.description}}</textarea>
        </div> 
        <div class="clearfix"></div>
        <div class="form-group">
            <label>Artisan Image</label>
            <input type="file" data-request="onImageUpload" accept="image/*" name="artisan_image" data-request-files data-request-flash>
            <div id="artisan_image">No Image to Preview</div>
        </div>
        <button type="submit" class="submit-btn button1-1 b-radius3 right30 button-orange top20">Save</button>
    </form>

The Code (Component)

<?php namespace Jambolo\Artisans\Components;
use Cms\Classes\ComponentBase;
use Jambolo\Artisans\Models\Artisan as Artisan;
use Illuminate\Support\Facades\Input;
use Redirect;
use System\Models\File as File;
use Session;
use Validator;
use ValidationException;
use Flash;
class ArtisanDashboard extends ComponentBase {
public function componentDetails(){
    return [
        'name' => 'Artisan Dashboard',
        'description' => 'Artisan Dashboard Component'
    ];
}
public function onRun(){
    if (Session::has('loginArtisan')) {
        $sessionValue = json_decode(Session::get('loginArtisan'),true);
        $this->loggedInArtisan = $this->loadArtisan($sessionValue['slug']);
        Session::keep(['loginArtisan']);    
    } elseif(post('loginArtisan')) {
        $sessionValue = json_decode(post('loginArtisan'));
        $this->loggedInArtisan = $this->loadArtisan($sessionValue['slug']);
        Session::put('loginArtisan', json_encode($this->loggedInArtisan));
        Session::keep(['loginArtisan']);
    } else {
        return Redirect::to('/artisanlogin')->with('message','You must be logged in to access this page');
    }
}
public function loadArtisan($slug){
    $artisan = Artisan::where('slug', $slug)->first();
    return $artisan;
}
public function onImageUpload(){
    $image = Input::all();
    $file = (new File())->fromPost($image['artisan_image']);
     return [
         '#artisan_image' => '<img src="'. $file->getThumb(200, 200, ['mode' => 'crop']).'">'
     ];
}
public function onUpdate(){
    $data = post();
    $rules = [
        'company_name' => 'required',
        'phone_number' => 'required'
    ];
    $validation = Validator::make($data, $rules);

    if ($validation->fails()) {
        throw new ValidationException($validation);
    } else {
        return $this->loggedInArtisan;
        $artisanToUpdate = Artisan::find($this->loggedInArtisan->id);
        $artisanToUpdate->company_name = Input::get('company_name');
        $artisanToUpdate->description = Input::get('description');
        $artisanToUpdate->phone_number = Input::get('phone_number');
        $artisanToUpdate->artisan_image = Input::file('artisan_image');
        $artisanToUpdate->save();
    }
}
public $loggedInArtisan;
}

Hi again, I found the culprit. Jquery library I was using was old. I changed to the latest and issue was resolved.