I read about this on some posts on the stack, but I still do not see the same case as mine. I can not upload the image on phone device. I do not see why I do not have a console to see error. I’ll show you the code, so someone who is experienced can see the error.

Laravel code to upload image:

public function uploadImage($car, $images)
{
$fileName = Carbon::now()->timestamp . $images->getClientOriginalName();
$path = $images->move(public_path(‘public/images’), $fileName);
if (!$path) {
return response()->json([‘message’ => ‘An error has accured’], 500);
}
$carImage = new CarImages ([
‘path’ => ‘public/images/‘ . $fileName
]);

$car->images()->save($carImage);
return $carImage;
}

Laravel code for store form with image:

public function store(CarRequest $request)
{
$file = null;
if ($request->has(‘picture’)) {
$file = $request->file(‘picture’);
}
$user = auth()->user();
if ($user) {
$car = Car::create([
‘car_type’ => $request->input(‘car_type’),
‘mark’ => $request->input(‘mark’),
‘model’ => $request->input(‘model’),
‘user_id’ => $user->id
]);
}
if (!$car) {
return response()->json([‘message’ => ‘Oooops, something went wrong’], 500);
}
if ($file) {
$carImage = $this->uploadImage($car, $file);
}
Mail::to($user->email)->send(new NotifyNewCarUpload($user, $car));
return response()->json([
‘message’ => ‘the car has been successfully added’,
‘car’ => $car,
‘user’ => $user
], 201);
}

In CarRequest for upload for car i have:

‘car_type’ => ‘required’,
‘mark’ => ‘required’,
‘model’ => ‘required’,
‘picture’ => ‘required|image’

In Vue.js insert car I have:

<form enctype=”multipart/form-data” accept-charset=”utf-8”
@submit.prevent=”submit”>
…
…
<div class=”col-3 insert-vehicle-right”>
<div :class=”{ ‘error’: errors.has(‘file’) }” v-if=”!imgSrc” class=”image-upload-holder”></div>
<img :class=”{ ‘error’: errors.has(‘file’) }” v-if=”imgSrc” class=”uploaded-image” :src=”imgSrc” alt=”uploaded image”/>
<div class=”upload-btn-wrapper”>
<button class=”btn action-btn”>Upload Photo</button>
<input name=”file”
v-validate=”‘required’”
type=”file”
@change=”onFileChange”/>
</div>
</div>
</div>
<div class=”row”>
<div class=”col-12”>
<button type=”submit” class=”btn action-btn save-btn”>Save</button>
</div>
</form>

Vue.js javascript code for upload and preview image code:

onFileChange(event) {
this.picture = event.target.files[0];
const file = event.target.files[0];
this.imgSrc = URL.createObjectURL(this.picture);
},

And there is formData code for post that code:

…
…
formdata.append(‘picture’, this.picture);

It’s not working on mobile phones. Does anyone recognize the reason?
All my pictures are stored in the laravela folder public/public/images and work good on web browser (destop and laptop device). Also there is table for storing path images.. Only for phone device not work. Help?

Solution :

Okey problem was be in php.ini configuraction and max_size_upload file. I only set more than 2mb images file and work perfecty.
@thanks Rasa