I am using dropzone.js to allow the users to upload multiple photos to the database. Before I set up the database for the image uploader feature, I wanted to see if the image can be saved into my desired folder. However, after successfully uploading 3 photos(since the tick logo was shown right after the image was uploaded, I assumed the image has been successfully uploaded), only 2 of them were present in the folder.
In the following codes I have listed the view(including javascript and html codes), route and controller file:
CSS ->
{{html::style('https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/min/dropzone.min.css')}}
HTML ->
{!! Form::open(array('route' => 'gallery.images.upload', 'class' => 'dropzone', 'enctype' => 'multipart/form-data','files' => true, 'id' => 'addImages', 'method' => "POST")) !!}
{{ Form::hidden('gallery_id', $gallery->id) }}
{!! Form::close() !!}
Javascript ->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/min/dropzone.min.js"></script>
<script type="text/javascript">
Dropzone.options.addImages = {
maxFilesize: 5,
acceptedFiles: 'image/jpeg,image/png,image/gif',
paramName: "file",
}
</script>
Route ->
Route::prefix('gallery')->group(function(){
Route::post('/images/upload', 'GalleryController#uploadGalleryImages')->name('gallery.images.upload');
});
Controller ->
public function uploadGalleryImages(Request $request)
{
if ($request->hasFile('file')) {
// Get the file from the file request
$file = $request->file('file');
// set my file name
$originalName = $file->getClientOriginalName();
$filename = uniqid() . $originalName;
$file->move('galleries/images/', $filename);
}
else{
return redirect()->route('gallery.view');
}
}
I have been asking around for several weeks but couldn't get any answer. I really need your help!
Screenshot of images being successfully uploaded
Screenshot of images present in the folder
This happened to me once because the server when going through the images it overwrites some images because they get the same filename, to avoid this use something like this to make sure you have unique filenames:
$random = mt_rand(1,1000);
$filename = time().''.$random. '.' . $file->getClientOriginalExtension();
Related
Hi i cant generate simpleqrcode in dompdf
Here is my blade.php
<img src="data:image/png;base64, {!! base64_encode(QrCode::format('svg')->size(200)->errorCorrection('H')->generate('string')) !!}">
in my controller
public function printpdf($isbn)
{
$data = [
'isbn' => $isbn
];
$pdf = PDF::loadView('main.inventory.view_pdf ', $data);
return $pdf->stream($isbn.'.pdf');
}
i tried this image and successfully render
<img src="{{ public_path('/uploads/image/1578635297.jpg')}}" style="width:30%;height:50%;">
Dont know why i cant generate qrcode to dompdf but when i generate in other blade its working but not in dompdf
I got mine working by initializing the base64_encode(QrCode::format('svg')->size(200)->errorCorrection('H')->generate('string')) in a variable within a controller, and passing it to the view.
Controller:
public function foobar() {
$qrcode = base64_encode(QrCode::format('svg')->size(200)->errorCorrection('H')->generate('string'));
$pdf = PDF::loadView('main.inventory.view_pdf', compact('qrcode'));
return $pdf->stream();
}
View:
<img src="data:image/png;base64, {!! $qrcode !!}">
Used laravel-snappy instead of laravel-dompdf. https://github.com/barryvdh/laravel-snappy
If you're still unable to generate a pdf file, then temporarily change the read-write permissions of the folder with chmod -R 777 <folder_path>.
I have made a youtube style website, some people may click the video to be private, I keep these videos in storage/app/vidoes/{channelname}, the public images and videos I have working not a problem but local storage I am having a problem with, any ideas?
just getting a 404 on the thumbnails
thanks
view
<img src="{{ route('home.image', ['file_path' => 'videos/' . $video->channel_name . '/thumbnails/' . $video->video_thumbnail_name]) }}" alt="" class="img-responsive">
route
Route::get('{file_path}', [
'uses' => 'HomeController#getImage',
'as' => 'home.image'
]);
controller
public function getImage($filepath)
{
$fileContents = \Storage::disk('local')->get($filepath);
$response = \Response::make($fileContents, 200);
$response->header('Content-Type', "image/jpg");
return $response;
}
Laravel 5.8 local storage working for images
view
<img class="home-video" src="{{ route('getImage', ['thumbnail' => $video->video_thumbnail_name, 'channel_name' => $video->channel_name]) }}" alt="" >
Route
Route::get('get-image/{channel_name}/{thumbnail}','HomeController#getImage')->name('getImage');
Controller
public function getImage($channel_name,$thumbnail)
{
$fileContents = \Storage::disk('local')->get("videos/$channel_name/thumbnails/$thumbnail");
return \Image::make($fileContents)->response();
}
see how the thumbnail is important for me, I was passing the thumbnail name eg photo.jpg if you are using route model binding you would want to pass the id of the image, hope this saves someone a few hours
I want to use dropzone to upload multiple images with another form inputs
so i want a div that show the images when the user click,
also i have a button that trigger the form.
i have this but its not working
html:
<div class="col-md-12">
<h1>Upload Multiple Images using dropzone.js and Laravel</h1>
{!! Form::open([ 'route' => [ 'dropzone.store' ], 'files' => true, 'enctype' => 'multipart/form-data', 'class' => '', 'id' => '' ]) !!}
{!! Form::text('name'); !!}
<div class="dropzone" id="image-upload">
<h3>Upload Multiple Image By Click On Box</h3>
<button type="submit" class="btn btn-success" id="submit-all">
Enviar files
</button>
</div>
{!! Form::close() !!}
</div>
dropzone:
Dropzone.autoDiscover = false;
var imageUpload = new Dropzone("div#image-upload", {
url: "dropzone/store",
autoProcessQueue:false,
uploadMultiple: true,
maxFilesize:5,
maxFiles:3,
acceptedFiles: ".jpeg,.jpg,.png,.gif",
init: function() {
var submitButton = document.querySelector("#submit-all")
//imageUpload = this; // closure
submitButton.addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
imageUpload.processQueue(); // Tell Dropzone to process all queued files.
});
// You might want to show the submit button only when
// files are dropped here:
this.on("addedfile", function() {
// Show submit button here and/or inform user to click it.
});
}
}
this gave me this error:
http://127.0.0.1/project/public/dropzone/store 419 (unknown status)
myController:
public function dropzone()
{
return view('dropzone-view');
}
/**
* Image Upload Code
*
* #return void
*/
public function dropzoneStore(Request $request)
{
$dir = public_path().'/upload/';
$files = $request->file('file');
foreach($files as $file){
$fileName = $file->getClientOriginalName();
$file->move($dir, $fileName);
}
}
routes: web.php
Route::get('dropzone', 'HomeController#dropzone');
Route::post('dropzone/store', ['as'=>'dropzone.store','uses'=>'HomeController#dropzoneStore']);
Laravel returns a 419 response when there is a token mismatch problem. The code you've shown POSTs files to your server, but does not pass a _token with the request. The web middleware, which is applied by default, will do token verification, and since there is no token, that will fail and throw a 419.
You can probably see this yourself if you look in your browser's devtools, click the network tab, click the POST request where the file is uploaded, and click the Preview or Response tabs.
So you need to pass a _token along with the request. There are many ways to do that, but the simplest is probably what is described in the docs:
Add the token to your <head>
<meta name="csrf-token" content="{{ csrf_token() }}">
Automatically pass it with every AJAX request:
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
Hello I'm trying to preview files from public folder so users can make sure it is the file they are trying to delete.
Here is my current code:
HTML
<a href="{{ route('preview_attachment', $material->filename) }}" class="btn btn-warning btn-sm">
Preview
</a>
Controller
public function previewAttachment($filename) {
$file = public_path('training/attachments/' . $filename);
return Response::make(file_get_contents($file), 200, array(
'Content-Type' => File::mimeType($file),
'Content-Disposition' => 'inline; filename="' . $filename . '"',
));
}
It is not working. Instead of showing a preview of the file, it prompts me to download the file. Any help please.
The filetypes range from word docs, excel, ppt, pdf, images.
Edit :
I have tried uploading images and pdf files, and it is working. however on word docs it is not working
As stated here :
No browsers currently have the code necessary to render Word
Documents.
As of now, all latest browser does not support YET . Maybe in the near future, it will.
Other alternatives is to let the user check the other details of the file such us Title, Type, Date or whatever. Maybe you make some function on hover event and show them details.
public function previewAttachment($filename) {
$file = public_path('training/attachments/' . $filename);
return Response::make(file_get_contents($file), 200, array(
'Content-Type' => File::mimeType($file),
'Content-Disposition' => 'inline; filename="' . $filename . '"',
));
}
try doing this on your blade template my firend:
<iframe src="{{asset('training/attachments/'.$filename)}}"></iframe>
I have been trying to implement a dropzone file upload module with Laravel 5.
The problem is that when a file is uploaded dropzone sends the full request to the file upload controller, however, the controller does not get any data.
What am I missing? I have included the code I'm using. Thanks in advance for your time/help.
The view
{!! Form::open( array( 'url' => 'admin/file/upload', "id"=>"file-upload-modal", 'class'=>"dropzone" ) ) !!}
{!! Form::close() !!}
Controller
public function upload(FileUploadRequest $request){
//addeed this line for testing. //returns request array with an empty data set.
return response()->json($request);
if($request->hasFile('file')){
$request->file('file')->move('images');
}
}
It returns a 200 status code and dropzone thinks the file gets uploaded. However the response is actually an empty data set
response:
{"attributes":{},"request":{},"query":{},"server":{},"files":{},"cookies":{},"headers":{}}