Send cropped image to laravel controller

[Jacobtims]

I can't save my cropped image through my laravel controller. Vue code:

uploadImage() {
            const { canvas } = this.$refs.cropper.getResult();
            if (canvas) {
                canvas.toBlob(blob => {
                    const form = new FormData();
                    form.append('file', blob);
                    axios.post(this.route('user.post.create'), form, {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    }).then((response) => {
                        console.log(response)
                    }).catch(function (error) {
                        this.toastMiddle('danger', error.response.data.message);
                    }.bind(this));
                }, this.image.type);
            }
        },

In my controller I have this:

public function createPost(Request $request)
    {
        $fileName = time().'.'.$request->file('file')->getClientOriginalExtension();
        $request->file('file')->storeAs('', $fileName, 'user_profiles');
        return response()->json(['success'=>'You have successfully upload file.']);
    }

It doesn't give me any error, but just create some random files without extension. What am I doing wrong?

[Jacobtims]

I have tested some more things. I found the problem, and that is that my controller can't get the getClientOriginalExtension(). When I set it manually it works fine!

[Norserium]

@Jacobtims, hello!

The method getClientOriginalExtension returns the extension based on the file name:

However, keep in mind that the getClientOriginalName and getClientOriginalExtension methods are considered unsafe, as the file name and extension may be tampered with by a malicious user. For this reason, you should typically prefer the hashName and extension methods to get a name and an extension for the given file upload

I assume, that your file doesn't have a name with the right extension. You can form the filename at the frontend, but this approach has obvious disadvantages: form.append('file', blob, filename);

Try to use the mentioned extension method on the backend: $extension = $file->extension();

It also can be helpful to prevent upload not image files.

[Jacobtims]

Thx for your fast reply! I fixed it with the $file->extension(). I will also create a validation on the image.

[Norserium]

@Jacobtims, you are welcome!

[yellow1912]

This is greate content, please add it to the document if you can. It will save people like me tons of time digging the old issues.