Good day Developers
I have this code that comes built in laravel jetstream:
input:file
<input type="file" class="hidden"
wire:model="photo"
x-ref="photo"
x-on:change="
photoName = $refs.photo.files[0].name;
const reader = new FileReader();
reader.onload = (e) => {
photoPreview = e.target.result;
};
reader.readAsDataURL($refs.photo.files[0]);
"/>
and explorer trigger:
<x-jet-secondary-button class="mt-2 mr-2" type="button" x-on:click.prevent="$refs.photo.click()">
{{ __('Select A New Photo') }}
</x-jet-secondary-button>
When I click on the button, it shows the explorer, the problem is that after selecting the image I want to upload, it reopens the file explorer again (Then I have to select the very same image for the second time) before it can successfully upload the image.
I tried searching the net for a solution but I'm really new to alpine and livewire I couldn't come to a solution.
If anyone can point out where the issue is, I'd appreciate it.
Thank you in advance.
I got the same problem loading livewire twice, in my case, i was importing another js file in resources/app.js which is imported by the app's webpack-mix.js. And that additional file had a copy of resources/app.js, effectively loading Alpine twice and triggering events twice. After i removed the import, events fired only once.
Related
My web is Laravel-VueJs App, I managed to sign in to Tableau server automatically in the background, (but without getting Auth tickets (I'm not sure if I need tickets for Javascript API yet), I'm trying to show my workbooks on my web page but getting blank page without any error, however this is my code
first added Javascript API in my app.blade.php
<script type="text/javascript" src="https://my-server-url/javascripts/api/tableau-2.8.0.min.js"></script>
and this is the Vue component where I need to show workbooks
<template>
<div>
<div
ref="tableau"
style="width:800px; height:700px;"
/>
</div>
</template>
<script>
export default {
name: "TableauWorkbookShow",
props: {
url: {
type: String,
required: true,
},
},
mounted(){
this.initViz();
},
methods: {
initViz() {
// url looks something like this: https://my-server-url/#/site/my-site-name/views/workbook-name/view-name
var viz = new tableau.Viz(this.$refs.tableau, this.url);
}
}
};
</script>
no errors, neither info on the page, anything else i need to consider here ? and should I add Auth tickets to the url to get workbooks or the url as it is now is fine to work?
One way to test would be to use the Embed code directly from the workbook on Server.
Click Share
Then click Copy Embed Code.
Paste this code directly into your html/view. It should have everything included to populate your dashboard into a webpage.
If this works, you know that your overall auth is working and you can troubleshoot the differences of your js to the embed code.
If auth doesn't work you should still see this screen if your js/html is working correctly.
I have one button called View Resume. When the user clicks on the button i want to download the resume and store it in the downloads folder.
I stored the resume in my table. I just want to download it by using vue.js
I already search in google. But i didn't find any correct results.
here is my button:
<ElButton type="success"
size="small">
Resume
</ElButton>
Can anyone help me please?
In vour vue component:
...
<button #click="getResume">Download resume</button>
...
methods: {
...
getResume() {
...code to perform a request to the api...
}
}
In your API controller:
... code to get the path to the correct resume ...
return response()->download('...path to resume file...');
I'm working with jquery.steps plugin, but when I open the page in browser, I get the message 'TypeError: $(...).steps is not a function'. Here is my example code (I'm using Laravel):
{!! HTML::script(asset("/js/wizard.js")) !!} {{-- wizard.js contains jquery.min.js and jquery.steps.min.js, generated via gulp --}}
<div id="wizard">
<h1>First Step</h1>
<div>First Content</div>
<h1>Second Step</h1>
<div>Second Content</div>
</div>
<script>
var wizard = $("#wizard").steps();
wizard.steps("add", {
title: "HTML code",
content: "<strong>HTML code</strong>"
});
</script>
Am I missing something basic, or this is not working as expected. Any suggestion is appreciated.
Thanks in advance
Make sure you do not import jquery twice. If you downloaded your jquery.steps library via a package manager, it might have downloaded jquery library as a dependency of jquery.steps so that causes a conflict with your already imported jquery file. You can also try to use a standalone version of jquery.steps.
I am trying to integrate fine uploader into my hybrid mobile app (using Icenium). I have all the files needed and the uploader runs perfectly when I'm running the app in the simulator. When I run my app on my iphone I get the [FineUploader 3.6.0] [object File] is not a File or INPUT element! Ignoring!. I can't for the life of me figure out why I would be getting this.
This is my config...
$(document).ready(function() {
$('#fineUploader').fineUploader({
request: {
endpoint: 'uploadurl'
}
});
});
I have navigated to the demo page for the jquery wrapper which uses the previous config and the demo runs fine. Any ideas? I'm not sure how to debug this any further.
Thanks
EDIT:
View -
<div data-role="view" id="queue-view" data-title="Queue" data-show="app.queueView.show" data-transition="slide:left" style="display: none;">
<header data-role="header">
<div data-role="navbar">
<a data-align="left" data-icon="menuicon" data-role="button" data-click="app.applicationLayout.onMenuClick"></a>
<span data-role="view-title"></span>
</div>
</header>
<button id="filesButton">Add Files</button>
<div id="fineUploader" class="upload-cont">
</div>
<div id="fineUploader2" class="upload-cont">
</div>
<input id="cameraButton" type="file" name="camera" accept="image/*;capture=camera">
</div>
ViewModel (app.queueView.show) -
$('#fineUploader').fineUploader({
request: {
endpoint: 'uploadurl'
}
});
I have also tried the direct from camera code which simply gives me undefined errors. That's why there is an extra fineUPloader2 and the cameraButton. I have tried a lot of things and all seem to result in either undefined errors or the No files error.
I'm also using require.js to bring in my javascript files (which I have many since I have set my project up using MVVM).
Thanks
Your issue was caused by a bug in Fine Uploader that appeared only when File objects are created in a frame/window/context other than the frame/window/context where the uploader instance was created. There are a couple issues filed here. Yours, (#870) and another, similar issue (#866). The issue was caused by the use of instanceof to determine if an object was a File. Both cited issues have been fixed in the associated hotfix branch in the Github project. I plan on pushing out a 3.6.1 hotfix release with these fixes in the next 24 hours or so.
i want to upload a gif file in my application using selenium codes in firefox,
i have the following file input type:
<input id="file" type="file" size="27" value="Attach document" onclick="javascript:return processAttachment();" name="file">
i have tried this code:
driver.findElementByName("file").sendKeys("E:/plus.GIF");
driver.findElementByName("file").click();
but its is not working, instead a file upload window is opening, can any one help me getting out of it.please
thank you
With this line driver.findElementByName("file").click(); you are "trying" to click the field , where you typed the text.It should be driver.findElementByName("NAME OF THE SUBMIT BUTTON").click();