Level 73
Check your javascript code, you don't pass the file when you call the store method
Jun 18, 2022
17
Level 2
call to a member function extension() on null
hello , i want to upload image with dropzone . but i get this error
<script type="text/javascript">
Dropzone.options.fileDropzone = {
maxFileSize : 12 ,
addRemoveLinks : true,
acceptedFiles : ".jpg , .jpeg , .png , .svg",
url : "{{route('posts.store')}}",
headers:{
'X-CSRF-TOKEN': "{{csrf_token()}}"
},
removeFile: function(file){
let name = file.upload.image;
$.ajax({
type:'post',
url : "{{route('remove.image')}}",
data : {
"_token": "{{csrf_token()}}" ,
name: name
},
success:function(data){
console.log("uploaded successfully");
},
error:function(e){
console.log(e);
},
})
let fileRef;
return (fileRef = file.previewElement) != null ?
fileRef.parentNode.removeChild(file.previewElement) : void 0;
},
success:function(file , response){
console.log(file);
}
}
</script>
<form action="{{route('posts.store')}}" method="post" enctype="multipart/form-data" >
@csrf
<div class="mb-3">
<label for="title" class="form-label">Title</label>
<input type="text" class="form-control" id="title" name="title" value="{{old('title')}}" placeholder="title">
</div>
<div class="mb-3">
<label for="image" class="form-label">Image</label>
<div class="dropzone" id="file-dropzone" >
</div>
</div>
<div class="mb-3">
<button class="btn btn-info">Created</button>
<a href="{{route('posts.index')}}" class="btn btn-danger">Cancel</a>
</div>
</form>
public function store(Request $request)
{
$image = Carbon::now()->microsecond . '.' . $request->file('file')->extension();
$request->file('file')->storeAs('image' , $image , 'public_drive');
Post::query()->create([
'title' => $request->title,
'image' => $image,
]);
return response()->json(['success' => $image]);
}
Level 2
@Tray2 I checked everything that came to my mind, I did not notice the problem with the code. Do you have a solution?
Level 73
@mehrdad70 You can start by changing this
<div class="dropzone" id="file-dropzone" >
</div>
To a proper file input,
And then you can read the docs here https://docs.dropzone.dev/getting-started/setup/declarative
Level 2
@Tray2 not work
Level 73
@mehrdad70 What does not work. what kind of error messages do you get, have you read the docs on how to do it properly?
Level 17
In JavaScript part you can not use blade syntax like this:
url : "{{route('posts.store')}}"
You have to use it like this:
url : "@json(route('posts.store'))"
Fix it all.
Level 2
@Armani Did not change. I put dd in the request and this is the output The image could not be sent from the form to the controller
^ array:2 [▼
"_token" => "N5MBwNMwl5wm9F6rnHVEc2ZLvXDKS1y7qzhrSnTD"
"title" => "erfref"
]
Level 122
@Armani nothing wrong with
url : "{{route('posts.store')}}"
Level 2
@Snapey do you have solution for this problem ?
Level 122
@mehrdad70 yes, read the dropzone docs
Level 122
You have to appreciate that Dropzone is designed to upload the files as soon as they are dropped on the target.
It is not designed to submit the form along with your other data.
If you want the file to come along with the rest of the form, use a regular file input field.
Open your browser network tools. Is the file being sent as soon as you drop it?
1 like
Level 2
@Snapey The file is uploaded in the public folder, but when I submit the form, no image goes to the controller and no image data is sent.
call to a member function extension() on null
$image = Carbon::now()->microsecond . '.' . $request->file('file')->extension();
$request->file('file')->storeAs('image' , $image , 'public_drive');
Post::query()->create([
'title' => $request->title,
'image' => $image,
]);
Level 73
@mehrdad70 And that is just like @snapey said, it isn't in the request because it has already been uploaded in another request.
Level 122
@mehrdad70 Why did you install dropzone when you have no intention of learning what it does?
1 like
Level 2
@Snapey Because the relevant task has to be done with this and it is very urgent
Level 73
@mehrdad70 So you are just expecting that we will help you write the code that you need, or make changes in your code so that it works?
That is not how it works in this forum, we are her to help people learn and not to write the code for them. If you just want finished and working code then I suggest you hire a developer to do the coding for you.
2 likes
Level 102
@mehrdad70 why do you have to use it? I assume you are the lead developer as there is no one to ask? And if it's urgent, you should hire a developer (freelance perhaps?) that knows how it works
2 likes
Please or to participate in this conversation.