Level 54
@saurav77 yes. use text.
A note though. Its better to store images as physical files on the server rather than store them in a database field. Out of scope for this question though.
Sep 26, 2020
9
Level 2
String data, right truncated: 1406 Data too long for column 'image' at row 1
This is my image uploader with image preview
<form @submit.prevent= "createImage()" enctype="multipart/form-data">
<input type="file" v-on:change="onImageChange" class="form-control">
<div v-if="image">
<img :src="image" >
</div>
<button type="submit">Submit</button>
</form>
This is my script file
methods:{
onImageChange(e) {
let files = e.target.files || e.dataTransfer.files;
if (!files.length)
return;
this.createImage(files[0]);
},
createImage(file) {
let reader = new FileReader();
let vm = this;
reader.onload = (e) => {
vm.image = e.target.result;
};
reader.readAsDataURL(file);
},
createImage(){
axios.post(`imageUpload`,{
image:this.image,
}
}
Actually, In Migration
$table->string('image');
It throws an error (data too long for columns). Actualy When I put console.log(this.image)
image:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAADasdasd..." in this format but long format
So should change my migration file string into text ?
Level 2
@automica thanks, I use text but still giving that error When I put console.log('this.image') then this type of format is coming.I think this is not the type of format it should have come ?
"data:image/jpeg;base64,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... (10025 total length)"
Level 54
@saurav77 you are sending it as base64 encode which is appropriate if you are uploading as Ajax.
At the server end, you should decode it and then save as a file, and then save the filename in your database.
something like this, in your controller, should do it.
$file = base64_decode($request['image']);
$folderName = 'public/uploads/';
$safeName = str_random(10).'.'.'png';
$destinationPath = public_path() . $folderName;
$success = file_put_contents(public_path().'/uploads/'.$safeName, $file);
print $success;
1 like
Level 5
@saurav77 you need ro replace data:image/jpeg;base64, of the string and then base64 decode it
something like
$mimeType = $this->document['mime_type'] ?? 'image/jpeg';
if ($mimeType === 'image/svg+xml')
$mimeType = 'image/png'; //toDataURL falls back to png | only raster, no vector
$this->source = base64_decode(str_replace("data:$mimeType;base64,", '', $file));
1 like
Level 73
Like previously mentioned never store an image in the database.
However you should use a clob or a blob to store the base64 image.
Unfortunately Laravel migration doesn't support those types out of the box so you would have to use a db:statement to create that table.
https://stackoverflow.com/questions/51824304/laravel-add-clob-column
But like I said store the image on disc it will keep the database fast and agile.
2 likes
Level 2
@automica @artcore I change my controller like this but throws Undefined offset: 1". Is there any mistake or?
$base64_image = $request->get('image');
if (preg_match('/^data:image\/(\w+);base64,/', $base64_image)) {
$image = substr($base64_image, strpos($base64_image, ',') + 1);
$image = base64_decode($image);
}
$name = time().'.' . explode('/', explode(':', substr($image, 0, strpos($image, ';')))[1])[1];
\Image::make($request->get('image'))->save(public_path('backend/images/').$name);
Level 54
@saurav77 its something you are doing in here.
$name = time().'.' . explode('/', explode(':', substr($image, 0, strpos($image, ';')))[1])[1];
best to extract that bit to a separate method, take it out of being in a single line, and then you it'll be easier to debug
Level 2
$file = base64_decode($request['image']);
$folderName = 'public/uploads/';
$safeName = str_random(10).'.'.'png';
$destinationPath = public_path() . $folderName;
$success = file_put_contents(public_path().'/uploads/'.$safeName, $file);
print $success;
Your code worked for me But images did not save in the folder only save image name save only in the database What should I do to save names in the database and image in the file?
Level 1
@saurav77 Set the data type of the data base field to “longtext”.
Please or to participate in this conversation.