I was trying to test the file upload feature of the web platform using the cypress-file-upload package on jQuery.filer but unexpected behavior was met. Please see the attached code snippets for reference:
.html
<div>
<div class="form-group">
<h5 class="fs-subtitle">National card ID (NRIC) front </h5>
<input type="file" name="nric_front" id="filer_input"
class="form-control nric_front" required>
</div>
</div>
.js
$('#filer_input').filer({
showThumbs: true,
addMore: false,
allowDuplicates: false,
extensions: ['pdf', 'jpg', 'png', 'jpeg'],
fileMaxSize: 10,
limit: 1,
changeInput: true,
removeConfirmation: true,
captions: {
feedback: "Choose file to upload",
removeConfirmation: 'Are you sure you want to remove this file?',
errors: {
filesLimit: 'Only 1 file are allowed to be uploaded.',
filesType: 'Only .pdf, .jpg, .png, .jpeg files are allowed to be uploaded.',
fileSize: '${name} is too large! Please choose a file up to ${fileMaxSize}MB.',
filesSizeAll: 'Files that you choose are too large! Please upload files up to ${fileMaxSize}MB.',
fileName: 'File with the name is already selected.',
folderUpload: 'You are not allowed to upload folders.'
}
}
});
.spec.js
cy.get('.jFiler-input').attachFile('example.jpg');
Cypress version: 6.2.1
Operating system: Pop OS 20.04
Browser: Chrome Version 87.0.4280.141 (Official Build) (64-bit)
Current behavior:
Expected behavior:
Any help is appreciated, thanks!
Note
HTML renders like this
<div class="jFiler-input">
<div class="jFiler-input-caption">
<span>Choose file to upload</span>
</div>
<div class="jFiler-input-button">Choose Files</div>
</div>
Ref jQuery.filer plugin.
From the examples, the rendered HTML is
<div class="jFiler jFiler-theme-default">
<input type="file" name="files[]" id="demo-fileInput-7" multiple="multiple"
style="position: absolute; left: -9999px; top: -9999px; z-index: -9999;">
<div class="jFiler-input">
<div class="jFiler-input-caption">
<span>Choose files To Upload</span>
</div>
<div class="jFiler-input-button">Choose Files</div>
</div>
</div>
so you would need to target the input sibling of .jFiler-input
cy.get('.jFiler-input')
.sibling('input')
.attachFile('example.jpg');
or from the top
cy.get('div.jFiler input')
.attachFile('example.jpg');
Related
I'm using Angular 13 and PrimeNG 13.4.1. I would like to have a label be directly above a text field, so I built
<div class="ui-fluid" style="padding-top: 200px; padding-bottom: 200px;">
<div class="p-field">
<span class="p-float-label">
<input type="text" formControlName="name" pInputText>
<label for="formLogoId">My Name</label>
</span>
</div>
</div>
However, when the field is rendered, the label appears superimposed over the text input ...
What's the proper way to position the label above the text field? I have this in my angular.json file, for waht it's worth ...
"styles": [
"node_modules/primeng/resources/themes/nova/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/primeicons/primeicons.css"
],
Based on the attached HTML, you are applying Float Label.
If you want the label to be positioned at the top of input field, you can refer to InputText Demo (the Invalid section part).
HTML
<div class="p-field">
<label for="formLogoId">My Name</label>
<input type="text" formControlName="name" pInputText />
</div>
CSS
.p-field > * {
display: block;
}
The CSS part is crucial, which all the elements under the element with the p-field class will be applied with style: display: block.
Without it, the <label> element will be at the left and the <input> element at the right (position).
Sample StackBlitz Demo
Output
You may consider for PrimeFlex, which is a CSS library for Prime UI.
Install primeflex library.
npm install primeflex
Import CSS in angular.json or root stylesheet.
"node_modules/primeflex/primeflex.css"
Apply PrimeFlex styling.
<div class="field">
<label for="formLogoId">My Name</label>
<input type="text" formControlName="name" pInputText class="w-full" />
</div>
Refer: FormLayout
Sample StackBlitz Demo (PrimeFlex)
I have searched everywhere, and all answers I found only explain how to rename the public folder. In my case, the public folder is outside the Project folder:
basefolder/
Laravel/
public_html/
I have done all changes I found for the renaming folder, and all works except for vue.
In the webpack file i entered this:
mix.setPublicPath('../public_html/');
mix.js('resources/js/app.js', 'js')
.sass('resources/sass/app.scss', 'css');
compiled, and it compiled the css and js file in the proper folder.
In my app.js i Declared this:
Vue.component('set-fav', require('./components/SetFavorite.vue').default);
and the file components/SetFavorite.vue exists and has its content...
<template>
<div>
<input type="image" src="/images/favorite.png" border="0" alt="Favorite" #click="setfavorite" />
</div>
</template>
<script>
export default {
props: ['photogId','galId','photoname'],
mounted() {
console.log('Component mounted.')
},
methods: {
setfavorite(){
axios.get('/' + this.photogId + '/' + this.galId + '/' + this.photoname + '/like')
.then(response => {
alert(response.data);
});
}
}
}
</script>
when i Load the page, i do not see the image. Instead in the developer console I see 2 error messages:
Uncaught SyntaxError: Cannot use import statement outside a module
and
app.js:38062 [Vue warn]: Unknown custom element: <set-fav> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root>)
and if I look at the source of my page, it begins like this:
<script>
import SetFavorite from "../../js/components/SetFavorite";
export default {
components: {SetFavorite}
}
</script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
...
...
Now, relative to my index.php file, the path ../../js/components/SetFavorite does not exist.. the correct existing path would be ../Laravel/js/components/SetFavorite
What do I need to do in order to fix this?
Thank you
EDIT, code of view
#extends('layouts.client')
#section('content')
<div class="container">
#if($gallery->webgal == 1)
<div class="row d-flex justify-content-around pb-3">
<h1>{{$gallery->galname}}</h1>
</div>
<div class=" row pt-1 card-deck">
#foreach($gallery->photos as $photo)
<div class="col-12 col-md-6 col-sm-12 p-1 " >
<div class="w-100 d-flex shadow justify-content-between card" style="background-color: lightgray">
<div class="w-100 m-0 p-0" style="width: 350px; height: 350px;">
<a data-fancybox="gallery" href="/images/{{auth()->user()->phcode}}/{{$gallery->galcode}}/wm/wm_{{$photo->filename}}">
<img class="card-img" src="/images/{{auth()->user()->phcode}}/{{$gallery->galcode}}/thumb/thumb_{{$photo->filename}}" style="
width:100%;
height:100%;
object-fit: scale-down;">
</a>
</div>
<div class="card-footer w-100 d-flex justify-content-around" style="font-size: smaller;">
<div class="d-flex justify-content-around w-100">
<div>
{{$photo->filename}}
</div>
<div>
<button>Download (Hi-Res)</button>
</div>
<div>
<button>Download (Social Res)</button>
</div>
<div>
<set-fav photogId="{{$gallery->user->phcode}}" galId="{{$gallery->galcode}}" photoId="{{$photo->filename}}" name="fav{{$photo->id}}"></set-fav>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
#else
<div class="row d-flex justify-content-around pb-3">
<h1>Nothing here... :)</h1>
</div>
#endif
</div>
#endsection
You have 2 issues:
You should alias your components directory thanks to Webpack, by the way it will always use an absolute path
In your webpack.mix.js:
mix.webpackConfig({
resolve: {
extensions: [ '.js', '.vue' ],
alias : { '#': `${ __dirname }/resources` },
},
output: {
publicPath : '/',
chunkFilename: 'js/[name].[chunkhash].js',
},
});
import SetFavorite from '#/js/components/SetFavorite';
If the last sample is the source code of your HTML document, it doesn't work because import and export are unknown to a web browser. You have to do it from an asset, build it with Laravel Mix and include the output to your HTML thanks to
<script type="text/javascript" src="{{ mix(...) }}"></script>
I was wondering if there is a way to specify an area within a form that has been initialzed as a dropzone element.
I have this markup
<form class="vertical-flow vertical-flow--mini" id="new-support-ticket-form" method="post" enctype="multipart/form-data">
//Have removed all other mark up for brevity
<div class="catalogue__upload">
<div class="file-upload placeholder">
<label class="is-hidden--text">#BackendText.Global_UploadFiles</label>
<div class="file-upload__inner" aria-hidden="true" role="presentation">
<div class="file-upload__icon" aria-hidden="true" role="presentation">
<svgicon iconid="page-upload"></svgicon>
</div>
<div class="file-upload__content">
<h3 class="heading heading--quaternary file-upload__heading">#BackendText.Global_DragAndDropFile</h3>
<p class="file-upload__sub-heading">
#BackendText.Global_Or_Lowercase <label id="file-upload-browse" class="file-upload__label">#BackendText.Global_Browse_Lowercase</label>
</p>
</div>
</div>
</div>
</div>
<br/>
<div class="button-group button-group--right">
<button class="button button--color-orange button--medium" type="submit">Create ticket</button>
</div>
</form>
I create the dropzone programmically via.
var dz = $("#new-support-ticket-form").dropzone({
// The configuration we've talked about above
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
previewTemplate: '<div style="display:none"></div>',
url: "#Url.Action("NewTicket")",
clickable: "#file-upload-browse",
// The setting up of the dropzone
init: function() {
var myDropzone = this;
}
});
I know the clickable option allows to have multiple elements or single one to bring up the file browser. However im wondering if there is a way to specify an element that is the "droppable" for files instead of the whole form. The element I would like is the div with the class catalogue__upload
The reason I have the whole form as the dropzone is that I want to upload additional data along with the file(s). The mark up for this is removed for the question, but its basically a bunch of selects and textboxes.
Instead of using whole form as the dropzone, it would be better to make just the element as dropzone and add additional data to the request using a sending event handler.
Hi have created a JSFiddle of my problem here.
http://jsfiddle.net/L7o1nct6/2/
I will also repeat the code here as Stackoverflow is forcing me to do.
JavaScript
<!-- using fine uploader 5.1.3 at http://keysymmetrics.com/jsfiddle/jquery.fine-uploader.js -->
$(document).ready(function()
{
$("#fine-uploader").fineUploader({
listElement: $('#listElement'),
debug: true,
template: 'qq-template-bootstrap',
request: {
endpoint: "/my-endpoint"
}
});
});
HTML
<script type="text/template" id="qq-template-bootstrap" class="qq-uploader-selector">
<div class="row">
<div class="col-sm-4" >
<div class="qq-upload-button-selector
qq-upload-drop-area-selector
drag-drop-area" >
<div>Drag and drop files here or click to upload</div>
</div>
</div>
</div>
<div class="qq-upload-list-selector" id="#listElement" >
<div class="panel panel-default" >
<div class="panel-body" >
<div class="qq-progress-bar-container-selector progress">
<div class="qq-progress-bar-selector progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-upload-size-selector qq-upload-size"></span>
<span class="qq-upload-status-text-selector qq-upload-status-text"></span>
<img class="qq-thumbnail-selector" qq-max-size="100" />
</div><!-- close panel-body -->
</div><!-- close panel -->
</div>
</script>
<h1>Fine Uploader Test</h1>
<div id="fine-uploader"></div>
When viewing the JSFiddle example, if you open the debug console, you will see the message "Uncaught Error: Could not find the file list container in the template!".
I am unsure what this means, I thought I could use the listElement property to tell fine-uploader which element to use for this list?
On a side note, if I cut and paste the div with id=listElement and move it adjacent to the div with class=qq-upload-button-selector then this example works fine.
Any help would be appreciated, I have spent hours on this and haven't found an answer for this on stackoverflow either.
A couple issues with your code:
"#listelement" is not a valid html element ID in all browsers.
You are attempting to select an element that does not yet exist in the DOM. It's not clear why you are specifying a list element anyway. Fine uploader should find the list in the template when it renders.
I have set up dropzone with a clickable element. Clicking the button causes dropzone to open the file chooser twice, instead of just once, the second coming immediately after the first file has been chosen.
The init code is:
Dropzone.autoDiscover = false;
$(document).ready(function(){
// Remove the template from the document.
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
$("div#photo").dropzone({
url: "/blackhole/",
thumbnailWidth: 240,
thumbnailHeight: 240,
parallelUploads: 1,
maxFiles:1,
maxFilesize: 5,
uploadMultiple: false,
previewTemplate: previewTemplate,
autoProcessQueue: true,
previewsContainer: "#photoPreview",
clickable: ".fileinput-button",
init: function() {
this.on("maxfilesexceeded", function(file) {
this.removeAllFiles();
this.addFile(file);
});
}
});
And the page elements are:
<div class="table table-striped" class="files">
<div id="photo">
<div id="actions" class="row">
<div class="col-lg-7">
<button type="button" class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Choose file...</span>
</button>
</div>
</div>
</div>
<div class="files dropzone-previews" id="photoPreview">
<div id="template" class="file-row">
<div>
<span class="preview"><img data-dz-thumbnail /></span>
</div>
<div>
<p class="name" data-dz-name></p>
<strong class="error text-danger" data-dz-errormessage></strong>
</div>
<div>
<p class="size" data-dz-size></p>
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
</div>
</div>
<div>
<button data-dz-remove type="button" class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
</div>
</div>
</div>
</div>
</div>
Strangely, even though I have added code to replace the any existing file with a later one (so only one file can be uploaded), the second file chooser dialog lets me add a second file.
Its like dropzone has been initialized twice, but I checked that it is only initialized once, and also added the autoDiscover = false option for good measure.
Can anyone spot my mistake?
The problem seems to be in how we initialized dropzone:
$("div#photo").dropzone({
...
}
Doing it the non-jquery way solved the problem:
var myDropZone = new Dropzone("#photo",{
...
}
This was on dropzone 3.11.1.
An issue has been created on github/dropzone:
https://github.com/enyo/dropzone/issues/771
This happens for me when more than one dropzone exists on the page with the same class for a browse trigger, it seems that dropzone attaches the event to any element on the page and not just within its own container
In the issue opened for this, maliayas said:
This bug happens when your clickable element is already an
input[type=file]. Dropzone injects another one and now you have two.
Either dropzone should handle this case or documentation should
mention not to use an input[type=file] for the clickable element.
Changing my dropzone element to something other than an input[type=file] fixed the issue for me.
Attach dropzone to the parent, not the input.
In Chrome if you inspect and look at the eventListeners. You will see that once you attach dropzone to your input, you have an additional click eventListener.
Say you have a list of uploads for documents with a child input element.
<li class="upload drag-and-drop">
<input type="file"/>
</li>
Code:
$('input').dropzone();
Will attach an event listener to an already clickable element. So you have 2 event listeners. One from the browser. One from dropzone. Hence 2 dialogs...
If you attach it to the parent:
$('li.upload').dropzone();
You'll now had the listener at the parent. This allows the bubble up behavior to hit the correct element when you drag and drop and not inadvertently effect the input.