youssefboudaya
3 months ago
698
16
Laravel

How to upload images with froala editor?

Posted 3 months ago by youssefboudaya

I have a laravel 5.5 project and i'm trying to upload images with the froala editor this is the script:

 $(function() {

        $('.selector').froalaEditor({

            enter: $.FroalaEditor.ENTER_P,

            placeholderText: null,

            height: 500,

            fileUploadURL: "{{ URL::to('administrator/froala-upload-file') }}",

            imageUploadURL: "{{ URL::to('administrator/froala-upload') }}",

            imageUploadParams: {

                id: 'edit_fr'

            }
        })

    });

and this is the function i'm using in the controller to upload:

 public function uploadImage()
{
    
    // Allowed extentions.
    $allowedExts = array("gif", "jpeg", "jpg", "png", "blob");
    //dd($_FILES);
    // Get filename.
    $temp = explode(".", $_FILES["file"]["name"]);

    // Get extension.
    $extension = end($temp);
    $name = sha1(microtime()) . "." . $extension;

    // An image check is being done in the editor but it is best to
    // check that again on the server side.
    // Do not use $_FILES["file"]["type"] as it can be easily forged.
    $finfo = finfo_open(FILEINFO_MIME_TYPE);
    $mime = finfo_file($finfo, $_FILES["file"]["tmp_name"]);

    if ((($mime == "image/gif")
    || ($mime == "image/jpeg")
    || ($mime == "image/pjpeg")
    || ($mime == "image/x-png")
    || ($mime == "image/png"))
    && in_array(strtolower($extension), $allowedExts)) {

        // Save file in the uploads folder.
        move_uploaded_file($_FILES["file"]["tmp_name"], getcwd() . "/uploads/froala/images/" . $name);

        // Generate response.
        $response = new StdClass;
        $response->link = "//127.0.0.1/isc/uploads/froala/images/" . $name;
        echo stripslashes(json_encode($response));
    }

    $path = "//127.0.0.1/isc/uploads/froala/images/" . $name;

    $img = New Imageget();
    $img->url = $path;
    $img->thumb = $path;
    $img->name = $name;
    $img->type = 'image';
    $img->tag = $mime;
    $img->save();
}

