From blob to Binary

[Benoit1980]

Hello,

In your documentation I cannot find any mention of converting the cropped output blob data to Binary. I am using Laravel and its MIME validator, but the data seems to only work with images sent as Binary files and not as blob.

Did I miss this part in your documentation?

Some people were telling me to use this library for this: https://www.npmjs.com/package/blob-util

But would this not be better to be inclusive to your package directly?

Thank you,

[Norserium]

@Benoit1980, hello!

I'm not sure that it's the concern of this library. It gives you access to the canvas and you are free to do with that canvas whatever you need.

Did you try to use Blob.arrayBuffer()? Could you provide the code you use to send the image to your server?

[Benoit1980]

Hi!

Thank you for the reply. Basically, When I usually send a file to the server I do this: HTML <input type="file" class="custom-file-input" id="image" ref="image" accept="image/png, image/jpeg" @change="onFileAttached($event)">

Vue js:

let formData = new FormData();
formData.append('file', this.file);
axios.post('/com/image/',formData)
                .then((response) => {
//Reply
});

Laravel side:

$validator = Validator::make($request->all(), [
            'file' => 'required|image|mimes:jpeg,png,jpg|max:10240',
        ]);
        if ($validator->fails()) {
            return response()->json(['errors' => $validator->errors()], 422);
        }

On the Laravel side, for the file to be validated this way, it needs to be sent as "Binary" as shown in this example request payload from my chrome console on a working form of mine:

Having Base64 will cause me problems because I have an old Laravel 6 version and the intervention package for base64 only works on Laravel 7+

I have never used a cropping plugin before and have always uploaded my files "as is" with the normal Laravel validator. Having your plugin outputting the file in a different format kind of threw me out :-)

What worries me the most is to lose by validation and do a base64 decode on the Laravel side like here: https://coderedirect.com/questions/15595/how-to-recieve-image-blob-data-by-cropper-js-in-laravel-controller

I would rather have the file as Binary from the JS side and send it that way to the Laravel validator to keep all my form validations working the same way(if you know what I mean).

I just read about the Blob.arrayBuffer() .

Let me give it a shot, will post back in the next couple of hours.

Thanks!

[Benoit1980]

I have managed to get it going by doing this: Vue

        cropImage() {
            const {coordinates, canvas} = this.$refs.image.getResult();
            this.coordinatesImage = coordinates;
            if (canvas) {
                canvas.toBlob(blob => {
                    this.form.image_url = blob;
                }, 'image/jpeg');
            }
        },

Laravel

$validator = Validator::make($request->all(), [
            'file' => 'required|mimes:jpeg,png,jpg|max:10240',  <---I removed the "Image" tag
        ]);
        if ($validator->fails()) {
            return response()->json(['errors' => $validator->errors()], 422);
        }

I need to do some testing but I am not sure why without the "image" tag in the validator it works........

[Norserium]

@Benoit1980, I don't understand why mimes:jpeg,png,jpg works for you.

According to the sources, validateImage should work in the similar way:

public function validateImage($attribute, $value)
{
    return $this->validateMimes($attribute, $value, ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp']);
}

It doesn't examine the actual MIME type and retrieves it from the file extension (in contradiction to validateMimestype). It's a strange decision, but I can't comment it.

Try to add here the filename for test purpose:

formData.append('file', this.file, 'avatar.jpg');

[Benoit1980]

Sorry for the delay in replying to you. I had to move to an emergency project, I will check this out by the end of the week and update you :-)

[Norserium]

@Benoit1980, any news?

[Benoit1980]

Sorry I did not have the time to check it out yet....too many projects at once :-( I will surely check this next week as I will be back on this particular project.

[Norserium]

@Benoit1980, it's okay, I just check the issues status occasionally. Just like this lad.

[Benoit1980]

I understand :-) I promise to check it out next week.

[Norserium]

@Benoit1980, any news?

[Benoit1980]

@Benoit1980, any news?

My apology, got super busy and totally forgot to post back as I moved on with other projects.

What I did is this:

VUE

onFileAttached(id) {
            let reader = new FileReader();
             this.file = this.$refs.file.files[0];
             reader.onload = (e) => {
                        this.imagePreview = e.target.result;
             };
              reader.readAsDataURL(this.$refs.file.files[0]);
        },

//AXIOS

  let formData = new FormData();
   formData.append('file', this.file)
....then a POST

LARAVEL 'file' => 'nullable|mimes:jpeg,png,jpg|max:10240',

[Norserium]

@Benoit1980, it's okay, thanks for the answer.

Did you try to set the file name? It didn't help?

formData.append('file', this.file, 'avatar.jpg');

[Benoit1980]

You are welcome, I did not as it seems to be working on the Laravel side like this. But instead of having a validator looking for an "image" I added "mimes:jpeg,png,jpg" and it seems to be picking up the files correctly upon upload.

[Norserium]

Well, my assumption is that probably image validator check the mime type by file extension (in contradistinction to mimes validator). The experiment was proposed to check this assumption. Otherwise it's need to dive into the sources and it far more long way.

In any case, all is well that ends well. I close issue then, feel free to reopen it.