i am facing strange issue. When i upload the image(jpg,jpeg,png) file using livewire its working fine but when i try to upload any other file type its giving me error this error This driver does not support creating temporary URLs. Not sure is livewire doesnot support to upload doc, docx, pdf, csv xls, xlsx if yes its very strange?. Or i am doing something wrong in code. here is my below code:-
<form wire:submit.prevent="save">
<input type="file" wire:model="documnet">
#error('documnet') <span class="error">{{ $message }}</span> #enderror
<!-- Progress Bar -->
<div x-show="isUploading">
<progress max="100" x-bind:value="progress"></progress>
</div>
<div wire:loading wire:target="save">Uploading...</div>
<button type="submit">Save documnet</button>
</form>
In this user input any type of document (jpg, jpeg, png , doc, docx, pdf, csv xls, xlsx ). Here is my below component code
public function save(){
$extension = $this->document->getClientOriginalExtension();
// Filename to store
$fileNameToStore = uniqid().'_'.time().'.'.$extension;
// Upload Image
$path = $this->document->storeAs('public',$fileNameToStore);
}
Can anyone help me what i am doing wrong or livewire not supports to upload these extensions?
publish the config file with,
php artisan livewire:publish --config
Then add mime type of file you want to upload to preview_mimes under the temporary_upload_file in config file.
Supported file types for temporary file urls are set in:
config/livewire.php temporary_file_upload->preview_mimes array for support
Related
Hi i am building a laravel-livewire app on heroku
the app requires file upload and I'm using FileUpload of livewire, it works fine on local, but when I try it on heroku, it says upload successful, but when I download the file it gets "No file" message. I don't know where the error lies.
here is my source code:
_ In controller:
public function updatedFile()
{
// $this->validate();
$fileUpload = new File();
$fileUpload->url = $this->file->storeAs('public/files/' . auth()->id(), $this->file->getFilename());
$fileUpload->size_file = $this->getFileSize($this->file);
$fileUpload->file_name = $this->file->getClientOriginalName();
$fileUpload->model_name = $this->model_name;
$fileUpload->model_id = $this->model_id;
$fileUpload->admin_id = auth()->check() ? auth()->id() : null;
$fileUpload->save();
if ($this->model_id == null)
$this->list[] = $fileUpload->id;
}
_ In view
<a href="{{ $canDownload ? asset('storage/' . substr($val['url'], 7, strlen($val['url']) - 7)) : '#' }}" download>
<span class="d-block mb-0" style="word-break: break-all;">{{ $val['file_name'] }}</span>
<small class="kb">{{ $val['size_file'] }}</small>
</a>
```
The immediate issue may just be with relative vs. absolute paths.
But even once you resolve that you'll find that your uploads disappear frequently and unpredictably. This is due to Heroku's ephemeral filesystem.
To store uploads long-term you'll need to use a third-party service like Amazon S3 or Azure Blob Storage. It looks like Livewire supports this directly:
The previous example demonstrates the most basic storage scenario: Moving the temporarily uploaded file to the "photos" directory on the app's default filesystem disk.
However, you may want to customize the file name of the stored file, or even specify a specific storage "disk" to store the file on (maybe in an S3 bucket for example).
It also provides the following example:
// Store in the "photos" directory in a configured "s3" bucket.
$this->photo->store('photos', 's3');
And links to the relevant Laravel documentation, saying that Livewire uses the same API. Just make sure to configure an S3 bucket.
You can also completely bypass your server, having uploads go directly from the user's browser to your S3 bucket. This is particularly useful with large uploads.
Make sure to use the correct disk when building your download URL.
I have connected my laravel project with my network folder and connected it to a local folder,
code to upload it to the network folder
$destinationPath = Storage::disk('shared')->url('uploads/files/') . $name;
so its a console command while running pdf files being uploaded to my network drive
I need is to download such uploaded files through my view
example file location would be like this
file://laptop-lo2am2jp/storage/uploads/files/aa.pdf
so while uploading I am inserting it to a database column, so I am passing the URL to view
view code
<div class="col-md-3">
<a href="{{$example->url}}">
<button type="button" class="btn btn-primary">View pdf</button>
</a>
</div>
when I click it loads with my localhost URL and saying no such files
http://localhost:8000/laptop-lo2am2jp/storage/uploads/files/aa.pdf
can someone help with these,
I am not sure am I explained it properly
Thank you
At first, write your path to database
public function update(Request $request)
{
$path = $request->file('avatar')->store('avatars');
return $path;
}
Then you have this path to download.
Or you can use PHP substr() to return a part of your string.
I am using Laravel 5.8 and Vue 2.6 and trying to use a relative path for an image file in my single file component. I have reviewed the suggestions in How to import and use image in a Vue single file component?
but cannot get it to work.
When trying:
<template>
<div id="app">
<img src="./assets/logo.png">
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
</style>
I get this:
This relative module was not found:
* ./assets/logo.png in ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib?
?vue-loader-options!./resources/js/components/xxxx.vue?vue&type=template&id=abd0e146&scoped=true&
When I try:
<template>
<div id="app">
<img :src="image" />
</div>
</template>
<script>
import image from "./assets/logo.png"
export default {
data: function () {
return {
image: image
}
}
}
</script>
<style lang="scss">
</style>
I get:
This relative module was not found:
* ./assets/logo.png in ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js /components/xxxx.vue?vue&type=script&lang=js&
Am I missing something with webpack-mix or vue-loader?
Edit:
Using simple static reference (src="/assets/logo.png") works on local development server, but doesn't on production server.
I've seen numerous suggested solutions for this basic image file referencing, but puzzled that there are so many possibilities and not a single best practice. Again, hoping to find a Best Practice when using Laravel/Laravel Mix/Vue and SFC that works in development and production.
There are 2 ways of using an image in your setup:
Bundled with webpack
<img src="./assets/logo.png">
import image from "./assets/logo.png"
These bundle the image using webpack, and using this solution you get the benefits of:
Automatic inlinening with base64 for small images
Automatic "deep" compressing with any webpack loaders
Path works from every path in your app
Compile time checking if the file exists
Using your own webserver
const image = '/assets/logo.png'
const image = 'http://example.com/’
In these solutions, you need to setup your webserver yourself to serve those resources (or put them in the public directory)
Easy changing to a different image without rebuilding the front end
More flexible
The answer to this is that the wrong deployment for the production server was being used that tried pointing to the 'public' folder instead of locating the public files on public_html.
After deploying according to this post, of course relative paths work exactly the same on development and production servers.
The only difference is in Step 5 for Laravel 5.8 in the server.php file,
Change
if ($uri !== '/' && file_exists(__DIR__.'/public'.$uri)) {
return false;
}
To
if ($uri !== '/' && file_exists(__DIR__.'/public_html'.$uri)) {
return false;
}
Relative paths like
<img src="img/logo.png">
on either server work the same.
It's unfortunate that Laravel docs don't go into more detail on this method of deployment since I suspect there are numerous developers wanting to deploy on shared servers at least for testing purposes.
Use
<img src="#/assets/logo.png">
This will use webpack and created a hashed version of your logo.png.
Or in JS use:
:src="require('#/assets/logo.png');
Provided that your image is stored in public folder and is accessible, you can link to it by absolute path just fine instead of using a relative path ./
<template>
<div id="app">
<img src="/public/img/widgets/logo.png" />
</div>
</template>
<script>
export default {};
</script>
<style lang="scss">
</style>
Given you have this structure
Hope this helps
How can i display image form database ? in react ? i am using laravel as backend .this is my table with image
i am using {this.props.obj.image} and this is showing the file as shown below
as you can see it is showing the file it is not displying image .searched web but it says to import path but all the tutorial are importing statically
my image location is Assets/Admin/Image .
How can i resolve this
When you run a laravel project, you are already in the public folder so you don't have to specify the public folder in the path and "assets" is just a laravel-defined method for accessing the contents of the "public" directory so you shouldn't specify that in the path too.
So you should do something like this:
<img src="http://localhost:<your_port>/images/{this.props.obj.image}" alt="hello image" height="200" />
You are storing just the name of the file in the database, to load the image you need to complete the full path of the image.
If you are storing your files in:
{laravel_root_folder}/public/assets/images/
Then you should do something like this (btw I know nothing about react but this should kinda work). I'm asuming you are running your server in localhost in the 8000 port:
<img src="http://localhost:8000/assets/images/{this.props.obj.image}" alt="hello image" height="200"/>
You can not have directly access to public/storage/images from react (front end side ) for that you have to use following method to generate the URL of image and then just return that url to react side while requesting and use that url in < img src={url} /> to display the picture
https://laravel.com/docs/5.4/filesystem#file-urls
I'm using fine-uploader with AngularJS. This is the configuration I am using in my HTML file:
<div fine-uploader
upload-server="{{ uploadServer }}"
not-available-placeholder="/vendor/jquery.fine-uploader/placeholders/not_available-generic.png"
waiting-placeholder="/vendor/jquery.fine-uploader/placeholders/waiting-generic.png"
max-file-size="10000000"
large-preview-size="500"
allowed-mimes="image/jpeg, image/png"
allowed-extensions="jpeg, jpg, png"
token="{{ token }}">
</div>
How do I:
Handle file upload errors? For example, I would like to display a custom AngularJS dialog when an upload error happens. Is there any sample code that illustrates how to do this? I already have my own dialog code I can call.
Limit the number of retries to 1?