Ifrit's avatar
Level 2

Getting upload images to work correctly

I'm trying to create a form that can upload multiple images. The problem I'm having is that when I upload the image I get a

Symfony\Component\HttpKernel\Exception\NotFoundHttpException

and it isn't finding the folder that I would like the images to be.

I'm using hayageek jquery upload file plugin

http://hayageek.com/docs/jquery-upload-file.php

My form

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4>
                        Create Portfolio
                    </h4>
                </div>

                <div class="panel-body">
                    <div class="portfolio-form">

                        {{ Form::open(array('route' => 'portfolios.store', 'method' => 'post','files'=>'true' )) }}
                            {{ csrf_field() }}
                        
                            <div class="form-group">
                                <label for="title">Title</label>
                                <input type="text" id="title" class="form-control" name="title">
                            </div>

                            <div class="form-group">
                                <input type="file" name="image[]" multiple="multiple">
                            </div>

                            <div class="form-group">
                                <div id="fileuploader">Upload</div>
                            </div>

                            <input type="submit" class="btn btn-primary" value="Submit"></input>
                        {{ Form::close() }}
                    </div>
                    
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function()
        {
            $("#fileuploader").uploadFile({
               url:'{!! asset("public/portfolio_images") !!}',
               dragDrop: true,
               multiple: false,
               showFileCounter: false,
               showDone: false,
               fileName: "myfile",
               allowedTypes: "jpg,png,gif,pdf",
               showDelete: true,
            });
        });
    </script>
</div>

the upload.php from hayageek

<?php
$output_dir = "uploads/";
if(isset($_FILES["myfile"]))
{
    $ret = array();
    
//  This is for custom errors;  
/*  $custom_error= array();
    $custom_error['jquery-upload-file-error']="File already exists";
    echo json_encode($custom_error);
    die();
*/
    $error =$_FILES["myfile"]["error"];
    //You need to handle  both cases
    //If Any browser does not support serializing of multiple files using FormData() 
    if(!is_array($_FILES["myfile"]["name"])) //single file
    {
        $fileName = $_FILES["myfile"]["name"];
        move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir.$fileName);
        $ret[]= $fileName;
    }
    else  //Multiple files, file[]
    {
      $fileCount = count($_FILES["myfile"]["name"]);
      for($i=0; $i < $fileCount; $i++)
      {
        $fileName = $_FILES["myfile"]["name"][$i];
        move_uploaded_file($_FILES["myfile"]["tmp_name"][$i],$output_dir.$fileName);
        $ret[]= $fileName;
      }
    
    }
    echo json_encode($ret);
 }
 ?>

My controller

 public function store(Request $request)
    {

        $portfolio = new Portfolio();

        $request->validate($this->getRules());

        $portfolio->fill($this->getSafeInput($request));

        if($request->hasFile('image'))
        {
            $names = [];
            foreach($request->file('image') as $image)
            {
                $destinationPath = 'portfolio_images/';
                $filename = $image->getClientOriginalName();
                $image->move($destinationPath, $filename);
                array_push($names, $filename);          

            }
            $portfolio->image = json_encode($names);

        }
        
        $portfolio->save();
        
        return redirect()->route('portfolios.index');
    }

If I've left something out please let me know

0 likes
1 reply
Dunsti's avatar

I think your problem is this line:

url:'{!! asset("public/portfolio_images") !!}',

In the documentation of the hayageek jquery upload file plugin the url is not the url where images should be uploaded to, but the Server URL which handles File uploads

it should be something like this:

url: '{!! route('portfolios.store') !!}',

Please or to participate in this conversation.