my form:

 {{ Form::open(array('action' => array('[email protected]', $page->id), 'method' => 'put' , 'files' => true, 'enctype' => 'multipart/form-data', 'data-toggle' => 'validator', 'role' => 'form' )  ) }}

        <div class="panel panel-default">

            <div class="panel-heading">

                <i class="fa fa-file-text-o"></i>

                Image

                <div class="panel-tools">

                    <a class="btn btn-xs btn-link panel-collapse collapses" href="#">

                    </a>

                    <a class="btn btn-xs btn-link panel-expand" href="#">

                        <i class="clip-fullscreen"></i>

                    </a>

                </div>

            </div>

            <div class="panel-body">                        

                <div class="form-group text-center space20">

                    <label>

                        Image <span class="symbol required"></span>

                    </label>

                    <div class="fileupload fileupload-new" data-provides="fileupload">

                        <div class="fileupload-new thumbnail form-control" style="max-width: 800px; max-height: 340px;">

                            @if(File::exists($page->photo))

                            {{ HTMl::image($page->photo, $page->title_fr) }}

                            @else

                            <img src="//www.placehold.it/960x410/EFEFEF/AAAAAA?text=960+*+410" alt="{{ $page->title_fr }}" class="img-responsive" />

                            @endif

                        </div>

                        <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 800px; max-height: 340px; line-height: 20px;"></div>

                        <div>

                            <span class="btn btn-light-grey btn-file">

                                <span class="fileupload-new"><i class="fa fa-picture-o"></i> Sélectionner</span>

                                <span class="fileupload-exists"><i class="fa fa-picture-o"></i> Modifier</span>

                                <input name="photo" type="file" accept="image/*">

                            </span>

                            <a href="#" class="btn fileupload-exists btn-light-grey" data-dismiss="fileupload">

                                <i class="fa fa-times"></i> Supprimer

                            </a>

                        </div>

                    </div>

                    <div class="row">

                        <div class="col-sm-8 col-sm-offset-2">

                            <a onclick="removeFunction({{ $page->id }})" class="btn btn-bricky tooltips delete-btn"><i class="fa fa-times"></i> Supprimer l'image</a>

                        </div>

                    </div>

                </div>

                @if(Auth::user()->idRole == '1')

                <div class="row">

                    <div class="col-sm-6 col-sm-offset-3">

                        <div class="form-group">

                            <label class="control-label">

                                Identifiant <span class="symbol required"></span>

                            </label>

                            <input name="identifiant" value="{{ $page->identifiant }}" type="text" placeholder="Identifiant" data-error="Seulement les caractères alphanumériques, les '-' et les '_' sont autorisés" class="form-control" pattern="[-.-_A-z0-9]{1,}" required>

                            <div class="help-block with-errors"></div>

                        </div>

                    </div>

                </div>

                @endif

            </div>

        </div>

        <div class="row">

            <div class="col-sm-6 frensh-bg">

                <!-- start: TEXT FIELDS PANEL -->

                <div class="panel panel-default">

                    <div class="panel-heading">

                        <i class="fa fa-star"></i>

                        Information (FR)

                        <div class="panel-tools">

                            <a class="btn btn-xs btn-link panel-collapse collapses" href="#">

                            </a>

                            <a class="btn btn-xs btn-link panel-expand" href="#">

                                <i class="clip-fullscreen"></i>

                            </a>

                        </div>

                    </div>

                    <div class="panel-body">

                        @if($page->identifiant == 'important'||$page->identifiant =='inscription'||$page->identifiant == 'reinscription')

                        <div class="form-group">

                            <label>

                                Ajouter un fichier (FR)

                            </label>

                            <div class="fileupload {{ $page->file_fr != '' ? 'fileupload-exists' : 'fileupload-new' }}" data-provides="fileupload">

                                <div class="input-group">

                                    <div class="form-control uneditable-input">

                                        <i class="fa fa-file fileupload-exists"></i>

                                        <span class="fileupload-preview">{{ $page->file_fr }}</span>

                                    </div>

                                    <div class="input-group-btn">

                                        <div class="btn btn-light-grey btn-file">

                                            <span class="fileupload-new"><i class="fa fa-folder-open-o"></i> Choisir</span>

                                            <span class="fileupload-exists"><i class="fa fa-folder-open-o"></i> Changer</span>

                                            <input type="file" name="file_fr" class="file-input" accept=".doc, .docx, .rtf, .pdf, .xls, .xlsx">

                                        </div>

                                        <a href="#" class="btn btn-light-grey fileupload-exists" data-dismiss="fileupload">

                                            <i class="fa fa-times"></i> Supprimer

                                        </a>

                                    </div>

                                </div>

                            </div>

                        </div>

                        @endif

                        <div class="form-group">

                            <label class="control-label">

                                Titre (FR) <span class="symbol required"></span>

                            </label>

                            <input name="title_fr" value="{{ $page->title_fr }}" type="text" placeholder="Titre (FR)" class="form-control" required>

                        </div>

                        <div class="form-group">

                            Déscription (FR) <span class="symbol required"></span>

                            <textarea id='edit_fr' class="form-control selector" name="description_fr" style="margin-top: 30px;">

                                {{ $page->description_fr }}

                            </textarea>

                        </div>

                    </div>

                </div>

                <!-- end: TEXT FIELDS PANEL -->

            </div>

            <div class="col-sm-6 english-bg">

                <!-- start: TEXT FIELDS PANEL -->

                <div class="panel panel-default">

                    <div class="panel-heading">

                        <i class="fa fa-star"></i>

                        Information (EN)

                        <div class="panel-tools">

                            <a class="btn btn-xs btn-link panel-collapse collapses" href="#">

                            </a>

                            <a class="btn btn-xs btn-link panel-expand" href="#">

                                <i class="clip-fullscreen"></i>

                            </a>

                        </div>

                    </div>

                    <div class="panel-body">

                        @if($page->identifiant == 'important'||$page->identifiant =='inscription'||$page->identifiant == 'reinscription')

                        <div class="form-group">

                            <label>

                                Ajouter un fichier (EN)

                            </label>

                            <div class="fileupload {{ $page->file_en != '' ? 'fileupload-exists' : 'fileupload-new' }}" data-provides="fileupload">

                                <div class="input-group">

                                    <div class="form-control uneditable-input">

                                        <i class="fa fa-file fileupload-exists"></i>

                                        <span class="fileupload-preview">{{ $page->file_en }}</span>

                                    </div>

                                    <div class="input-group-btn">

                                        <div class="btn btn-light-grey btn-file">

                                            <span class="fileupload-new"><i class="fa fa-folder-open-o"></i> Choisir</span>

                                            <span class="fileupload-exists"><i class="fa fa-folder-open-o"></i> Changer</span>

                                            <input type="file" name="file_en" class="file-input" accept=".doc, .docx, .rtf, .pdf, .xls, .xlsx">

                                        </div>

                                        <a href="#" class="btn btn-light-grey fileupload-exists" data-dismiss="fileupload">

                                            <i class="fa fa-times"></i> Supprimer

                                        </a>

                                    </div>

                                </div>

                            </div>

                        </div>

                        @endif

                        <div class="form-group">

                            <label class="control-label">

                                Titre (EN)

                            </label>

                            <input name="title_en" value="{{ $page->title_en }}" type="text" placeholder="Titre (EN)" class="form-control">

                        </div>  

                        <div class="form-group">

                            Déscription (EN)

                            <textarea id='edit_en' class="form-control selector" name="description_en" style="margin-top: 30px;">

                                {{ $page->description_en }}

                            </textarea>

                        </div>

                    </div>

                </div>

                <!-- end: TEXT FIELDS PANEL -->

            </div>

        </div>

        <hr>

        <div class="row space20">

            <div class="col-md-4 hidden-xs"></div>

            <div class="col-md-4">

                <button class="btn btn-teal btn-block">

                    Modifier <i class="fa fa-arrow-circle-right"></i>

                </button>

            </div>

            <div class="col-md-4 hidden-xs"></div>

        </div>

    {{ Form::close() }}

I get "500 (Internal Server Error)" in the console and when i check the error it says "Undefined index: file"

Please sign in or create an account to participate in this conversation.