Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

vandan's avatar
Level 13

can't preview vector image(.ai)

i try this upload image .ai (vector ) upload done but when i try to preview does not work

here is my code

<div class="input-group">
        <span class="input-group-btn">
                <span class="btn btn-default btn-file"> Browse…  <input type="file" id="imgInp"></span>
            </span>
        <input type="text" class="form-control" readonly>
</div>
//preview image
<img id='img-upload'/>

here is script file

<script>
        $(document).ready( function() {
                $(document).on('change', '.btn-file :file', function() {
                var input = $(this),
                    label = input.val().replace(/\/g, '/').replace(/.*\//, '');
                        input.trigger('fileselect', [label]);
                });

            $('.btn-file :file').on('fileselect', function(event, label) {                
            var input = $(this).parents('.input-group').find(':text'),
                    log = label;
        
                if( input.length ) {
                        input.val(log);
                } else {
                        if( log ) alert(log);
                }
            });
            function readURL(input) {
                if (input.files && input.files[0]) {
                        var reader = new FileReader();              
                        reader.onload = function (e) {
                                $('#img-upload').attr('src', e.target.result);
                        }               
                        reader.readAsDataURL(input.files[0]);
                }
            }
            $("#imgInp").change(function(){
                readURL(this);
            });     
        });
    </script>
0 likes
33 replies
Sinnbeck's avatar

I am unsure how you plan to preview it? A am quite sure you browser wont show the ai file content as it is not a supported format. Have your read some where that the raw file content from an ai file can be rendered to an img tag?

1 like
vandan's avatar
Level 13

@sinnbeck no sir i dont know how to raw file content from an ai file can be rendered to img

any hint to i do it?

vandan's avatar
Level 13

@sinnbeck sir suppose first when i upload image then convert into jpg or png format so sir any idea how to convert jpg or png then try to upload database and preview it

vandan's avatar
Level 13

@sti3bas i try this but when i try to upload image its null so i dont know why my image null

here is my code

<form method="post" action="{{route('image_store')}}" enctype="multipart/form-data">
        {{csrf_field()}}
        <label>Upload Image</label>
        <input type="file" name="image" id="imgInp">
        <button type="submit">Submit</button>
</form>

here is my controller

public function thumbGenerator(Request $request)
    {   
        return $request->get('image');
  
    $fileType = "vector";
        $image = $request->get('image');            
        $saveFileType = "png";
        $imagePath = $image.".".$fileType;          
        
    $image1 = new User();
        $image1->readimage($imagePath);

        if($fileType == "vector"){
                $image1->setIteratorIndex(0);
        }
        
    $dimensions = $image1->getImageGeometry();
        $width = $dimensions['width'];
        $height = $dimensions['height'];
        
if($size == "large"){
        $maxWidth = 720;
            $maxHeight =720;
    }
    if($size == "small"){
        $maxWidth = 250;
        $maxHeight =250;
    }
    if($height > $width){
        //Portrait
        if($height > $maxHeight)
                $image1->thumbnailImage(0, $maxHeight);
                $dimensions = $image1->getImageGeometry();
                if($dimensions['width'] > $maxWidth){
                        $image1->thumbnailImage($maxWidth, 0);
                }
        }elseif($height < $width){
            //Landscape
            $image1->thumbnailImage($maxWidth, 0);
        }else{
                //square
            $image1->thumbnailImage($maxWidth, 0);
        }
        if($size == "large"){
                $image1->writeImage($dir ."-lg.".$saveFileType);
                return $image1;
        }
        if($size == "small"){
                $image1->writeImage($dir ."-sm.".$saveFileType);;
        }
    }
Sinnbeck's avatar

You start by returning the image data?

    return $request->get('image');
1 like
vandan's avatar
Level 13

@sinnbeck sorry

but when try to error Method Illuminate\Database\Query\Builder::readimage does not exist.

Sinnbeck's avatar

That is because you are setting $image1 to User instead of Imagick

$image1 = new Imagick();
1 like
vandan's avatar
Level 13

@sinnbeck @sti3bas ok i add $image1 = new Imagick();

error Class 'App\Http\Controllers\Imagick' not found

how to add imagick library namespace in my controller

Sti3bas's avatar

@vandan you have to import it use Imagick; at the top, or add a backslash $image1 = new \Imagick();.

Sinnbeck's avatar

You might also need to either add use Imagick in the top of the file or do

$image1 = new \Imagick();
1 like
vandan's avatar
Level 13

@sti3bas yes it work but when i try to upload same null image cant upload null in $image

$image = $request->file('image');
    return $image;  

<input type="file" name="image" >
vandan's avatar
Level 13

@sinnbeck i change but new issue when i store image but null image cant be fetch $image null

Sti3bas's avatar

@vandan are you importing right Request class? It should be Illuminate\Http\Request.

1 like
vandan's avatar
Level 13

@sti3bas yes offcourse sir

see

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Imagick;
vandan's avatar
Level 13

@sinnbeck @sti3bas i m using image intervation error like Unsupported image type. GD driver is only able to decode JPG, PNG, GIF or WebP files.

here is my code

$originalImage = Input::file('image');
    $thumbnailImage = Image::make($originalImage);
    $thumbnailPath = public_path().'/thumbnail/';
    $originalPath = public_path().'/images/';
    $thumbnailImage->save($originalPath.time().$originalImage->getClientOriginalName());
    $thumbnailImage->resize(150,150);
    $thumbnailImage->save($thumbnailPath.time().$originalImage->getClientOriginalName()); 

    $imagemodel= new User();
    $imagemodel->filename=time().$originalImage->getClientOriginalName();
    $imagemodel->save();

    return back()->with('success', 'Your images has been successfully Upload');
Sti3bas's avatar

@vandan well, the error says everything, GD only supports JPG, PNG, GIF, WebP types.

1 like
vandan's avatar
Level 13

@sti3bas yes sir my image .ai (vector) so how to upload and convert into png or jpg

Sti3bas's avatar

@vandan I've already posted you a link with a script, you just have to install Imagick extension.

1 like
vandan's avatar
Level 13

@sti3bas ok i try and error this unable to open image `/tmp/phpc4xDaJ.ai': No such file or directory @ error/blob.c/OpenBlob/2701

Sti3bas's avatar

@vandan I guess you have to store the image first:

$path = $request->file('image')->store('images');
$image1 = new \Imagick();
$image1->readimage($path);
1 like
vandan's avatar
Level 13

@sti3bas ok t try also first store but not authorized `images/ewbd8h145Swaqy2Jn5hEdAbrinmrvIpMWi4Ms5E9.pdf' @ error/constitute.c/ReadImage/412

vandan's avatar
Level 13

@sti3bas unable to open image `images/ozuW2q7P4vyOKWRYfNVHQ7snqwn0IDJbcrQ4cucL.pdf': No such file or directory @ error/blob.c/OpenBlob/2701

Next

Please or to participate in this conversation.