Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Shiva's avatar

image function not 100%

I'm not sure what is going on, in most of my modules I have an image section where I can upload images and save them, but when I add an image section to another module it doesn't work and I can't seem to figure out why since it's using the same code and that code is working.

this is the code I've been using. create.blade.php

{{ HTML::script('js/test.js') }}
<script type="text/javascript">
    var settings = {
                url: '{{ asset("upload/upload.php") }}',
                dragDrop:true,
                multiple : false,
                showFileCounter:false,
                showDone: false,
                fileName: "myfile",
                allowedTypes:"jpg,png,gif,pdf", 
                returnType:"json",
                showDelete:true,
            }
</script>
<div id="fileuploader" class="testing">Upload</div>
                        <script>
                            var uploadObj = $("#fileuploader").uploadFile(settings);
                        </script>
                        {{ Form::hidden('image', '', array('id' => 'img-add', 'class' => 'img-hidden')) }}

test.js

$(document).ready(function(){


    $(".add-form").submit(function(event){
        $(this).find(".testing").each(function(){
            var image = [];
            $(this).parent().find(".ajax-file-upload-statusbar").each(function() {
                image.push($.trim($(this).find(".ajax-file-upload-filename").html()));
            });
            $(this).parent().find(".img-hidden").val(JSON.stringify(image));
        });

        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            dataType: 'json',
            encode : true,
        });
    });

    $(document).on('click', ".ajax-file-upload-statusbar .close", function(){
        $(this).parents('.ajax-file-upload-statusbar:first').remove();
    });
});

This is a controller one of the modules that is working

public function store()
    {
        $input = Input::all();
        $validation = Validator::make($input, Gallery::$rules);

        if($validation->fails()){
            return Redirect::route('gallery::index')
                ->withInput()
                ->withErrors($validation)
                ->with('message', 'There were validation errors');
        }

        if($validation->passes()){
            Gallery::create($input);

            $galleries = Gallery::all();
            return View::make('gallery::index', compact('galleries'));
        }
    }

and this is the controller of a module that isn't working

public function store()
    {
        $input = Input::all();
        $validation = Validator::make($input, User::$rules);

        if($validation->fails()){
            return Redirect::route('users::index')
                ->withInput()
                ->withErrors($validation)
                ->with('message', 'There were validation errors');
        }

        if($validation->passes()){
            $input['password'] = Hash::make($input['password']);
            User::create($input);

            $users = User::all();
            return View::make('users::index', compact('users'));
        }

    }
0 likes
42 replies
bobbybouwmann's avatar

What is not working exactly since both functions do something else...

Shiva's avatar

My image doesn't get saved into the database.

Shiva's avatar

But if the code was working before why wouldn't it work now?

Shiva's avatar

Nothing the only difference is that I add

$input['password'] = Hash::make($input['password']);

to the store method and even if I removed it, it still didn't work. So I'm really confused as to why it's not working.

sitesense's avatar

In the first controller you use Gallery::create($input);, I'm assuming this creates the image entry in your db?

In the second you do User::create($input); which I assume creates a user?

They're quite different.

sitesense's avatar

I don't know what your views look like but if they're both the same maybe try this:

public function store()
    {
        $input = Input::all();
        $validation = Validator::make($input, User::$rules);

        if($validation->fails()){
            return Redirect::route('users::index')
                ->withInput()
                ->withErrors($validation)
                ->with('message', 'There were validation errors');
        }

        if($validation->passes()){
            $input['password'] = Hash::make($input['password']);
            User::create($input);
            // add this here:
            Gallery::create($input);

            $users = User::all();
            return View::make('users::index', compact('users'));
        }

    }

Not sure what you're asking though. These seem to be 2 different things.

Shiva's avatar

This is my create view

