Level 28
You don't use $_FILES directly with laravel. Check the documentation again:
Oct 8, 2019
17
Level 2
How to upload images with froala editor?
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('ModulepageController@update', $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"
Level 2
"return $request->all();" gives empty array
Level 1
try this request()->image->move(public_path('uploads/froala/images/'), $path);
Level 1
and try to use request validate for all the validation you are doing for image
Level 2
"Call to a member function move() on null"
Level 1
try do the validation first for the input file
if (Input::file('image')) {
dd('get the image);
}
dd('not get the image');
Level 2
"imageUploadParam: 'file'," is set by default so i did this "if (Input::file('file')) { dd('get the image');} dd('not get the image');" i got "not get the image"
Level 1
so you are not getting the image check the form tag did you placed this ?
enctype="multipart/form-data"
Level 2
yes i already have this 'files' => true, 'enctype' => 'multipart/form-data'
Level 1
show you from submission code
Level 2
the form html code you mean ?
Level 1
yes, and place this dd(request()->all()); in your controller and show the response as well
Level 2
i updated my question to include the from html code and dd(request()->all()); returns "[]"
Level 1
your image input tag name is file_en ? correct me if i am wrong
Level 2
no that's displayed from the database the image input tage name is by default "file" in froala
Level 4
Did you make this work? I just resolved this yesterday and upload image is working fine on Froala
Level 1
@ferba24 can you plz share it Kindly
Please or to participate in this conversation.