Failing to upload file with AJAX "Call to a member function hashName() on null"

I'm trying to upload an image via AJAX call, first I was getting mime type validation errors, after removing the validation rules I get this:

message: "Call to a member function hashName() on null", exception: "Symfony\Component\Debug\Exception\FatalThrowableError", file: "C:\xampp\htdocs\Restaurante1\vendor\laravel\framework\src\Illuminate\Filesystem\FilesystemAdapter.php", line: 193, trace: (56)

I'm fairly sure I'm failing at retrieving the file from my input file type inside my form, this is weird as I set the enctype correctly.

My form where I think the error resides:

<div class="modal_overlay_maincontainer closeable form_store_modal" data-link="sliders">
    <form id="new_slider_form" class="modal_container" enctype='multipart/form-data'>
        <i class="close fa fa-times-circle" title="Cerrar"></i>
        <h2 class="modal_title">Nueva Diapositivas</h2>
        <div class="modal_body_container">
            <div class="modal_body_check_container">
                <span class="modal_body_options_title">Visible</span>
                <input class="modal_body_check" name="isVisible" type="checkbox"  title="La diapositiva se subirá al pasador de diapositivas" required>
            </div>
            <div class="modal_body_check_container">
                <span class="modal_body_options_title">Imagen</span>
                <input type="file" name="image" required>
            </div>
            <input class="modal_input" type="text" name="title" placeholder="Titulo de la diapositiva" required>
            <textarea class="modal_input_textarea" name="body" placeholder="Contenido de la diapositiva" required></textarea>
        </div>
        <div class="modal_footer_container">
            <button class="modal_footer_add_button form_store_button" type="button" data-link="sliders" title="Crear nueva entrada">Crear</button>
            <button class="modal_footer_reset_button form_reset_button" type="button" title="Resetear los campos">Reset</button>
        </div>
    </form>
</div>

And my JQuery code:

$('.form_store_button').click(function(){
        
        var linked_entry = $(this).attr("data-link");
        var form = $(this).closest('form');
        
        
        
        
        $.ajaxSetup({
            headers: { 'X-CSRF-Token' : $('meta[name=csrf-token]').attr('content') }
        });
        

        switch(linked_entry) {
            
            case "sliders":
            
                console.log('new slider button clicked');
                
                var formData = new FormData();
                formData.append('title', form.closest($("input[name='title']").val()));
                formData.append('body', form.closest($("textarea[name='body']").val()));
                formData.append('image', form.closest($("input[name='image']").prop('files')[0]));
                formData.append('isVisible', form.closest($("input[name='isVisible']").is(':checked') ? 1 : 0));

                
                $.ajax({

                async: true,
                url: '/sliders',
                type: 'POST',
                data: formData,
                dataType: 'JSON',
                processData: false,
                contentType: false,
            
                success: function (data) { 
                    $('.form_valid_container').html('<span class="form_valid_text">✓ '+ data.success +'</span>');
                    form.trigger("reset");
                    console.log(data.success, data.errors);
                },
            
                error: function (data){
                    var errors = data.responseJSON;
                    console.log(errors);
                
                    $.each(errors , function(){
                        $('.form_error_container').html('<span class="form_error_text">✘ '+ errors.message +'</span>')
                    }); 
                }
                
                
                });

            break;
                    
                    

            default:
                        
        }
                
    });

My controler method if needed:

public function store(StoreSlider $request)
    {
        
        $imagePath = Storage::disk('local')->putFile('uploads', $request->file('image'));
        
        
        
        $slider = new Slider();
        $slider->title = $request->title;
        $slider->body = $request->body;
        $slider->image = $imagePath;
        $slider->isVisible = $request->isVisible;
        $slider->save();
        
        return response()->json($slider);
    }

Gabotronix

7 years ago

Level 8

Ok, I think I fixed the issue by replacing

formData.append('image', form.closest($("input[name='slider_image']").prop('files')[0]));

formData.append('image', $('#slider_image').prop('files')[0]);

My controller method for storing into database now ookis like this:

public function store(StoreSlider $request)
    {
        
        $uploadFile = $request->file('image');
        
        //generate random filename and append original extension (eg: asddasada.jpg, asddasada.png)
        $filename = str_random(6).'.'.$uploadFile->extension();

        // storing path (Change it to your desired path in public folder)
        $path = 'img/uploads/';

        // Move file to public filder
        $uploadFile->storeAs(public_path($path), $filename);
        
        
        $slider = new Slider();
        $slider->title = $request->title;
        $slider->body = $request->body;
        $slider->image = $path.'/'.$filename; // So that you can access image by url($slider->image);
        $slider->isVisible = $request->isVisible;
        $slider->save();
        
        return response()->json($slider);
    }

However when I submit I get the following error:

message: "Impossible to create the root directory \"C:\xampp\htdocs\Restaurante1\storage\app\C:/xampp/htdocs/Restaurante1/public/img/uploads\".", exception: "League\Flysystem\Exception", file: "C:\xampp\htdocs\Restaurante1\vendor\league\flysystem\src\Adapter\Local.php"

This is weird since I already created a folder named uploads inside img in public folder

C:\xampp\htdocs\Restaurante1\public\img\uploads

Please or to participate in this conversation.