@extends('templates::admin')
@section('content')

    {{ HTML::script('js/test.js') }}
    <script type="text/javascript">
        var settings = {
                    url: '{{ asset("upload/upload.php") }}',
                    dragDrop:true,
                    multiple : true,
                    showFileCounter:false,
                    showDone: false,
                    fileName: "myfile",
                    allowedTypes:"jpg,png,gif,pdf", 
                    returnType:"json",
                    showDelete:true,
                }
    </script>
    <div class="row">
        <div class="col-lg-12">
            {{ Form::open(array('route' => 'admin.users.store', 'class' => 'add-form')) }}
                <div class="form">
                    <div class="title_input">
                        <div>
                            {{ Form::label('name', 'name') }}
                        </div>
                        <div>
                            {{ Form::text('name','', array('id' => 'name', "class" => "form-control")) }}
                        </div>
                    </div>

                    <div class="title_input">
                        <div>
                            {{ Form::label('password', 'password') }}
                        </div>
                        <div>
                            {{ Form::text('password','', array('id' => 'password', "class" => "form-control")) }}
                        </div>
                    </div>

                    <div class="title_input">
                        <div>
                            {{ Form::label('email', 'email') }}
                        </div>
                        <div>
                            {{ Form::text('email','', array('id' => 'email', "class" => "form-control")) }}
                        </div>
                    </div>

                    <div class="image_uploader">
                        <div id="fileuploader" class="testing">Upload</div>
                        <script>
                            var uploadObj = $("#fileuploader").uploadFile(settings);
                        </script>
                        {{ Form::hidden('image', '', array('id' => 'img-add', 'class' => 'img-hidden')) }}
                    </div>

                    <div class="submit_button">
                        {{ Form::submit('Submit', array("class" => "btn btn-info submit", "role" => "button")) }}
                    </div>
                </div>
            {{ Form::close() }}
        </div>
    </div>
@stop

I'm not using the gallery module with the user module. The user module also has an image uploader just like the gallery module but they are different and don't interlink with each other.

sitesense's avatar

So you have a field to hold the image path/filename in your users table?

Is this field fillable in your model?

EDIT: Does the file actually upload at all? You say it doesn't work but what part doesn't work?

Shiva's avatar

yes. In my users table I have this

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `password` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `email` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `image` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `created_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',
  `updated_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',
  `remember_token` varchar(100) COLLATE utf8_unicode_ci DEFAULT NULL,
  PRIMARY KEY (`id`)

and in my User model I have

<?php

use Illuminate\Auth\UserTrait;
use Illuminate\Auth\UserInterface;
use Illuminate\Auth\Reminders\RemindableTrait;
use Illuminate\Auth\Reminders\RemindableInterface;

class User extends Eloquent implements UserInterface, RemindableInterface {

    use UserTrait, RemindableTrait;

    protected $fillable = array('name', 'email', 'password', 'image');
    protected $guarded = array('id');

    /**
     * The database table used by the model.
     *
     * @var string
     */
    protected $table = 'users';

    /**
     * The attributes excluded from the model's JSON form.
     *
     * @var array
     */
    protected $hidden = array('password', 'remember_token');

    public static $rules = array(
        'name' => 'required'
        );

}
Shiva's avatar

yes it uploads to the correct folder it just doesn't save to the database.

sitesense's avatar

Does validation pass? Add this dd($input); after if($validation->passes()){ and show the output.

Shiva's avatar

I added dd($input); after if($validation->passes()){ and I got this

array (size=5)
  '_token' => string 'HJvo8jr0bCFyVggg3UHsTHIfW4b46c1Uzt4D7Qo6' (length=40)
  'name' => string 'test' (length=4)
  'password' => string 'test' (length=4)
  'email' => string 'test@test.com' (length=13)
  'image' => string '' (length=0)
sitesense's avatar

Try changing the code below in test.js:

// $(this).parent().find(".img-hidden").val(JSON.stringify(image));
$(this).find(".img-hidden").val(JSON.stringify(image));
Shiva's avatar

@sitesense - Nothing I still got this

array (size=5)
  '_token' => string 'HJvo8jr0bCFyVggg3UHsTHIfW4b46c1Uzt4D7Qo6' (length=40)
  'name' => string 'test' (length=4)
  'password' => string 'test' (length=4)
  'email' => string 'test@test.com' (length=13)
  'image' => string '' (length=0)
sitesense's avatar

Ok, I don't think your ajax is working. Probably the url. Check the url that ajax is using.

sitesense's avatar

No, I mean the url that your ajax is calling.

Add an alert like this and see what it says:

alert($(this).attr('action'));
$.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            dataType: 'json',
            encode : true,
        });
