We are trying to upload file using TestCafe code, but its not uploading the file.
There's no IFrame.
The input control is inside simple div>label structure
Kindly suggest. Thanks
<div>
<label>
<div>..svg stuff..</div>
<input aria-label="Upload an image" tabindex="0" type="file" multiple="" accept="image/jpeg, image/png" data-testid="imageInputTest" class="ImageInputstyles__Input-sc-7878w-7 aosVy">
</label>
</div>
Code snippet:
fixture `Example`
.page `https://ourURL.com/YOUR PATH/`;
test('Upload Files test', async t => {
await t
.setFilesToUpload('.dx-fileuploader-input',
'path/to/file_to_be_uploaded/on/your/machine'
]);
});
We also checked that- its not uploading to the server.
More ref: https://devexpress.github.io/testcafe/documentation/reference/test-api/testcontroller/setfilestoupload.html
try
await t
.setFilesToUpload(Selector('input').withAttribute('type', 'file'), [
path
]);
Related
I am using Alpine JS in .NET Core 6 MVC project. I have loaded the alpine js file from https://unpkg.com/alpinejs#3.x.x/dist/cdn.min.js. I then added the following code in the Home/Index.cshtml file.
<form id="myForm"
x-data="createFormComponent()"
x-on:submit.prevent="onSubmit">
<input id="email" type="text" name="email"
x-model="email" />
<span class="error" style="display: none"
x-show="error"
x-text="error"
></span>
<button type="submit">Submit</button>
</form>
#section Scripts {
<script>
(function () {
'use strict';
window.createFormComponent = function () {
return {
email: '',
error: '',
onSubmit($event) {
this.error = !this.email
? 'You must enter an email address'
: '';
},
};
};
})();
</script>
}
But when I access the page in the browser, it always throws the error "Alpine Expression Error: createFormComponent is not defined". I have tried to put it into a js file and load it. Also tried to define the component in alpine:init event. None of them worked. The same code works in plain html file served from IIS. I am not sure what is wrong here. Can anyone please help.
Be sure add js in your _Layout.cshtml or in your current page #section Scripts {...} like below:
<script src="https://unpkg.com/alpinejs" defer></script>
Note: HTML defer attribute must be added.
I am building an Asp.Net Core web application using Razor.
The intended audience for this app will be using it on tablets.
Part of the application consists of several pages/forms that will require user signatures.
We could retrieve an image of a user's signature and display that on demand in the web page.
Is it possible to be more interactive and allow users to "sign" the form/page within the browser? Are there any 3rd party control libraries that would support this functionality?
I pretty sure this can be done on native applications, but can I achieve this through Asp.Net Core?
I found signature_pad in github, and it works for me.
You can take a look at the screenshots of my test steps first, and I will add the test code at the bottom.
Test Code
1. signature.cshtml
#*
For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*#
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad#2.3.2/dist/signature_pad.min.js"></script>
<form method="POST">
<p>
<canvas width="500" height="400" id="signature"
style="border:1px solid black"></canvas><br>
<button type="button" id="accept"
class="btn btn-primary">
Accept signature
</button>
<button type="submit" id="save"
class="btn btn-primary">
Save
</button><br>
<img width="500" height="400" id="savetarget"
style="border:1px solid black"><br>
<input id="SignatureDataUrl" type="text">
</p>
</form>
<script>
$(function () {
var canvas = document.querySelector('#signature');
var pad = new SignaturePad(canvas);
$('#accept').click(function () {
var data = pad.toDataURL();
$('#savetarget').attr('src', data);
$('#SignatureDataUrl').val(data);
pad.off();
});
$('#save').click(function () {
$.ajax({
url: "/ForTest/get_signature",
type: "POST",
data: { base64png:$('#SignatureDataUrl').val()},
success: function (data) {
console.log("success");
},
error: function (hata, ajaxoptions, throwerror) {
alert("failed");
}
});
});
});
</script>
2. C# code
[HttpPost]
public string get_signature(string base64png) {
var dataUri = base64png;//"data:image/png;base64,iVBORw0K...";
var encodedImage = dataUri.Split(',')[1];
var decodedImage = Convert.FromBase64String(encodedImage);
System.IO.File.WriteAllBytes("signature_pic/"+DateTime.Now.ToString("yyyyMMddHHmmss")+"signature.png", decodedImage);
return "ok";
}
Tips
If you want test my code, you need create signature_pic folder like me.
I'm trying to upload profile phoho in front end of OctoberCMS but with no luck.
Cannot catch it in the backend to save within the user.
Made everything exactly like in documentation of the CMS.
Need to make this work without any eternal plugins.
<form data-request="onCreateUser" data-request-update="user:'.res_user'" >
<input name="file_input" type="file" >
<button type="submit" class="subBtn">Create User</button>
</form>
In User i have:
public $attachOne = [
'avatar' => 'System\Models\File'
];
and this code:
$file = new System\Models\File;
$file->data = Input::file('file_input');
$file->is_public = true;
$file->save();
$model->avatar()->add($file);
Record stored in DB, but its empty. filesize = 0
Can anyone please help me with this?
Asked the big Bro, but found that this problem is very common, and have no solution.
Thanks
Update:
This is working, when I use this:
{{ form_open({files: true, request: 'onCreateConcert'}) }}
<!--File Input-->
<input type="file" name="file-upload" required="required">
<!--File Input-->
<!--Submit/Upload Button-->
<button type="submit">Upload</button>
{{ form_close() }}
but not with my form. whats i'm missing here?
I added as well token and session_key
{{ form_sessionKey() }}
{{ form_token() }}
It because you don't add enctype="multipart/form-data" to your form attribute.
When you use twig like {{ form_open({files: true, request: 'onCreateConcert'}) }}, the files: true will add attribute to your form to handle upload file. So the twig above will generate tag like below,
<form data-request="onCreateConcert" enctype="multipart/form-data">
try this:
use System\Models\File;
use Input;
[...]
if (Input::file("file_input")) {
$model->avatar = Input::file("file_input");
}
model->save();
I want to add a dropzone inside an existing form but it doesn't seem to work.
When I view the console I get error throw new Error("No URL provided"). When I click upload I get no preview either - all I get is a normal file input.
<link href="../dropzone.css" rel="stylesheet">
<form action="/" enctype="multipart/form-data" method="POST">
<input type="text" id ="Username" name ="Username" />
<div class="dropzone" id="my-dropzone" name="mainFileUploader">
<div class="fallback">
<input name="file" type="file" />
</div>
</div>
<div>
<button type="submit" id="submit"> upload </button>
</div>
</form>
<script src="../jquery.min.js"></script>
<script src="../dropzone.js"></script>
<script>
$("my-dropzone").dropzone({
url: "/file/upload",
paramName: "file"
});
</script>
No url provided error is because $("my-dropzone") is wrong instead it must be $('#mydropzone')
dropzone along with other form, yes this is very much possible, you have to post the data using the URL provided in the dropzone not in the form action. That means all your form data along with the files uploaded shall be posted back to the url provided for the dropzone. A simple untested solution is as below;
<link href="../dropzone.css" rel="stylesheet">
<form action="/" enctype="multipart/form-data" method="POST">
<input type="text" id ="Username" name ="Username" />
<div class="dropzone" id="my-dropzone" name="mainFileUploader">
<div id="previewDiv></div>
<div class="fallback">
<input name="file" type="file" />
</div>
</div>
<div>
<button type="submit" id="submitForm"> upload </button>
</div>
</form>
<script src="../jquery.min.js"></script>
<script src="../dropzone.js"></script>
<script>
$("#mydropzone").dropzone({
url: "/<controller>/action/" ,
autoProcessQueue: false,
uploadMultiple: true, //if you want more than a file to be uploaded
addRemoveLinks:true,
maxFiles: 10,
previewsContainer: '#previewDiv',
init: function () {
var submitButton = document.querySelector("#submitForm");
var wrapperThis = this;
submitButton.addEventListener("click", function () {
wrapperThis.processQueue();
});
this.on("addedfile", function (file) {
// Create the remove button
var removeButton = Dropzone.createElement("<button class="yourclass"> Remove File</button>");
// Listen to the click event
removeButton.addEventListener("click", function (e) {
// Make sure the button click doesn't submit the form:
e.preventDefault();
e.stopPropagation();
// Remove the file preview.
wrapperThis.removeFile(file);
});
file.previewElement.appendChild(removeButton);
});
// Also if you want to post any additional data, you can do it here
this.on('sending', function (data, xhr, formData) {
formData.append("PKId", $("#PKId").val());
});
this.on("maxfilesexceeded", function(file) {
alert('max files exceeded');
// handle max+1 file.
});
}
});
</script>
The script where you initialize dropzone can be inside $document.ready or wrap it as a function and call when you want to initialize it.
Happy coding!!
I'm using the Kendo UI Upload Control and wanted to allow for multiple files in synchronous mode, but when adding multiple files at the same time, they are grouped together in the same line item. Is there a way to have each separate file as its own line item when group selecting? In the screenshot that is linked, there are 2 line items, but I would like to have 3 line items; One for each file
Javascript:
$('#files').kendoUpload({
localization: {
select: 'Select files to upload<br />-or-<br />Drag files here to upload'
},
multiple: true,
showFileList: true,
success: function (e)
{
},
select: function (e)
{
}
});
HTML:
<form method="post" action="/Api/UploadUrl" style="width:100%">
<div>
<input name="files" id="files" type="file" />
<p><input type="submit" value="Submit" class="k-button" /></p>
</div>
</form>
Screenshot of the grouping: http://i.imgur.com/sMl8RSl.png
The files cannot be listed in different list items. The synchronous Upload widget does not differ from a regular <input type="file" /> element with the multiple attribute applied, which means that all files are added to the FileList of the current input.