Error Call to a member function store() on null

Level 39

As the error indicates, resume is null, which seems reasonable since I don't see it being set anywhere in this class.

Level 4

@lbecket so what should I change to not make it null

SilenceBringer

Level 55

@vainway for sure you need to init it somewhere. In mount, maybe. Even you do not have resume prop declared at all

Level 4

@SilenceBringer am kinda lost would you give me an example I could use with my codes

SilenceBringer

Level 55

@vainway

class Experiences extends Component
{
   // other stuff

	public $resume;
    public $language;
	// other stuff

    public function mount()
    {
        $this->language = Language::where('language', 'English')->get();

		$this->resume = new IDoNotKnowWhatIsResumeButYouNeedToInitItHereInOrderToUseItLater(); // init resume - not ssure what it is. Model? Service? Repo?

        $this->allLanguages = Language::all();
        // $this->Selectedlanguage = [
        //     ['language_id' => '23', 'proficiency' => '']
        // ];
    }

	// ...
}

Level 4

@SilenceBringer resume is just a column in the experience table, or try to give me an example on just how you can use it within your own codes

Level 10

$resume was already declared in your Livewire component & is in your form & is in your form rules array.

In your form rules array you are expecting a single file of certain mime types, which is processed on submission as a single file

However in your form you are using wire:ignore on the resume field so that you can use the FilePond plugin and you have defined the file input field as accepting multiple (even though your form rules expect single) which is conflicting.

I assume you have on the main form wire:submit.prevent="Experience", but it is not shown?

Forget about FilePond for a minute, remove it's use and replace it with a simple file upload field type expecting a single file, and see if that works.

<div class="row"> 
                <div class="col-md-12">
<label>Upload Your Resume</label>
                        <input type="file" wire:model="resume">
</div>
</div>

Level 4

@mlewis I changed it and it worked but I still want to use Filepond because am using it everywhere on the same project I don't why on this Experience page It started showing an error but on other pages, it is working fine.

I submitted the form and I got a new error Array to string conversion

1 like

Level 10

@vainway Good to hear - its all part of the bug squishing process - first get it working without the plugin, now you know that is just the implementation of FilePond to resolve, rather than anything to do with your livewire properties that sends you down the wrong path.

Are you hoping to allow multiple resume files to be uploaded in this form, or just one?

The original posted code showed conflicting ideas (in the component you wanted 1 file, in the form you indicated multiple).

Level 4

@mlewis how can I make it accept multiple in the component then and how can I get rid of that new error Array to string conversion

Level 10

@vainway So array to string is because of the multiple. I am guessing that the following might work, however I don't know if FilePond does anything special, I don't use it myself... I'm assuming not, but have obviously written this in here so check for any typos in your own IDE when using it.

It is roughly how my own multi file upload component works (minus my own file processing) so hopefully this works or gets you close enough to do the rest...

You should change your resume property resumes (as it is an array of files)

public $resumes = [];

You can then change your rules to

'resumes' => ['required'],
'resumes.*' => ['file','mimes:png,jpg,pdf'],

You need to change your Experience() form submission function to handle multiple files

foreach($this->resumes as $resume) {
$path = $resume->store('public/storage/Resumes');
// Do something with the uploaded file... your previous posted code only permits one resume per expert stored... so you'll need to figure that bit out for yourself.
}

Change your form field row to

<div class="row"> 
                <div class="col-md-12">
                    <div 

                    wire:ignore

                    x-data 
                    
                    x-init="

                    FilePond.registerPlugin(FilePondPluginImagePreview);

                    FilePond.setOptions({
                        AllowMultiple: true,
                        server: {
                            process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
                                @this.upload('resumes', file, load, error, progress)
                                
                            },
                            revert: (filename, load) => {
                                @this.removeUpload('resumes', filename, load)
                            },
                        },
                    });

                    FilePond.create($refs.input);

                    " 
                    >
                        <label>Upload Your Resume</label>
                        <input type="file" x-ref="input" wire:model="resumes" multiple>
                    </div>
                </div>
            </div>
        </div>

Level 4

@mlewis am still getting the same error resumes is required but I got Array to string conversion because I was using your example below

<div class="row"> 
                <div class="col-md-12">
<label>Upload Your Resume</label>
                        <input type="file" wire:model="resume">
</div>
</div>

Level 10

@vainway Re: 1st one - sounds like FilePond isn't doing anything then, as said I'm not a user so hopefully someone else can spot something on that. Do you get any output in the dev console when you drop a file onto it?

Re: 2nd one my apologies, I didn't understand as you said you changed it and it worked so assume you meant successfully uploaded and stored.

Going back to that version of code then (simple non filepond upload, using singular resume)

If you dd($this->resume) on the form submission, what is the output?

Level 4

@mlewis results I got on dd($this->resume);

Livewire\TemporaryUploadedFile {#4336 ▼
  #storage: Illuminate\Filesystem\FilesystemAdapter {#4355 ▼
    #driver: League\Flysystem\Filesystem {#4353 ▼
      #adapter: League\Flysystem\Adapter\Local {#4352 ▼
        #pathSeparator: "\"
        #permissionMap: array:2 [▼
          "file" => array:2 [▼
            "public" => 420
            "private" => 384
          ]
          "dir" => array:2 [▼
            "public" => 493
            "private" => 448
          ]
        ]
        #writeFlags: 2
        -linkHandling: 2
        #pathPrefix: "C:\xampp\htdocs\project\storage\app\"
      }
      #plugins: []
      #config: League\Flysystem\Config {#4354 ▼
        #settings: []
        #fallback: null
      }
    }
    #temporaryUrlCallback: null
  }
  #path: "livewire-tmp/b6mHxUBE07oIyET4pq1wnAT3NErvQv-metaMjcwLmpwZw==-.jpg"
  -test: false
  -originalName: "b6mHxUBE07oIyET4pq1wnAT3NErvQv-metaMjcwLmpwZw==-.jpg"
  -mimeType: "application/octet-stream"
  -error: 0
  #hashName: "eksDi0bsAlq0GIYNkewWMk4Ml31LkB20htSU5JQY"
  +"disk": "local"
  path: "C:\xampp\htdocs\project\storage\app\livewire-tmp"
  filename: "b6mHxUBE07oIyET4pq1wnAT3NErvQv-metaMjcwLmpwZw==-.jpg"
  basename: "php103D.tmp"
  pathname: "C:\Users\User\AppData\Local\Temp\php103D.tmp"
  extension: "tmp"
  realPath: "C:\xampp\htdocs\project\storage\app\livewire-tmp/b6mHxUBE07oIyET4pq1wnAT3NErvQv-metaMjcwLmpwZw==-.jpg"
  size: 110059
  writable: false
  readable: false
  executable: false
  file: false
  dir: false
  link: false
}