sitesense's avatar

If you are using Chrome browser, open up the developer tools and the network tab. Then look to see if you get a response from the ajax call.

sitesense's avatar

Either try it in Chrome or install Firebug addon to Firefox, it's similar.

Anyway gotta go for a while. But it's obvious that the filename is not there as you can see here:

array (size=5)
  '_token' => string 'HJvo8jr0bCFyVggg3UHsTHIfW4b46c1Uzt4D7Qo6' (length=40)
  'name' => string 'test' (length=4)
  'password' => string 'test' (length=4)
  'email' => string 'test@test.com' (length=13)

  // look:
  'image' => string '' (length=0)

This code should populate the hidden field with class img-hidden but it's not happening:

$(this).parent().find(".img-hidden").val(JSON.stringify(image));

Solve that and it will work. Good luck.

Shiva's avatar

I know that it's not getting the filename, I'm not understanding why since I know that the code works.

sitesense's avatar

@Shiva where is jQuery getting loaded? Please tell me it is :)

In fact, go to your create page in the browser, view source, copy it and paste the whole page source here within the code tags :)

Shiva's avatar

@sitesense - Here is the view source

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Admin</title>

        <link media="all" type="text/css" rel="stylesheet" href="http://localhost/testing/css/bootstrap.css">

        <link media="all" type="text/css" rel="stylesheet" href="http://localhost/testing/css/font-awesome.css">

        <link media="all" type="text/css" rel="stylesheet" href="http://localhost/testing/css/admin.css">

        <link media="all" type="text/css" rel="stylesheet" href="http://localhost/testing/css/custom.css">

        <link media="all" type="text/css" rel="stylesheet" href="http://localhost/testing/css/uploadfile.css">


        <script src="http://localhost/testing/js/jquery-1.10.2.js"></script>

        <script src="http://localhost/testing/js/tinymce/tinymce.min.js"></script>

        <script src="http://localhost/testing/js/bootstrap.min.js"></script>

        <script src="http://localhost/testing/js/jquery.metisMenu.js"></script>

        <script src="http://localhost/testing/js/morris/morris.js"></script>

        <script src="http://localhost/testing/js/jquery.uploadfile.js"></script>

        <script src="http://localhost/testing/js/custom.js"></script>

        
        
        
        
        
        
        
        <script src="http://localhost/testing/js/jquery.knob.js"></script>

        <script src="http://localhost/testing/js/jquery.ui.widget.js"></script>

        <script src="http://localhost/testing/js/jquery.iframe-transport.js"></script>

        <script src="http://localhost/testing/js/jquery.fileupload.js"></script>

        <script src="http://localhost/testing/js/script.js"></script>


        <script type="text/javascript">
        tinymce.init({
            selector: "textarea"
         });
        </script>

    </head>

    <body>
        <!--BEGIN WRAPPER -->
        <div id="wrapper">
            <!-- BEGIN NAV HEADER -->
            <nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html">Binary admin</a> 
                </div>
                <div style="color: white; padding: 15px 50px 5px 50px; float: right; font-size: 16px;"> 
                    Last access : 30 May 2014 &nbsp;
                    <a href="http://localhost/testing/admin/logout" class="btn btn-danger square-btn-adjust logout">Logout</a>
                </div>
            </nav>  
            <!-- END NAV HEADER --> 
            
            <!-- BEGIN SIDEBAR -->
            <nav class="navbar-default navbar-side" role="navigation">
                <div class="sidebar-collapse">
                    <ul class="nav" id="main-menu">
                        <li class="text-center">
                            <img src="http://localhost/testing/img/find_user.png" class="user-image img-responsive"/>
                        </li>

                        <li class="">
                            <a href="http://localhost/testing/admin/menus" class="menus"><i class="fa fa-th-list fa-3x"></i>Menus</a>
                        </li>

                        <li class="">
                            <a href="http://localhost/testing/admin/content" class="content"><i class="fa fa-file-word-o fa-3x"></i>Content</a>
                        </li>

                        <li>
                            <a href="#"><i class="fa fa-sitemap fa-3x"></i> Banners<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li class="">
                                    <a href="http://localhost/testing/admin/banners" class="dashboard"><i class="fa fa-list fa-3x"></i>Banners</a>
                                </li>

                                <li class="">
                                    <a href="http://localhost/testing/admin/frames" class="dashboard"><i class="fa fa-picture-o fa-3x"></i>Frames</a>
                                </li>
                            </ul>
                        </li>

                        <li class="">
                             <a href="http://localhost/testing/admin/gallery" class="gallery"><i class="fa fa-th fa-3x"></i>Galleries</a>
                        </li>

                        <<li class="">
                            <a href="http://localhost/testing/admin/seo" class="seo"><i class="fa fa-line-chart fa-3x"></i>Seo</a>
                        </li>

                        <li class="">
                             <a href="http://localhost/testing/admin/users" class="users"><i class="fa fa-user fa-3x"></i>Users</a>
                        </li>
                    </ul>
                </div>
            </nav>
            <!-- END SIDEBAR -->
            
            <!-- BEGIN CONTENT AREA -->
            <div id="page-wrapper" >
                <div id="page-inner">
                    <!-- <div class="row">
                        <div class="col-md-12">
                            <h2>Blank Page</h2>   
                            <h5>Welcome Jhon Deo , Love to see you back. </h5>
                        </div>
                    </div>

                    <hr /> -->

                    <div class="row">
                        <div class="col-md-12">
                            
    <script src="http://localhost/testing/js/test.js"></script>

    <script type="text/javascript">
        var settings = {
                    url: 'http://localhost/testing/upload/upload.php',
                    dragDrop:true,
                    multiple : true,
                    showFileCounter:false,
                    showDone: false,
                    fileName: "myfile",
                    allowedTypes:"jpg,png,gif,pdf", 
                    returnType:"json",
                    showDelete:true,
                }
    </script>
    <div class="row">
        <div class="col-lg-12">
            <form method="POST" action="http://localhost/testing/admin/users" accept-charset="UTF-8" class="add-form"><input name="_token" type="hidden" value="6shyEqRuYET4Qgzil8A34AFmIFkXEKMmk62TAuYS">
                <div class="form">
                    <div class="title_input">
                        <div>
                            <label for="name">name</label>
                        </div>
                        <div>
                            <input id="name" class="form-control" name="name" type="text" value="">
                        </div>
                    </div>

                    <div class="title_input">
                        <div>
                            <label for="password">password</label>
                        </div>
                        <div>
                            <input id="password" class="form-control" name="password" type="text" value="">
                        </div>
                    </div>

                    <div class="title_input">
                        <div>
                            <label for="email">email</label>
                        </div>
                        <div>
                            <input id="email" class="form-control" name="email" type="text" value="">
                        </div>
                    </div>

                    <div class="image_uploader">
                        <div id="fileuploader" class="testing">Upload</div>
                        <script>
                            var uploadObj = $("#fileuploader").uploadFile(settings);
                        </script>
                        <input id="img-add" class="img-hidden" name="image" type="hidden" value="">
                    </div>

                    <div class="submit_button">
                        <input class="btn btn-info submit" role="button" type="submit" value="Submit">
                    </div>
                </div>
            </form>
        </div>
    </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END CONTENT AREA -->
        </div>
        <!-- END WRAPPER -->
    
        <!-- SCRIPTS -AT THE BOTOM TO REDUCE THE LOAD TIME-->
        <!-- JQUERY SCRIPTS -->
        
        
    </body>
</html>
Next

Please or to participate in this conversation.